最近看画板，就自己对照sketchmaster做了一个，效果还可以，发出来共享下，git地址：AnyDraw。
纯属个人手撸，欢迎好的建议，欢迎fork共同改进。
1.介绍
这是一个参照sketchmaster界面制作的画板，页面简捷易操作。它包含以下功能：
- 5种画笔(包括橡皮)，每种笔有不同的特性，这也是一个可玩点。
- 独立粗细控制。
- 丰富的颜色选择器。预设18种颜色，及一个取色器。
- 可更换画布背景。
- 前进、回退控制。
- 清除与保存到相册。
1.1 界面
启动后页面如下：
主界面
页面分为三部分：
- 导航栏
- 画布
- 底部工具栏
1.2 功能介绍
笔类型选择器
目前做了5种笔，分别为：圆珠笔、倾斜笔、米形笔、喷枪、橡皮擦。笔的起名不一定正确，能理解就行。
画笔选择
颜色选择器
目前有固定颜色与取色器两种。
画笔选择器.png
画布切换
其中预设了10余种画布，可以滑动更换。
image.png
粗细控制
为下方工具栏中央Slider。
每种笔的初始粗细与颜色可以独立控制，修改颜色后，只会修改对应笔的粗细与颜色属性。
线条优化
对于线条的流畅性，做了优化。方法是取中点，做二次bezier，如下图所示：
image.png
其中绿色空心小点，是我们touchesMove时经过的point，但我们不能直接把point连接point去绘制，那样全是折线不流畅。
如果此时正画到currunt点，向前取两个点：previous2、previous1，previous2与previous1中点为mid2，previous1与currunt中点为mid1，然后以previous1为控制点，mid2向mid1绘曲线，图中绿色部分。依次向后绘，就能得到平滑曲线。
快速绘制时，此方法会导致线条显示偏移原有线路，不过一般看不出来。也考虑过用三次bizier成线，貌似线条不够自然。三次bezier参考DEMO
绘制方式
采用了两种绘制方式。
- shapeLayer上设置path
- bitMap绘制
圆珠笔与橡皮擦是直接在shapeLayer上通过设置path实现，特点是线条流畅，缺点是不能控制线条的粗细变化。
其它笔是用bitMap实现，通过把bezier线条大致等分取点，然后在每个点上绘制图片。图片的大小与点的间距可以通过算法控制，每个点在bezier线条上的方向也能大致得到，这就提供给了我们无限的扩展空间。比如：毛笔的粗细变化、路径上小星星的朝向。
待优化
1. 目前bezier曲线均分的算法不够精确。
2. 每段bezier结束与下一段bezier间衔接有BUG，需要优化。
- 曲线上粗细变化需要逐渐过渡，目前是突然性的。
4. bezier上点的方向还未判定。
网友评论