微信小程序制作简易画板

效果图

palette.gif

原理介绍

利用官方组件canvas来实现画板的制作，通过不断获取手指触摸的位置，将初始位置和移动位置进行连线，达到实现画笔的功能。另外利用官方APIclearRect实现橡皮檫的功能，而不仅仅只是在画布上涂白色达到表面上的消除效果。

官方文档链接

废话不多，上代码

简单布局一下

整个布局没有啥好说的，命个名，绑定两个事件。唯一需要提醒的一点就是如果希望画画的时候禁用屏幕滚动，可以设置disable-scroll='{{true}}'。

class='canvas'

canvas-id='my-canvas'

disable-scroll='{{true}}'

bindtouchstart='touchStart'

bindtouchmove='touchMove'>

我是橡皮檫

/* wxss样式 */

page {

background: #f1f1f1;

}

.canvas {

background: #fff;

width: 600rpx;

height: 900rpx;

margin-top: 200rpx;

margin-left: auto;

margin-right: auto;

}

.rubber {

display: flex;

background: orange;

width: 200rpx;

height: 100rpx;

margin-top: 40rpx;

margin-left: auto;

margin-right: auto;

justify-content: center;

align-items: center;

}

.change {

background: #fff;

}

js逻辑

这里我把要说的都写进注释了，相信大家不难理解。当然这只是一个模型，需要改进和完善的地方还有很多，如果大家有更好的方法推荐，希望能够在下方留言。

// js代码

Page({

/**

* 页面的初始数据

*/

data: {

isClear: false

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

// 获取画布上下文

this.context = wx.createCanvasContext('my-canvas'); // 参数必须和canvas组件中canvas-id值相同

},

// 刚开始触摸

touchStart(e) {

// 获取触摸点坐标

this.startX = e.changedTouches[0].x

this.startY = e.changedTouches[0].y

// 画笔配置

this.context.setStrokeStyle('red'); // 颜色

this.context.setLineWidth(5); // 粗细

this.context.setLineCap('round'); // 线头形状

this.context.setLineJoin('round'); // 交叉处形状

},

// 开始移动

touchMove(e) {

// 移动时坐标

var moveX = e.changedTouches[0].x

var moveY = e.changedTouches[0].y

// 判断是否是橡皮檫

if (this.data.isClear) {

// 是

// 以当前坐标点为中心创建20*20像素的橡皮檫

let rectOriX = this.startX - 10;

let rectOriY = this.startY - 10;

this.context.clearRect(rectOriX, rectOriY, 20, 20);

} else {

// 不是

this.context.moveTo(this.startX, this.startY); // 找到起点

this.context.lineTo(moveX, moveY); // 找到终点

this.context.stroke(); // 描绘路径

}

// 改变起点坐标

this.startX = moveX;

this.startY = moveY;

this.context.draw(true); // 画

},

// 橡皮檫

clear() {

// 每次点击都变成相反的状态

this.setData({

isClear: !this.data.isClear

})

}

})