如何获得相对于应用了缩放变换的div的正确鼠标位置 [英] How to get the correct mouse position in relation to a div that has has a scale transform applied

问题描述

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

为了获得当前的鼠标位置，我从Click事件中读取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;
});

我曾多次尝试将比例因子与页面X/Y相乘、除、加、减，但都没有成功。谁能帮我弄清楚如何获得正确的值。

(我已经简化了我的代码，希望让我的问题更清楚，您可能在上面的代码中发现的任何错误都是由于向下进行的编辑。我的原始代码，但鼠标位置问题例外)。

为了说明我所谈论的内容，我制作了一个快速jsfiddle示例，该示例允许使用Translate3d拖动div。当刻度为正常(1)时，在其单击点上拖动div。当div向上缩放时(2)，它不再从单击点正确拖动。

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

推荐答案

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

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

这加上将偏移量乘以比例尺对我有效：

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

View jsFiddle Demo

这篇关于如何获得相对于应用了缩放变换的div的正确鼠标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！