微信小程序实现手指触摸画板

前端之家收集整理的这篇文章主要介绍了微信小程序实现手指触摸画板前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享微信小程序实现手指触摸画板的具体代码,供大家参考,具体内容如下

先看效果图:

wxml

手写板(请在下方区域手写内容

js

获取绘图上下文 context var isButtonDown = false;//是否在绘制中 var arrx = [];//动作横坐标 var arry = [];//动作纵坐标 var arrz = [];//总做状态,标识按下到抬起的一个组合 var canvasw = 0;//画布宽度 var canvash = 0;//画布高度 // pages/shouxieban/shouxieban.js Page({ /** * 页面的初始数据 */ data: { //canvas宽高 canvasw: 0,canvash: 0,//canvas生成图片路径 canvasimgsrc: "" },//画布初始化执行 startCanvas: function () { var that = this; //创建canvas this.initCanvas(); //获取系统信息 wx.getSystemInfo({ success: function (res) { canvasw = res.windowWidth - 0;//设备宽度 canvash = canvasw; that.setData({ 'canvasw': canvasw }); that.setData({ 'canvash': canvash }); } });

},//初始化函数
initCanvas: function () {
// 使用 wx.createContext 获取绘图上下文 context
context = wx.createCanvasContext('canvas');
context.beginPath()
context.setStrokeStyle('#000000');
context.setLineWidth(4);
context.setLineCap('round');
context.setLineJoin('round');
},//事件监听
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg)
},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);

};

for (var i = 0; i < arrx.length; i++) {
if (arrz[i] == 0) {
context.moveTo(arrx[i],arry[i])
} else {
context.lineTo(arrx[i],arry[i])
};

};
context.clearRect(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,canvash);
context.draw(true);
},//提交签名内容
setSign: function () {
var that = this;
if (arrx.length == 0) {
wx.showModal({
title: '提示',content: '签名内容不能为空!',showCancel: false
});
return false;
};
console.log("不是空的,canvas即将生成图片")
//生成图片
wx.canvasToTempFilePath({
canvasId: 'canvas',success: function (res) {
console.log("canvas可以生成图片")
console.log(res.tempFilePath,'canvas图片地址');
that.setData({ canvasimgsrc: res.tempFilePath })
//code 比如上传操作

},fail: function () {
console.log("canvas不可以生成图片")
wx.showModal({
title: '提示',content: '微信当前版本不支持,请更新到最新版本!',showCancel: false
});
},complete: function () {

}
})

},/**

  • 生命周期函数--监听页面加载
    */
    onLoad: function (options) {
    //画布初始化执行
    this.startCanvas();

}
})

css

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的微信小程序相关文章