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

查看:27
本文介绍了如何获得相对于应用了缩放变换的div的正确鼠标位置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