we-plugin / we-cropper

微信小程序图片裁剪工具
https://we-plugin.github.io/we-cropper/#/
MIT License
2.17k stars 451 forks source link

【touch事件无效问题】touches 对象无x,y属性 #168

Open hdsuperman opened 4 years ago

hdsuperman commented 4 years ago

版本

1.3.8 or 1.3.9

问题

代码中使用了touches对象的x,y属性

  self.__oneTouchMove = function (touch) {
    var xMove, yMove;
    // 计算单指移动的距离
    if (self.touchended) {
      return self.updateCanvas()
    }
    xMove = Math.round(touch.x - self.touchX0);
    yMove = Math.round(touch.y - self.touchY0);

    var imgLeft = Math.round(self.rectX + xMove);
    var imgTop = Math.round(self.rectY + yMove);

    self.outsideBound(imgLeft, imgTop);

    self.updateCanvas();
  };

小程序的touches对象

属性 类型 说明
identifier Number 触摸点的标识符
pageX, pageY Number 距离文档左上角的距离,文档的左上角为原点 ,横向为X轴,纵向为Y轴
clientX, clientY Number 距离页面可显示区域(屏幕除去导航条)左上角距离,横向为X轴,纵向为Y轴

没有x,y属性,导致传入event对象无效

暂时兼容解决方案:

wepy 2.0 环境下:

    ts(e) {
      this.cropper.touchStart({
        ...e.$wx,
        touches: e.$wx.touches.map(i => {
          return {
            ...i,
            x: i.clientX,
            y: i.clientY
          };
        })
      });
    },

其他touch事件参考如上写法,可暂时解决

期望

后续版本更新中修复相关bug

close-issue-app[bot] commented 4 years ago

Issue tracker 只用于反馈 bug 和 feature request。在提问前请仔细阅读我们的文档,并推荐阅读《提问的智慧》:https://github.com/ruby-china/How-To-Ask-Questions-The-Smart-Way/blob/master/README-zh_CN.md

close-issue-app[bot] commented 4 years ago

Issue tracker 只用于反馈 bug 和 feature request。在提问前请仔细阅读我们的文档,并推荐阅读《提问的智慧》:https://github.com/ruby-china/How-To-Ask-Questions-The-Smart-Way/blob/master/README-zh_CN.md