本文介绍了如何获得相对于应用了缩放变换的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
$("#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的正确鼠标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！