3

我有一个显示在固定 div 中的图像。

<div>
  <img src="path/to/image" id="map" />
</div>

我正在使用 -webkit-transform 属性来缩放并导航到缩放的图像（不需要其他浏览器。只是 webkit）。所有的东西都是用 javascript/jquery 完成的。导航适用于任何方向。最大缩放比例为 10。

例如：

<button id="up">zoom in and move up</button>

$('#up').on('click',function() {
    $('#map').css({'webkitTransform':'translateX('+SOME_VALUE+'px) translateY('+SOME_VALUE+'px) scale('+ SCALE +')'});
});

一切正常。

困难在不同的地方：

图像上有一个圆点。我知道这个点的坐标和它的半径（例如X-100px,Y-100px,R-10px）；这些坐标与图像相关。

问题：

如果图像被缩放，我如何确定这个圆点是否可见？如何确定图像的哪个区域可见？如何确定其在调整大小状态下的实际坐标。请不要犹豫，看看显示所需的示例图像：

图片

更新：

不幸的是，下面给出的解决方案并不完全正确。通过将 height() 的 jquery 值与缩放率相乘，您将无法获得准确的结果。我自己找到了解决方案。有以下 javascript（不是 jquery）属性：

element.getBoundingClientRect

此属性反映调整后图像的实际尺寸并返回实际位置的真实坐标。jquery的用法如下：

$('#some_element')[0].getBoundingClientRect();

我希望它对那些将来遇到问题的人有用:)

4

1 回答 1

0

$("#yourDiv").height()您可以使用or获取 div 大小$("#yourDiv").width()，然后使用 and 获取图像大小并确定她在 div 中的$('#yourImage').position().left位置$('#yourImage').position().top。只需很少的 if 语句，您就应该找出图像的位置。

于 2013-07-20T16:21:43.917 回答