用touch事件和canvas写了一个涂鸦画板小程序,模拟的时候很流畅,但是真机上特别卡,很难画出圆弧状,请求帮忙指点
touch事件代码如下
touchStart:function(e){
console.log(“touchStart”);
// console.log(e);
ctx.setStrokeStyle(this.data.pen.color);
ctx.setLineWidth(this.data.pen.lineWidth);
ctx.setLineCap(‘round’) //设置线条端点的样式
ctx.setLineJoin(‘round’) //设置两线相交处的样式
ctx.setLineCap(‘round’) // 让线条圆润
isButtonDown = true;
arrz.push(0);
arrx.push(e.changedTouches[0].x);
arry.push(e.changedTouches[0].y);
ctx.setStrokeStyle(this.data.pen.color);
ctx.setLineWidth(this.data.pen.lineWidth);
},
touchMove:function(e){
console.log(“touchMove”);
// console.log(e.timeStamp);
arrz.push(1);
arrx.push(e.changedTouches[0].x);
arry.push(e.changedTouches[0].y);
if(isButtonDown){
arrz.push(1);
arrx.push(e.changedTouches[0].x);
arry.push(e.changedTouches[0].y);
}
for (var i = 0; i < arrx.length; i++) {
if (arrz[i] == 0) {
ctx.moveTo(arrx[i], arry[i])
} else {
ctx.lineTo(arrx[i], arry[i])
};
};
// ctx.clearRect(0, 0, canvas_width, canvas_height);
ctx.stroke();
wx.drawCanvas({
canvasId: ‘myCanvas’,
actions: ctx.getActions(),
reserve: true
});
},
touchEnd:function(e){
console.log(“touchEnd”);
isButtonDown = false;
arrx = [];
arry = [];
arrz = [];
},