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

Question

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

Answer 1

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

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

这与将偏移量乘以适合我的比例相结合:

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

查看jsFiddle演示

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/