事件坐标与 transform:scale 引发的问题

copy_left

发布于 2022-12-05 15:51:36

1.1K0

发布于 2022-12-05 15:51:36

文章被收录于专栏：方球

问题

当前需要开发弹窗拖拽移动功能，在通过mousemove计算坐标点位时，出现计算后点位始终与鼠标坐标存在一定比例差异，并且距离初始未知越远差距越大。

移动计算公式

这里需要被移动块与初始点击点做相对偏移移动, 所以可知移动前后鼠标所在点与被移动块的相对距离不变 x1, y1 移动块初始坐标 px1, py1 鼠标按下初始坐标 x2, y2 移动后移动块坐标 px2, px2 鼠标移动后坐标

px1 - x1 = px2 - x2 py1 - y1 = py2 - y2

求移动后的块坐标

x2 = x1 + px2 - px1 y2 = y1 + py2 - py1

debug

将计算逻辑提取，放置到无任何依赖的纯环境中, 计算结果正常，未存在比例差问题
判断问题与调用环境有关, 切换不同组件，上下文依旧, 所以与全局配置有关
切换不同屏幕比例，比例差不同，所以问题与屏幕适配有关
发现当前环境中使用的 transform:scale 做屏幕适配

解决

这里出现的问题是，通过mousemove获取的 e.pageX, e.pageY 是相对于页面的尺寸，不受全局样式 transform:scale 的影响, 而实际dom定位是经过比例缩放的，所以始终存在一个比例差问题，且鼠标移动距离越远，差距越大。这里需要将 e.pageX, e.pageY 也做比例尺转换，在做坐标计算。最终得出正确结果

x2 = x1 + px2*scale - px1 y2 = y1 + py2 *scale - py1

  function onMouseDown (e) {
  //  转换初始坐标
    prePosition.value = ratePosition({
      startX: e.pageX,
      startY: e.pageY
    })

    ctx.emit('blockMouseDown', { ...prePosition.value })
    document.addEventListener('mousemove', throttledMove)
    document.addEventListener('mouseup', onMouseUp)
  }

 function onMouseMove (e) {
  //  转换移动坐标
    const { startX, startY } = prePosition.value
    const { pageX, pageY } = ratePosition({
      pageX: e.pageX,
      pageY: e.pageY
    })
   ...
}

// 转换函数
  function ratePosition (position = {}) {
    const rate = getSacleRate() // 获取当前比例尺
    return Object.entries(position).reduce((acc, [prop, value]) => {
      return {
        ...acc,
        [prop]: value / rate
      }
    }, {})
  }

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-11-30，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度