javascript - -webkit-变换比例: how to get the coordinates of a visible area

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

此属性反射(reflect)调整大小后图像的真实尺寸并返回实际位置的真实坐标。jquery 的用法如下:

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

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

Answer 1

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