さまざまな画面サイズの画像内でマウスクリックの位置を検出-JS/jQuery

StackOverflow https://stackoverflow.com/questions/5378387

質問

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

「コンテナ」と呼ばれる最初のdivがあります。 height:100% width:100% オクラホマ地図の画像。アイデアは、ユーザーがマップの特定のセクションをクリックすると（この例では、パンハンドル）、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に標準幅を掛け、実際の幅で分割する」方法の例を提供してください。

役に立ちましたか？

解決

標準的な幅とは、「通常の」幅です。これは、画像のネイティブサイズです。

マップに使用している画像は通常1280 x 1600 px（引数のためだけに）であり、標準的な高さは1600 pxで、標準的な幅は1280 pxです。

したがって、スクリーンサイズの800 x 600 pxで画像を表示している場合は、高さ800 px、高さ600 pxです。 1250 =幅が0.48倍小さくなります。

同様に、画面の左側から400番目のピクセルをクリックし、実際の画面の上部から200番目をクリックすると、以前に確立された比率で分割することで「標準的な」位置を取得できます。したがって、（400、200）=>（800、416.7）。

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

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

お役に立てれば！

他のヒント

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

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

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

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);
 });

これで、ユーザーが必要な領域をクリックしたかどうかを計算できるマップ上のクリックの値が表示されます。すべての計算について、数値は割合を通過する必要があります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top