转载请注明出处：https://blog.csdn.net/sunmmer123

正文开始前，先念叨几句，自2018年停博之后，再次提笔开始记录。
感谢时隔2年无更新的情况下，还未跑路的粉丝们！
感谢大家对我前俩篇关于音视频博文的支持！
希望这篇文章在自我复盘的同时也能帮助到大家！

看完这篇博客，诚邀感兴趣的各位参与脑暴，在评论区留言讨论，谈一谈你的想法方案或者问题。

1、功能需求

在画板上可以对铅笔图元进行圈选然后进行一系列操作
如下图，粗略的展示下这个功能：

2、功能分析

• 对于这个问题，在处理一段完整的铅笔绘图的时候很简单
• 对于被橡皮擦除了一部分铅笔图元来说，我们就需要把这段图元做拆解了，分成多段铅笔图元
• 画满整个屏幕的时候，线段巨多，那么分解的工作就会沉重，效率就会低下，自然呈现的效果就是卡顿了

3、问题总结

那么如何将一个完整铅笔图元拆成多个，怎样拆能更快就是具体要思考和解决的问题了

4、我的实现方案

• 将绘制的图元绑定相对应得矩阵，也就是说每一笔铅笔绘图或者擦除区域都有他们自己的一个二维数组，而这个二维数组就是一个矩阵
• 这个二维数组里面存放的信息只有0和1，0未被占用，1占位标明该像素被占用
• 当擦除区与铅笔绘图有相交时，遍历将铅笔绘制的这个图元的矩阵所对应的位置的信息改成0，表示已经被擦除了，像素没有被占用了
• 最后遍历矩阵，每到为0的时候就说明是一段图元的结尾位置，这样就能将一个线段在经历擦除之后生成多段了

看到了这，已经是晕头转向了，我们具体看下代码

1、俩个对象

• 铅笔
• 橡皮擦
• 对象里分别存放的信息就是画笔对象以及点数据和对应的矩阵对象
  

2、关于矩阵

• 其实也就是一个二维数组，绘制的每一个图形都有他自己的所在的矩阵区域
• 简单的理解就是你画了一条线，将这条线转换成一个矩阵
• 矩阵对象里面存放的信息：顶点坐标，长宽、二维数组
  
• 如图，也就是绿框这个区域：
  

3、将图元转成矩阵

在onTouchEvent中只有当up的时候，才去将生成对应得矩阵对象
具体流程如下：

• 获取到绘制Path上所有的点，铅笔的就是拿这个铅笔path，橡皮擦的话就拿橡皮擦的path
• 通过computeBounds方法获取path的闭合区域边界
• 确定这个矩阵的顶点坐标以及宽高
• 根据宽高初始化定义矩阵的二维数组
• 循环所有的点，将点对应的二维数组索引的这个地方数据设置为1，表示该像素被占用
  

4、过滤线段(取出真正被擦除的线段)

当橡皮擦抬手，设置完橡皮擦的矩阵对象之后，就开始处理分段逻辑

• 判断橡皮擦移动擦除的区域是否与铅笔图元(线段)相交
• 取出相交的铅笔图元(线段)整理到一个几个中
• 以上执行这种是否相交过滤取线段的方法属于一个小细节优化处，因为可能在屏幕上画了好多条线段，我擦除的可能只是一条线段的区域，那么去分段的时候遍历所有的线段集合就没有必要了，所以先把与擦除区域有相交的线段取出
• 判断相交的主要逻辑就是通过computeBounds方法获取橡皮擦的区域和线段的区域，调用系统是否相交的方法判断

5、处理线段矩阵里的信息

• 接着循环橡皮擦矩阵区域，当遇到像素点为1的时候，将相交的这笔线段对应的矩阵这个位置数据设置为0，表示已经被擦除了，没有像素被占用了
  

看到这，肯定一直疑惑这个矩阵他到底是用来干嘛的？用0，1具体是要做什么事？

• 博文从标题开始就在围绕一个问题"如何将一条线段分成多段"，那么分段分段，只有具体一个标识告诉我这里开始被截断了，我才能分
• 所以这个矩阵的作用就当于帮助我分段的工作，0，1就是告诉我是否是截断了
• 回顾下铅笔图元对象Pen，它里面有个点集合变量，一条线段就是由多个点组成的，这个点对象存放的x，y坐标和一个是否被擦除的标识布尔值
• 接下去就把点里的这个是否擦除标识根据矩阵0，1做判断设置值，循环遍历所有点，获取矩阵索引，判断当前位置是否1，是的话标识该点没有被擦除，0的话就是这个点被擦除了
  

6、开始分段

经过一系列数据操作之后，开始真真实实的分段处理吧

• 一条线段中所有点都知道是否是被截断得了，那么就循环遍历就好了，遇到标识了被擦除的点的时候，就生成一个新的铅笔对象吧
  

7、遗留问题

• 当我画面整个屏幕的时候，此时这个线段中的点数据是很多的，同时他的整个矩阵区域也是很大的，当我擦除区域也很大的时候，分段过程繁重，整体给的一个效果就是慢下来了
• 如下图，演示一下：
  

总结

至此，整个流程实现方案就说完了，不知道大家有没有看懂呢。如果你有兴趣，或者遇到类似功能需要完成以及有更好的实现方案，可以下方评论区留言讨论，需要源码研究的小伙伴也可留言私信我！！

