问题描述
大部分安卓用户的手机里是没有自带画板功能的，而在近期网课盛行之时，一个随手可用的手写面板，无论是在写笔记方面，还是在辅助授课方面，一个小画板就体现出了很大的作用。那么这个功能应该如何来实现呢？
效果图：
图2.1 画板效果图
解决方案
1.了解canvas组件
小程序中画板功能可以通过canvas画布组件来实现，了解canvas组件的基本属性是实现画板功能的基础。
表1 canvas属性：
|
disable-scroll |
当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新 |
|
bindtouchstart |
手指触摸动作开始 |
|
bindtouchmove |
手指触摸后移动 |
|
bindtouchend |
手指触摸动作结束 |
|
bindtouchcancel |
手指触摸动作被打断 |
|
binderror |
当发生错误时触发 error 事件，detail = {errMsg} |
2. 相关api
首先，初始化一个函数initCanvas: function (){}，在里面创建一个 CanvasContext获取绘图上下文；然后创建绘画事件开始、移动和结束（canvasStart、canvasMove、canvasEnd）的三个函数，并在其中配置动作坐标；绘制完成之后，如果需要清除画布，则创建一个cleardraw: function (){}函数，在里面重置坐标的高和宽。
3代码示例
表3.1 wxml代码示例：
|
<view> <view>画板</view> <canvas style="width: {{canvasw}}px; height: {{canvash}}px" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas> <view class='btns canvaspd'> <button bindtap="cleardraw">清除画板</button> <button bindtap="setSign">确定</button> </view> <image src='{{canvasimgsrc}}'></image> </view> |
表3.2 js部分代码示例：
|
Page({ data: { canvasw: 0, canvash: 0, //初始化函数 initCanvas: function () { context = wx.createCanvasContext('canvas'); context.beginPath() context.setStrokeStyle('#000000'); context.setLineWidth(4); context.setLineCap('round'); context.setLineJoin('round'); }, canvasStart: function (event) { isButtonDown = true; arrz.push(0); arrx.push(event.changedTouches[0].x); arry.push(event.changedTouches[0].y); }, canvasMove: function (event) { if (isButtonDown) { arrz.push(1); arrx.push(event.changedTouches[0].x); arry.push(event.changedTouches[0].y); }; context.clearRect(0, 0, canvasw, canvash);
context.setStrokeStyle('#000000'); context.setLineWidth(4); context.setLineCap('round'); context.setLineJoin('round'); context.stroke(); context.draw(false); }, canvasEnd: function (event) { isButtonDown = false; }, //清除画布 cleardraw: function () { arrx = []; arry = []; arrz = []; context.clearRect(0, 0, canvasw, canvash); context.draw(true); }, onLoad: function (options) { //画布初始化执行 this.startCanvas(); } }) |
结语
此次的画板实现只是一个简单的手写面板的功能，但是canvas的相关api非常多，能够实现的功能不局限于此，比如形状、填充、渐变、文字样式等非常多样，后续将会有更多功能实现的介绍。
END
