如何获得与应用了比例变换的 div 相关的正确鼠标位置答案

【问题标题】：How to get the correct mouse position in relation to a div that has has a scale transform applied如何获得与应用了比例变换的 div 相关的正确鼠标位置
【发布时间】：2013-03-06 05:12:10
【问题描述】：

我正在使用 CSS 变换比例在 div 上创建平滑缩放。问题是我希望即使在放大时也能够获得相对于 div 的正确鼠标位置，但我似乎可以找出正确的算法来获取这些数据。我正在从以下位置检索当前比例因子：

var transform = new WebKitCSSMatrix(window.getComputedStyle($("#zoom_div")[0]).webkitTransform);
scale = transform.a;

当我在各种比例设置下读取 div 的位置时，它似乎报告了正确的位置，即当我缩放 div 直到屏幕更大时，左侧和顶部的位置值为负值并且看起来是正确的，和返回的比例值一样：

$("#zoom_div").position().left
$("#zoom_div").position().top

为了获取当前鼠标位置，我从点击事件中读取 x 和 y 位置并移除偏移量。这在比例值为 1（无比例）时可以正常工作，但在 div 放大时不能正常工作。这是我的基本代码：

$("#zoom_div").on("click", function(e){
    var org = e.originalEvent;

    var pos = $("#zoom_div").position();

    var offset = {
        x:org.changedTouches[0].pageX - pos.left,
        y:org.changedTouches[0].pageY - pos.top
    }

    var rel_x_pos = org.changedTouches[0].pageX - offset.x;
    var rel_y_pos = org.changedTouches[0].pageY - offset.y;

    var rel_pos = [rel_x_pos, rel_y_pos];
    return rel_pos;
});

我已经多次尝试在 pageX / Y 中乘除加减比例因子，但没有任何运气。谁能帮我弄清楚如何获得正确的值。

（我已经从原始代码中简化了我的代码，希望让我的问题更清楚，您在上面的代码中可能发现的任何错误都是由于向下编辑造成的。我的原始代码除了鼠标位置问题之外。

为了说明我在说什么，我做了一个快速的 jsfiddle 示例，它允许使用 translate3d 拖动 div。当比例正常 (1) 时，div 被拖动到它被点击的位置。当 div 放大 (2) 时，它不再从单击的点正确拖动。

http://jsfiddle.net/6EsYG/12/

【问题讨论】：

如果你能用这个准备一个 jsFiddle 会很好:)
@Lipis 我添加了一个 jsfiddle 示例
我喜欢这个问题......但它很复杂，比如我怎样才能知道我的独角兽一边吃菠菜一边飞的速度：D
@Ahmad Alfy 是的！因此赏金

标签： javascript jquery css jquery-events css-transforms

【解决方案1】：

不要使用event.pageX - pos.left，而是使用event.offsetX（或者对于某些浏览器：event.originalEvent.layerX

div.on('click',function(e) {
    var x = (e.offsetX != null) ? e.offsetX : e.originalEvent.layerX;
    var y = (e.offsetY != null) ? e.offsetY : e.originalEvent.layerY;
});

查看我的 jsFiddle 示例：http://jsfiddle.net/Yukulele/LdLZg/

【讨论】：

谢谢。这是一个很好的提示，但它不能解决我的问题。我在上面的问题中添加了一个 jsfiddle 示例来说明这一点。

【解决方案2】：

您需要设置 webkit 转换原点。基本上，当你扩大规模时，它将来自中心。这意味着偏移量将是错误的。 0,0 将从正方形的中心开始。但是，如果将原点设置为左上角，则缩放时将保持正确的坐标。这是您设置原点的方式：

#zoom_div{
    -webkit-transform-origin: 0 0;
}

这与将偏移量乘以对我有用的比例相结合：

offset = {
  "x" : x * scale,
  "y" : y * scale
}

View jsFiddle Demo

【讨论】：

【解决方案3】：

您可以在 iframe 中嵌入缩放后的内容。在 iframe 之外缩放以启用 iframe 内的缩放鼠标事件，因为鼠标事件是文档范围。

【讨论】：