2

私は以前にこの質問をしましたが、回答は私が何をする必要があるかを私に教えてくれましたが、例を提供しなかったので、私はまだ解決策を見つけていません。

height:100% width:100%オクラホマの地図の画像である「コンテナ」と呼ばれる最初のdivがあります。ユーザーがマップの特定のセクション（この例ではパンハンドル）をクリックすると、divがパンハンドル画像であるdivに切り替えられるという考え方です。クリックしたときのマウスのピクセル位置を知ることで、ユーザーがクリックした場所を特定します。

問題は、画面のサイズが異なるとピクセル値が異なることです。ユーザーが画面サイズに基づいてクリックする場所の計算をスケーリングするには、次のことを行う必要があると言われています。

比較する前に、すべての値をスケーリングします。すべてのxに正規の幅を掛け、実際の幅で割り、yと高さについても同じようにします。

「すべてのxに正規の幅を掛けて、実際の幅で割る」と混乱しています。とにかくスケーリングしてみました。パンハンドルの最初の端が画面の左側から3.1％離れており、最も遠い端が画面の左側から35.7％離れていることがわかりました。私は次のコードを持っています：


$("#container").click(function(e)
    {
        var x = event.pageX;
        var y = event.pageY;

        // Variables for area of pan handle
        /* These variables do not seem to work yet */
        var xScale1 = 0.031*x;
        var xScale2 = 0.357*x;

        if(x >= xScale1 && x "less-than"= xScale2) 
        {
        alert("You clicked the panhandle!");
        }   
     }

これにより、パンハンドルの水平方向の制限内をクリックするとアラートがポップアップ表示されますが、何も起こりません。私は自分の値を「実際の幅」で割っていないことに気づきました。「すべてのxに正規の幅を掛けて、実際の幅で割る」方法の例を教えてください。

4

2 に答える 2

2

正規の幅が意味するのは、「通常の」幅です。この場合、これは画像のネイティブサイズです。

マップに使用している画像が通常 1280 x 1600 px (議論のため) であるとしましょう。標準の高さは 1600 px、標準の幅は 1280 px です。

したがって、800 x 600 px のサイズの画面 (高さ 800 px、高さ 600 px) で画像を表示している場合、画像を 800 /1600 = 0.5 倍の高さ、および 600 / 1250 = 幅が 0.48 倍小さい。

同様に、画面の左側から 400 番目のピクセルをクリックし、実際の画面では上から 200 番目のピクセルをクリックすると、以前に確立された比率で割ることによって「正規の」位置を取得できます。つまり (400, 200) => (800, 416.7).

次に、これらの正規化された値を使用して、画像のどの部分をクリックしたかを調べることができます。

それをすべて言ったので、私はそれを本当にお勧めしません！これは、html イメージマップを使用するのに最適なケースです: http://htmldog.com/reference/htmltags/map/。見てみな！

お役に立てれば！

于 2011-03-21T14:04:21.503 に答える
1

この円錐形についてはわかりませんが、数学的にはあなたの問題を非常に単純な方法で見ています。あなたのマップは画像であり、画像のサイズは一定だと思います。マップが 100x100 だとしましょう。画面のサイズが 200x200 の場合、画面はマップの 2 倍の大きさになります。

xScreen = 2*xMap;
yScreen = 2*yMap;

したがって、画面に使用されるすべての値は、実際のマップに使用される値よりも 2 倍大きくなります。ユーザーが 200x200 の画面で 50,50 ピクセルをクリックした場合、これを 2 (比率) で割って、100x100 マップで 25,25 を得る必要があります。重要なのは、画面の合計サイズとマップの合計サイズを割って比率を見つけることです。この場合：

xScreen/xMap = 2;//200/100 = 2;
yScreen/yMap = 2;//200/100 = 2;

割合を求めるコードは次のとおりです。

var xScreen = screen.width;
var yScreen = screen.height;
var xProportion = xScreen/xSizeOfYourMap;
var yProportion = yScreen/ySizeOfYourMap;
$("#container").click(function(e)
{
    var x1 = event.pageX;
    var y1 = event.pageY;

    var x2 = x1/xProportion;
    var y2 = y1/yProportion;

    alert("x of screen:"+x1+" - x of map:"+x2);
 });

これで、ユーザーが目的のエリアをクリックしたかどうかを計算できるマップ上のクリックの値が得られました。すべての計算で、数値は比率を通過する必要があります。

于 2011-03-21T14:50:20.580 に答える