收藏
回答

touch canvas 写的画板小程序很卡

问题模块
API和组件

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

最后一次编辑于  2017-12-21  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

3 个回答

  • HS
    HS
    2017-12-21

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

    2017-12-21
    赞同
    回复
  • 娜
    2017-12-25

    咋不回我了,微信官方

    2017-12-25
    赞同
    回复
  • 娜
    2017-12-21

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

    },


    2017-12-21
    赞同
    回复