スクリーンサイズに基づいてx、y座標を再計算する方法

Question

ヒートマップアプリケーションとストアがあり、クリックのx、y座標とビューポートの幅と高さを保存しています。 2回のクリックに対する実際のデータ：

x, y, width, height 
433, 343, 1257, 959 
331, 823, 1257, 959 

レスポンシブサイトで画面のサイズを変更すると、表示されたクリックがすべてオフになる問題があります。私は自分の検索で空になっていますが、異なる解像度のx座標とy座標を再計算するための数式やアルゴリズムがあります。たとえば、widthが1257から990に、heightが959からになる場合の最初のクリックは、どのようにxとyを再計算して同じ場所に並んでいるのですか？

EDIT： I幅のx率と高さのyパーセンテージを格納するデータベース、width_percentageおよび高パーセンテージ に2つのフィールドを追加しました。したがって、xが433で、画面の幅が1257の場合、xは画面の左端から35％でした。私は高さについて同じ理論を使用して計算を実行しましたが、スケーリング解像度にはパーセンテージがありますが、クリックドットを同じ場所に拡大しませんでした。私は、フル解像度1257の幅をクリックしてから900幅で再オープンしてこれをテストします。低い解像度でクリックドットを表示するコードについては、下記を参照してください。

のAjax PHP

while ($row = mysql_fetch_array($results)) { 
    if($_GET['w'] < $row['width']) { 
    $xcorr = $row['width_percentage'] * $_GET['w']; 
    $ycorr = $row['y']; 
    } 
} 

これは、ページの読み込みの画面解像度の幅と高さを渡し、$_GET変数を使用しています。次に、クリックドットを$resultsとしてデータベースから取得します。解像度の幅を1257から900に変更するだけなので、高さと最初のクリックと同じピクセルの計算には入れませんでした。新しい幅Iにパーセンテージを掛け、スクリーンの左側からそのパーセンテージマージンを設定します。パーセンテージは35％ なので、新しいx座標は左端から900 *.35 = 315pxになります。それはうまくいきませんでしたし、私は頭の上で頭を傷つけて、反応するサイトのために同じ場所をクリックし続けます。

Answer 1

私はあなたがパーセンテージで正しい軌道にいると思います。地図画像のオフセットを含めていますか？私はあなたのalgoは動作しているが、オフセットがビューポート内で変化しているので、視覚的表現が間違っているように思えます。

$(window).resize(function() { 
    var offset = yourMap.offset(); 
    myLeft = offset.left(); 
    myTop = offset.top(); 
}); 

適切な配置を得るためには、毎回オフセットを追加する必要があります。あなたはjqueryのことで、これをacheiveすることができます

Answer 2

：

$(window).resize(function() { 
    //ur code 
}); 

javascriptの

window.onresize = resize; 

function resize() 
{ 
alert("resize event detected!"); 
} 

あなたがモバイルデバイス上で作業している場合も

$(window).on("orientationchange",function(event){ 
    alert("Orientation is: " + event.orientation); 
}); 

Answer 3

このいずれかを使用するこれは、あなたが何をすべきかであります。文書が解析されるときにresizeイベントが発生することがあります。 onloadイベント関数の中にコードを入れるのは良い考えです。方向変更機能は、@ Arun answerから取得されます。あなたには、いくつかの計算を行う必要があり、このため

window.onload = function() { 
 

 
    $(window).on("orientationchange", function(event) { 
 
    alert("Orientation is: " + event.orientation); 
 
    }); 
 

 
    window.onresize = function() { 
 
    alert('window resized; recalculate'); 
 
    }; 
 

 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

。高さと幅に基づいて新しいxとyの部分を返す関数

function getNewX(xVlaue, oldWidth, newWidth){ 
    return xVlaue * newWidth/oldWidth; 
} 
newX = getNewX(10, 150, 100); // Use 

高さと幅の計算に共通の機能を使用できます。

DEMO

Answer 5

全体の問題は非常にあなたがこれを上使用したいページに依存します。 ほとんどのページには、中央に配置されたブロックやセルフリサイズ（「応答性」のある）要素があります。ページがあまり反応しない場合、例えば幅が固定されていれば、簡単に仕事ができます。ページが中央揃えになっている場合、カーソルのX位置をページの中央に相対的に保存することができます。この方法でウィンドウの幅は問題になりません。左揃えページと右揃えページにも同じことが言えます。この場合は、ウィンドウの左端または右端に合わせてX位置を保存します。

次の図は、センター指向のクリック位置を示しています。ウィンドウのサイズを変更すると、クリックのxおよびyプロパティがここで変更されないことに注意してください。より一般的な方法

に今

あなたはすべてのクリックでウィンドウの大きさ、カーソル位置とスクロールオフセットを保存する場合、あなたはおそらく、それを再現することができるようになりますレイアウトの横に表示されますが、一意のディメンションごとに再現する必要があります。あなたが上からトリックを使用した場合、すべてのレイアウトをオーバーレイして共通の分母を見つけることができるかもしれません。たとえば、ページがウィンドウの中央に配置され、最大幅を持ち、ウィンドウの中心を基準にしてX-posを保存した場合、その幅以上のウィンドウで発生したすべてのクリックをオーバーレイできます。

ただし、トリッキーなことがあります。また、保存した情報と一緒にクリックした要素を保存することもできます。要素に関連したクリック位置も保存すると、このデータは「送信ボタンが右下に押されている」、または「そのドロップダウンの遠端をクリックすることが多い - 少数のピクセルでクリックする "。

Answer 6

は、次の両方を試してみてください。

1.パディングとマージンが拡大しないことがあります。スタイルシートの最後に "* {padding：0; margin：0}"を使用し、それが修正されているかどうかを確認してください。

2.アウターとインナー（つまり、すべてを意味する）要素の縮尺を確実にします。単一の要素が拡大縮小できないと、他の多くの要素が外れてしまいます。これは一般的にテキスト入力で発生します。スタイルシートの最後に "* {border：solid 2}"を使用して、各要素のスケーリングの効果を視覚的に観察します。

問題が解決すると確信しています。

Answer 7

数値の範囲を変更するためにこの数式を試しましたか？

そして、代わりにこれを格納する：

x, y, width, height 
433, 343, 1257, 959 
331, 823, 1257, 959 

あなたはそれはそれは（で各xを割ることによって計算されたwidth/heightのために働く0と1の間で正規化保存することができそのwidthおよび各yは、heightである） ：

x,  y 
0.344, 0.357 
0.263, 0.858 

その後、あなたはあなたがそれらを保存したときに使用し、そしてあなたは現在の画面の大きさにそれらを変換したいときは、単に現在width/height

によって一つ一つを掛け width/heightを知っている必要はありません。