微信小程序制作简易画板
效果图
palette.gif
原理介绍
利用官方组件canvas来实现画板的制作，通过不断获取手指触摸的位置，将初始位置和移动位置进行连线，达到实现画笔的功能。另外利用官方APIclearRect实现橡皮檫的功能，而不仅仅只是在画布上涂白色达到表面上的消除效果。
废话不多，上代码
简单布局一下
整个布局没有啥好说的，命个名，绑定两个事件。唯一需要提醒的一点就是如果希望画画的时候禁用屏幕滚动，可以设置disable-scroll='{{true}}'。
<!-- wxml布局 -->
<canvas
class='canvas'
canvas-id='my-canvas'
disable-scroll='{{true}}'
bindtouchstart='touchStart'
bindtouchmove='touchMove'>
</canvas>
<view class='rubber' bindtap='clear' hover-class='change'>
我是橡皮檫
</view>
/* 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
})
}
})
