-webkit-transform scale：如何获取可见区域的坐标

Question

我有一个显示在固定 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();

希望对以后遇到问题的小伙伴有用:)

Answer 1

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