收藏
回答

canvas(2d)签名组件,在IOS上刚按下不出笔画,需要抬手再按下才能正常绘制?

使用的是Canvas 2D 接口

安卓上应该正常,同事的iphone14上得第二次按才能出笔画

代码片段:https://developers.weixin.qq.com/s/Lo7WbemB7LI2

下面是bindtouchstart bindtouchmove的函数

    // 开始签名
    _start(e) {
      this.setData({
        canvasPosX: e.changedTouches[0].x,
        canvasPosY: e.changedTouches[0].y,
      });
      this.data.canvasContext.lineWidth = 5;
      this.data.canvasContext.moveTo(
        this.data.canvasPosX,
        this.data.canvasPosY
      );
    },

 // 开始移动
    _move(e) {
      const { canvasContext, canvasPosX, canvasPosY } = this.data;
      const { x: curX, y: curY } = e.changedTouches[0];


      const deltaX = Math.abs(canvasPosX - curX);
      const deltaY = Math.abs(canvasPosY - curY);


      // 相差大于3像素的时候作二阶贝塞尔曲线
      if (deltaX >= 3 || deltaY >= 3) {
        // 前后两点中心点
        const centerX = (canvasPosX + curX) / 2;
        const centerY = (canvasPosY + curY) / 2;


        //这里以前一点作为控制点,中心点作为终点,起始点为上一次的中点,很流畅啊!
        canvasContext.quadraticCurveTo(
          canvasPosX,
          canvasPosY,
          centerX,
          centerY
        );
        canvasContext.stroke();


        this.setData({
          canvasPosX: curX,
          canvasPosY: curY,
        });
      }


      this.setData({
        canvasPosX: e.changedTouches[0].x,
        canvasPosY: e.changedTouches[0].y,
      });
      canvasContext.lineTo(canvasPosX, canvasPosY);
      canvasContext.stroke();
    },


最后一次编辑于  2023-05-15
回答关注问题邀请回答
收藏

1 个回答

  • Demons
    Demons
    2023-05-15

    我这边根据代码片段无法复现可以提供一下复现视频吗

    2023-05-15
    有用
    回复 2
    • 张文皓
      张文皓
      2023-05-15
      https://share.weiyun.com/bBwEbL9X,有点糊,但能看出来要抬手才能画出来
      2023-05-15
      回复
    • Demons
      Demons
      2023-05-16回复张文皓
      我这边试了两台13.14发现要第一下大力点画是可以的,你试试
      2023-05-16
      回复
登录 后发表内容