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

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

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

先看效果图：

wxml

手写板（请在下方区域手写内容）

清除画板

确定

js

var context = null;// 使用 wx.createContext 获取绘图上下文 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, 0, canvasw, canvash);

context.setStrokeStyle('#000000');

context.setLineWidth(4);

context.setLineCap('round');

context.setLineJoin('round');

context.stroke();

context.draw(false);

},

canvasEnd: function (event) {

ihttp://sButtonDown = false;

},

//清除画布

cleardraw: function () {

//清除画布

arrx = [];

arhttp://ry = [];

arrz = [];

context.clearRect(0, 0, canvasw, 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

/* pages/shouxieban/shouxieban.wxss */

/*手写板 */

page{

background: #f6f6f6;

padding: 5px auto

}

canvas{

border: 1px solid #d0d0d0;

margin: 5rpx;

background: #f2f2f2

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。