代码之家 › 专栏 › 技术社区 › Finglish

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

css-transforms jquery-events css jquery javascript

Finglish · 技术社区 · 12 年前

我使用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;
});

我做过几次乘法、除法、加法和从页面X/Y减去比例因子的尝试,但都没有成功。有人能帮我弄清楚如何得到正确的数值吗。

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

为了说明我所说的内容,我制作了一个快速的jsfiddle示例,该示例允许使用translate3d拖动div。当比例为法线(1)时,在单击div的点处拖动div。当div向上缩放(2)时,它不再从单击的点正确拖动。

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

3 回复 | 直到 3 年前

JNP Web Developer 12 年前

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

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

这与偏移量乘以刻度相结合,对我来说很有效:

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

View jsFiddle Demo

Yukulélé 12 年前

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

Flowkap 9 年前

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