事件坐标与 transform:scale 引发的问题
问题
当前需要开发弹窗拖拽移动功能，在通过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 删除
评论
登录后参与评论
推荐阅读
目录