16

我正在使用 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/

4

3 回答 3

10

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

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

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

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

查看 jsFiddle 演示

于 2013-03-20T11:04:51.557 回答
5

不要使用event.pageX - pos.left, but 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/

于 2013-03-18T15:24:45.750 回答
0

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

于 2015-09-22T09:30:14.927 回答