0

背景として大きな画像が設定された div があります。ほとんどの場合、背景画像は div よりも大きくなります。したがって、div の背景がパンします。(フィドルを参照)。

画像は部屋を配置した平面図です。
部屋は、位置 (x,y) を持ついくつかのマーカーで示されます。(今のところ、例には示されていません)

<div class="bg-img"></div>

<p>
    <input type="button" value="center on a point" id="center"/>
</p>

div.bg-img {
    background-image: url(http://www.bumc.bu.edu/supportingbusm/files/2012/01/Typical-Floor-Plan.jpg);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-color: blue;
    border: 1px solid #aaa;
    width: 450px;
    height: 450px;
    margin: 25px auto;        
}

同じフィドルはここにあります

divの背景を移動するために使用されるコードは@ jQueryです - div css backgroundをドラッグします

私たちが望むのは、ビューポートの画像内の既知の点 (x,y) を中央に配置することです。(または既知のポイントを中心に視点を配置しますか?)

点 (x,y) が部屋の位置になります。ユーザーがリストからいずれかの部屋をクリックすると、ビューポートは部屋の場所にパンする必要があります。すべての部屋には、事前に定義された (x,y) 位置があります。また、部屋/ポイントがマップの端にある場合は、それをビューポートに持ってくるだけでも十分です。

ビューポート パーツを中央に配置する方法がわかりませんでした。どんな手掛かり？

注 1 : 以下の例では、ユーザーが「部屋 3」をクリックすると、「部屋 3」がビューにパンされ、ビューポートの中央に配置されます。

注 2 : ルーム 3 はビューポートの中心に正確に表示されていません (そうであると仮定します)。また、ルーム マーカーはこの例には示されていません。

ルーム3をクリックした場合

同じフィドルはここにあります

4

1 に答える 1

1

おそらく、背景位置の x 座標と y 座標を、それぞれ center.x - point.x と center.y - point.y に設定することをお勧めします。たとえば、背景画像が幅 100 ピクセル、高さ 200 ピクセルの場合、center.x は 50、center.y は 50 です。したがって、位置 (75, 75) が中央になるように背景画像を配置する場合、背景画像は(-25px, -25px) に配置して、ビューポートに対して右に 75 ピクセル、下に 75 ピクセルが左に 50 ピクセル、下に 50 ピクセルになるように、上と左にプルします。

于 2013-05-27T20:07:29.330 に答える