收藏
回答

canvas 在 bindtouchmove 方法中 绘制问题

框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
小程序 Bug Android MIUI10.3.6 小米8 小米mix2s OPPO 7.0.6

canvas 在 bindtouchmove 方法中 使用draw方法画线 出现问题

在开发者工具和苹果手机上都没有问题

安卓手机有问题,可以复现出来,左上角的点 有时候会连着画的那个点


正常情况:



有问题的情况:



<canvas canvas-id="canvas" class="canvas" bindtouchstart="start" bindtouchmove="move" bindtouchend="end" disable-scroll></canvas>

sign() {

this.setData({

hidden: false

});

const ctx = wx.createCanvasContext('canvas')

ctx.setLineWidth(3)

ctx.setLineJoin('round')

ctx.setLineCap('round')

ctx.draw()

this.setData({

ctx

})

},

start({

touches

}) {

// console.log('start', touches[0].x, touches[0].y)

const ctx = this.data.ctx

ctx.moveTo(touches[0].x, touches[0].y)

},

move({

touches

}) {

// console.log('move', touches[0].x, touches[0].y)

const ctx = this.data.ctx

ctx.lineTo(touches[0].x, touches[0].y)

ctx.stroke()

ctx.draw(true, () => {

ctx.moveTo(touches[0].x, touches[0].y)

})

},



回答关注问题邀请回答
收藏

2 个回答

  • Jīan
    Jīan
    2019-12-26

    请问楼主解决了吗,我这也遇到同样的问题,郁闷~

    2019-12-26
    有用
    回复 2
    • L
      L
      2020-01-15
      解决了
      ctx.draw(true, () => {
      ctx.moveTo(touches[0].x, touches[0].y)
      })
      这个回调里的代码 放到外面就好了
      ctx.draw(true, () => {
      })
      ctx.moveTo(touches[0].x, touches[0].y)
      2020-01-15
      1
      回复
    • Jīan
      Jīan
      2020-01-15回复L
      非常感谢!!
      2020-01-15
      回复
  • 卢霄霄
    卢霄霄
    2019-09-19

    moveTo之后加个 beginPath呢

    2019-09-19
    有用
    回复 6
    • L
      L
      2019-09-19
      一样的会有问题 ,就是安卓手机有问题 苹果和客服端没问题
      2019-09-19
      回复
    • 卢霄霄
      卢霄霄
      2019-09-19回复L
      咦。。我试了个安卓机 正常的呢。。
      2019-09-19
      回复
    • L
      L
      2019-09-19
      难道是我们这个手机问题 我试了两个小米的 一个OPPO的 都有问题。。。你用的我的代码片段啊?
      2019-09-19
      回复
    • 卢霄霄
      卢霄霄
      2019-09-19回复L
      嗯。。用的你的片段,我的是黑鲨2 pro
      2019-09-19
      回复
    • L
      L
      2019-09-20
      我试的3款手机都有问题 尴尬
      2019-09-20
      回复
    查看更多(1)
登录 后发表内容
问题标签