canvas是html5的新特性，提供绘画api给javascript来将一些效果绘制在一块画布上。用一些简单的canvas知识就可以做出很绚丽的效果。

首先，在一个新建的html中添加一个画布：

<canvas id="canvas"></canvas>

然后在javascript中对这个画布进行一些初始化设置:

var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');

接下来设置画布的宽高:

canvas.width=1024;
canvas.height=768;

画一条直线：

context.moveTo(x,y);
context.lineTo(x,y);
context.stroke();

这样一条简单的线段就完成了。

先直接给出结论

在连通图（通俗的解释 图中每一个顶点最少可以到达两根线。 同时我们把使用了此顶点的线段称之为此顶点的连通线）中。

以顶点为圆心，则整个圆会被N个连通线划分成N个圆心角。

如上图，顶点A的圆，被划分成1,2,3 圆弧角，则我们设AB边代表角2，AD代表角3，AC，代表角1，这样刚好一条边对应一个圆弧角。

∠BAD和下一个角为∠DAC，可用AB边和下一边AD表示

结论：

1.在连通图中，所有封闭图形的角的数量和等于连通图拥有的圆弧角的数量，则意味着，连通图中所有圆弧角都是形成封闭图形的必要元素（圆弧角不会被重复使用）。

如上图，连通图的圆弧角数量=10=A(3)+B(2)+C(2)+D(3)。寻找到封闭图形3个ABD,ADC,ABDC，封闭图形圆弧角=ABD(3)+ADC(3)+ABDC(4)=10。

2.封闭图形中的每个圆弧角的旋转方向是一致的（可使用正旋转排序）。

如上图，DB>>AB，BA>>DA,AD>>BD他们三者的旋转方向一致(>>表示旋转的意思，DB指向量，箭头在D位置)

       以通俗的话来说：

        DB边以B点为旋转中心，逆时针旋转第一个遇到的边就是AB，

        BA边以A点为旋转中心，逆时针旋转第一个遇到的边就是AD，

       AD边以D点为旋转中心，逆时针旋转第一个遇到的边就是DB,

       最后回到了开始的边，那么图形寻找结束，每一条边进行这个操作，则可以找到所有的图形（在寻找的途中标记圆弧角是否已经被使用过。可以减少无用重复计算，同时可用来终止寻找）

3.每一条边，都会成为两个顶点的圆弧角所使用的边。

得到结论后我们就可以着手设计算法，

（因为一条边刚好对应一个圆弧角，所以圆弧角和边可以使用边代替）

1.求出所有顶点的圆弧角。

2.对所有顶点的圆弧角进行固定绕序方向的排序（使用正旋转排序，参照轴进行排序，例如x轴）。

3.以还有可用圆弧角的顶点开始。

4.找到这个圆弧角对应的另一个顶点，同时找到这个顶点对应圆弧角的下一个圆弧角。

例:

有A[B,C],B[A,C],C[A,B]（A[B,C]的意思是，有顶点A，同时可以到达B,C两点，可到达的点，是固定绕序排序好的）

则 第一次获取到圆弧角  AB,那么对应的B点圆弧为BA，下一个圆弧为BC，如此递归寻找可找到,A,B,C

5.重复步骤4，直至找到一个已经用过的圆弧角，则停止。

6.重复步骤3，直至顶点中没有可用圆弧角

如上图

1.先求出所有的圆弧角，并且排序好（逆时针，正旋转）。

A[B,D,C] , B[A，D] , C[D,A] , D[B,C,A] 

Ab[T,T,T] ,  Bb[T,T] ,Cb[T,T] ,Db[T,T,T] (T为此弧度没有被使用过，F为使用过),用于标记所有的圆弧角的使用情况

开始寻找第一个封闭图形G[];

2.找到顶点A，发现他有可用圆弧角（第一个），则添加A到封闭图形中G[A],标记A顶点中第一可用圆弧角为使用状态Ab[F,T,T]

3.封闭图形G添加B，同时知道B是下个要使用的顶点(A的第一个元素就是B)。

我们知道上一个使用的顶点为A，而，A元素在B中的位置为1，1+1=2(相加大于总共的数量时取余总数量即可).则我们下个要使用顶点为D，如此循环，直到找到开始点A结束。

则完成每个封闭图形的过程和结果为

                         (A[B,D,C] , B[A，D] , C[D,A] , D[B,C,A] )

                          Ab[T,T,T] ,  Bb[T,T] ,Cb[T,T] ,Db[T,T,T]

                         (A[B,D,C] , B[A，D] , C[D,A] , D[B,C,A] )

G[A,B,D,C]     Ab[F,T,T],  Bb[T,F] ,Cb [T,F]， Db[T,F,T]

                         (A[B,D,C] , B[A，D] , C[D,A] , D[B,C,A] )

G[A,D,B]        Ab[F,F,T] , Bb[F,F]，Cb[T,F]， Db[F,F,T] 

                         (A[B,D,C] , B[A，D] , C[D,A] , D[B,C,A] )

G[A,C,D]        Ab[F,F,F]，Bb[F,F]  , Cb[F,F], Db[F,F,F]

ps：

如何给旋转角度排序，可使用正旋转参照x轴的旋转度数进行排序。