制作一个简易画板

如图所示,我利用微信开发者工具做了一个简单的画板。


1.png

该画板实现了基本的功能有:画线,橡皮擦,文本输入,油漆桶,清除,保存作品。H5方法用到的较多,微信给的API其实用到的比较少。另外还用到了# mustache语法,这个语法是我在写程序中才学到的一个方法。

接下来我阐述一下我遇到的问题:

一、是在鼠标点击canvas时Input框来辅助完成文本输入的方法。

在html里,canvas标签嵌套一个input标签(type="text"),input框的display的值为'{{display}}',注:这里用到了# mustache语法。首先需要在

Page{data:"display":"none"},

开始设置display为none值是为了触摸后使文本框显示,这样还可以直接在css样式中修改{{display}}的值。

接下来在canvas的touch..上绑定一个事件,当你使用文本功能时,触摸屏幕会触发该绑定事件的函数执行,在这个函数体中修改display的值,格式如下:this.setData({ "display":"block" })。这样原本隐藏的input框就可以显示了。

二、画线问题

在画线时,我们需要借助一个变量去记录上一个触摸点的位置,姑且称为oldPoint。该点存储在data里。每次画线时先判断oldPoint是否为空,如果为空,就把第一个触摸点记录;如果不为空,就先moveTo(oldPoint),之后lineTo(oldPoint),连好后再更新oldPoint。注意,ctx.draw()这个方法的默认参数是false,如果不写true,每次都会重画,无法保存之前画过的内容。

三、其他小问题
在变颜色的时候,我没有注意setFillColor和setStrokeColor的区别..我以为都是变色的,后来发现一个是变填充颜色的,一个是变线条颜色的。

有问题评论区留言,博主会耐心回复的~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容