这是一个画板应用。
###1.介绍
这是一个参照sketchmaster界面制作的画板,页面简捷易操作。它包含以下功能:
- 5种画笔(包括橡皮),每种笔有不同的特性,这也是一个可玩点。
- 独立粗细控制。
- 丰富的颜色选择器。预设18种颜色,及一个取色器。
- 可更换画布背景。
- 前进、回退控制。
- 清除与保存到相册。
#####1.1 界面
启动后页面如下:
页面分为三部分:
- 导航栏
- 画布
- 底部工具栏
######笔类型选择器
目前做了5种笔,分别为:圆珠笔、倾斜笔、米形笔、喷枪、橡皮擦。笔的起名不一定正确,能理解就行。
目前有固定颜色与取色器两种。
其中预设了10余种画布,可以滑动更换。
为下方工具栏中央Slider。
每种笔的初始粗细与颜色可以独立控制,修改颜色后,只会修改对应笔的粗细与颜色属性。
######线条优化
对于线条的流畅性,做了优化。方法是取中点,做二次bezier,如下图所示:
其中绿色空心小点,是我们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线条上的方向也能大致得到,这就提供给了我们无限的扩展空间。比如:毛笔的粗细变化、路径上小星星的朝向。
- 目前bezier曲线均分的算法不够精确。
- 每段bezier结束与下一段bezier间衔接有BUG,需要优化。
- 曲线上粗细变化需要逐渐过渡,目前是突然性的。
- bezier上点的方向还未判定。
喜欢的话,请star,谢谢支持。欢迎提出好的建议,fork共同改进代码。