微信小程序|简单易上手的画板功能
问题描述
大部分安卓用户的手机里是没有自带画板功能的，而在近期网课盛行之时，一个随手可用的手写面板，无论是在写笔记方面，还是在辅助授课方面，一个小画板就体现出了很大的作用。那么这个功能应该如何来实现呢？
效果图：
图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
编 辑 | 王楠岚
责 编 | 吴怡辰
where2go 团队
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-04-11，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
云开发 CloudBase
云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务，可用于云端一体化开发多种端应用（小程序、公众号、Web 应用等），避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。
腾讯云开发者
