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

Question

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

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

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

E.g：

<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语句就可以找到图像的位置。