如何获取与应用了缩放变换的 div 相关的正确鼠标位置

Question

我正在使用CSS transform的scale属性来创建一个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/

- Finglish

---

如果你能准备一个带有这个的jsFiddle就太好了 :) - Lipis

@Lipis 我已经添加了一个 jsfiddle 的例子。 - Finglish

我喜欢这个问题...但它很复杂，就像当我的独角兽在飞行时吃菠菜，我怎么能知道它的速度:D - Ahmad Alfy

@Ahmad Alfy 是的！因此设置了悬赏。 - Finglish

Answer 1

您需要设置webkit变换原点。基本上，当您进行缩放时，它将起源于中心。这意味着偏移量将是错误的。0,0将从正方形的中心开始。但是，如果您将原点设置为左上角，它将在缩放时保持正确的坐标。以下是设置原点的方法：

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

这个方法对我来说很有用：将偏移量乘以比例因子。

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

查看 jsFiddle 演示

- JNP Web Developer

Answer 2

不要使用 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/

。

- Yukulélé

---

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

Answer 3

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

- Flowkap