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()またはを使用して div サイズを$("#yourDiv").width()取得し、画像サイズを取得して、 および を使用して div に対する彼女の位置を決定する$('#yourImage').position().leftことができます$('#yourImage').position().top。いくつかの if ステートメントを使用して、画像がどこに配置されているかを確認する必要があります。

于 2013-07-20T16:21:43.917 に答える