微信手写板 android,微信小程序：手写板功能实现（canvas）
在微信小程序中，同樣支持canvas的使用。
1.首先在 wxml 頁面中添加組件：
2.在小程序的 js 中初始化所需的變量如下：
// 初始化簽名變量，放在 Page 前
var content = null;
var touchs = [];
//頁面的data數(shù)據(jù)，在 Page 中
data: {
imgList:[],
signImage: ''
}
3.在小程序的 js 中 Page 內(nèi)寫入如下函數(shù)：
// 畫布的觸摸移動開始手勢響應(yīng)
start: function (event) {
// console.log("觸摸開始" + event.changedTouches[0].x);
// console.log("觸摸開始" + event.changedTouches[0].y);
//獲取觸摸開始的 x,y
let point = { x: event.changedTouches[0].x, y: event.changedTouches[0].y }
touchs.push(point);
},
// 畫布的觸摸移動手勢響應(yīng)
move: function (e) {
let point = { x: e.touches[0].x, y: e.touches[0].y }
touchs.push(point);
if (touchs.length >= 2) {
this.draw(touchs);
}
},
// 畫布的觸摸移動結(jié)束手勢響應(yīng)
end: function (e) {
console.log("觸摸結(jié)束" + e);
//清空軌跡數(shù)組
for (let i = 0; i < touchs.length; i++) {
touchs.pop();
}
},
// 畫布的觸摸取消響應(yīng)
cancel: function (e) {
console.log("觸摸取消" + e);
},
// 畫布的長按手勢響應(yīng)
tap: function (e) {
console.log("長按手勢" + e);
},
error: function (e) {
console.log("畫布觸摸錯(cuò)誤" + e);
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
//獲得Canvas的上下文
content = wx.createCanvasContext('sign');
//設(shè)置線的顏色
content.setStrokeStyle("#000");
//設(shè)置線的寬度
content.setLineWidth(3);
//設(shè)置線兩端端點(diǎn)樣式更加圓潤
content.setLineCap('round');
//設(shè)置兩條線連接處更加圓潤
content.setLineJoin('round');
},
//繪制
draw: function (touchs) {
let point1 = touchs[0];
let point2 = touchs[1];
touchs.shift();
content.moveTo(point1.x, point1.y);
content.lineTo(point2.x, point2.y);
content.stroke();
content.draw(true);
},
//清除操作
clearClick: function () {
//清除畫布
content.clearRect(0, 0,750, 700);
content.draw(true);
},
//保存圖片
saveClick: function () {
var that = this;
wx.canvasToTempFilePath({
canvasId: 'firstCanvas',
success: function (res) {
//打印圖片路徑
console.log(res.tempFilePath);
//設(shè)置保存的圖片
that.setData({
signImage: res.tempFilePath
})
}
})
}
總結(jié)
以上是生活随笔為你收集整理的微信手写板 android,微信小程序：手写板功能实现（canvas）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CF791A Bear and Big
- 下一篇： PLS-00103: 出现符号 在需要下