微信小程序|简单易上手的画板功能

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

问题描述

大部分安卓用户的手机里是没有自带画板功能的，而在近期网课盛行之时，一个随手可用的手写面板，无论是在写笔记方面，还是在辅助授课方面，一个小画板就体现出了很大的作用。那么这个功能应该如何来实现呢？

效果图：

图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代码示例：

画板              清除画板      确定

表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 团队

---

   

微信号：算法与编程之美          

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！