在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。 问题描述 大部分安卓用户的手机里是没有自带画板功能的,而在近期网课盛行之时,一个随手可用的手写面板,无论是在写笔记方面,还是在辅助授课方面,一个小画板就体现出了很大的作用。那么这个功能应该如何来实现呢? 效果图: 图2.1 画板效果图 解决方案 1.了解canvas组件 小程序中画板功能可以通过canvas画布组件来实现,了解canvas组件的基本属性是实现画板功能的基础。 表1 canvas属性:
2. 相关api 首先,初始化一个函数initCanvas: function (){},在里面创建一个 CanvasContext获取绘图上下文;然后创建绘画事件开始、移动和结束(canvasStart、canvasMove、canvasEnd)的三个函数,并在其中配置动作坐标;绘制完成之后,如果需要清除画布,则创建一个cleardraw: function (){}函数,在里面重置坐标的高和宽。 3代码示例 表3.1 wxml代码示例:
表3.2 js部分代码示例:
结语 此次的画板实现只是一个简单的手写面板的功能,但是canvas的相关api非常多,能够实现的功能不局限于此,比如形状、填充、渐变、文字样式等非常多样,后续将会有更多功能实现的介绍。 END 编 辑 | 王楠岚 责 编 | 吴怡辰 where2go 团队 微信号:算法与编程之美 长按识别二维码关注我们! 温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发! |
请发表评论