我有一个显示在固定 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)属性:
此属性反映调整后图像的实际尺寸并返回实际位置的真实坐标。jquery的用法如下:
$('#some_element')[0].getBoundingClientRect();
我希望它对那些将来遇到问题的人有用:)