touch canvas 写的画板小程序很卡
发布于 7 年前 作者 jieliao 10292 次浏览 来自 问答

用touch事件和canvas写了一个涂鸦画板小程序,模拟的时候很流畅,但是真机上特别卡,很难画出圆弧状,请求帮忙指点

3 回复

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 = [];

},

是否有示例代码可供参阅呢

咋不回我了,微信官方

回到顶部