讯享网

 <span id="Label3"><div><strong>A.需求</strong></div><div>1.超简易画图，只有一种画笔</div><div>2.清屏功能</div><div>3.回退功能</div><div>4.保存功能</div><div>5.使用了cocos2D</div><div>&nbsp;</div><div>code source: https://github.com/hellovoidworld/PaintDemo</div><div>&nbsp;</div><div><img alt="技术分享" style="background-image: none; padding-top: 0px; padding-left: 0px; margin: 0px; display: inline; padding-right: 0px; border: 0px;" title="Image(12)" src="https://www.u72.net/d/file/p/2024/08/20/7c633d789ad1a030113fbaf9f6b18b9c.png" alt="Image(12)" width="327" height="510" border="0" /></div><div>&nbsp;</div><div><strong>B.实现方法1</strong></div><div>1.基本界面</div><div>（1）3个按钮：清屏、回退、保存</div><div>（2）绘图view</div><div><img alt="技术分享" style="background-image: none; padding-top: 0px; padding-left: 0px; margin: 0px; display: inline; padding-right: 0px; border: 0px;" title="Image(13)" src="https://www.u72.net/d/file/p/2024/08/20/41fc6c100bbd34b2d95d269fd3fa640a.png" alt="Image(13)" width="1028" height="474" border="0" /></div><div>&nbsp;</div><div>2.画线</div><div>（1）使用数组存储绘图点：存储一条线的数组、存储所有线的总数组</div><div>（2）在touch的开始、拖曳、结束记录触摸位置，触发重绘</div><div>&nbsp;</div><div>3.清屏</div><div>删除总数组</div><div>&nbsp;</div><div>4.回退</div><div>删除最后画的一条线：删除相应数组</div><div>&nbsp;</div><div>5.保存到相册</div><div>使用&rdquo;截图&rdquo;功能，保存绘图view</div><div>&nbsp;<div></div></div><div>&nbsp;</div><div><div></div></div><div>&nbsp;</div><div><strong>C.实现方法2</strong></div><div>1.基本界面和方法1一样</div><div>&nbsp;</div><div>2.画线</div><div>（1）使用贝塞尔路径UIBezierPath，一条线就是一个UIBezierPath对象</div><div>（2）同样使用数组来存储UIBezierPath对象</div><div>&nbsp;</div><div>3.清屏、回退、保存和方法1一样</div><div>&nbsp;</div><div><div></div></div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div><strong>D.附加功能</strong></div><ul><li>slider控件调整线宽</li><li>选择颜色</li></ul><div>&nbsp;</div><div><img alt="技术分享" style="background-image: none; padding-top: 0px; padding-left: 0px; margin: 0px; display: inline; padding-right: 0px; border: 0px;" title="Image(14)" src="https://www.u72.net/d/file/p/2024/08/20/c4a5c4bc49dbef4b7685f089be7a300c.png" alt="Image(14)" width="327" height="505" border="0" /></div><div>&nbsp;</div><div>1.slider调整线宽</div><div>（1）使用slider控件</div><div>（2）通过slider的valueChange事件调用方法设置线宽</div><div>&nbsp;</div><div>2.选择颜色</div><div>（1）创建一个&ldquo;色块&rdquo;类</div><ul><li>使用UIView作为色块</li><li>自定义一个继承UIView的类，作为色块class，给色块UIView加上点击事件</li><li>给色块UIView创建一个颜色属性和代理协议，代理是ViewController；创建一个点击代理事件方法</li></ul><div><div></div></div><div>&nbsp;</div><div>（2）自定义一个继承UIBezierPath的类，增加一个线颜色的属性</div><div><div></div></div><div>&nbsp;</div><div>（3）ViewController代理&ldquo;色块&rdquo;的点击事件</div><ul><li>拖入所有&ldquo;色块&rdquo;对象到ViewController，设置代理</li><li>遵守&ldquo;色块&rdquo;协议，实现代理方法</li></ul><div>&nbsp;</div><div><div></div><br /><br />@end</div><div>&nbsp;</div><div>（4）&ldquo;画板&rdquo;在开始画一条线的时候（触摸开始），设置线宽和颜色</div><div><div></div><p>&nbsp;</p></div><div>&nbsp;</div><p>[iOS UI进阶 - 4.0] 涂鸦app Demo</p></span>