这篇文章介绍一下如何通过这个类实现一个简单的随手画画板的简单程序demo,功能包括:划线(可以调整线条粗细,颜色),撤销笔画,回撤笔画,清除画布,橡皮擦。当然也可以扩展其他的功能。
一、首先看看实现划线部分的关键代码吧!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
|
这里简单的说明介绍吧!
1、使用一个数组 arrayStrokes(称之为笔画数组) 来记录整一幅画,这个数组中保存的是一个个的字典,而这些字典就是这幅画中的每一笔画(而且是有顺序的),字典中有三项内容:包括笔画的size,color还有一个数组arrayPointsInStroke,注意:这个数组保存的touch begin和move过程中经过的点的坐标(这些点统统用直线连接起来,就可以形成一个笔画了。当然,这个数组中是保存了好多个点的!所以连接起来笔画还是很逼真的!)。
2、那么在绘制的时候,就要用到 arrayStrokes 这个关键的数组了,从里面拿出每一个字典(一个字典就是代表一个笔画),根据字典中笔画的size,color和笔画所经过的点坐标,那么让UIBezierPath这个类来完成笔画的绘制就很简单了。
这样应该可以理解吧!
二、笔画的撤销和回撤的实现
我们知道每一个笔画都是通过一个字典来保存的,那么我们在画线的过程中对笔画的撤销和回撤那也就很简单了吧!
我们可以使用另一个数组 arrayAbandonedStrokes (称之为废弃数组)来保存我们所撤销的笔画,而撤销,肯定是我们所有笔画中的最后一划,所以我们在arrayAbandonedStrokes 废弃数组保存 arrayStrokes 笔画数组中的最后一个元素,同时将 arrayStrokes 笔画数组中的最后一个元素删除。这样就可以实现笔画的撤销。
反之,就是实现回撤了。即将废弃数组中的最后一个元素添加到笔画数组中,同时将废弃数组中的最后一个元素删除。
实现的代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
三、清楚画布的功能实现
1 2 3 4 5 6 7 |
|
四、笔画颜色的选择
这里的处理是用到一个弹出框,点击可以选择颜色。
下面讲一下如何实现这个颜色选择器。其中参考自:点击打开链接
实现原理:弹出框中显示的是一张图片,我们通过一个函数处理,获取到这个图片的所有像素点的透明度和RGB(每一个值占1Byte)数据(是一个数组),然后通过点击获取到点的坐标,就可以获取到这个像素点的透明度和RGB值了。
实现的有关代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
|