微信小程序制作簡易畫板
效果圖
palette.gif
原理介紹
??利用官方組件canvas來實現(xiàn)畫板的制作椒功，通過不斷獲取手指觸摸的位置窗骑，將初始位置和移動位置進行連線凛忿，達到實現(xiàn)畫筆的功能。另外利用官方APIclearRect實現(xiàn)橡皮檫的功能樱衷，而不僅僅只是在畫布上涂白色達到表面上的消除效果棋嘲。
??官方文檔鏈接
廢話不多，上代碼
簡單布局一下
??整個布局沒有啥好說的矩桂，命個名沸移，綁定兩個事件。唯一需要提醒的一點就是如果希望畫畫的時候禁用屏幕滾動耍鬓，可以設(shè)置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({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
isClear: false
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
// 獲取畫布上下文
this.context = wx.createCanvasContext('my-canvas'); // 參數(shù)必須和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) {
// 是
// 以當前坐標點為中心創(chuàng)建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() {
// 每次點擊都變成相反的狀態(tài)
this.setData({
isClear: !this.data.isClear
})
}
})
