web-dev-qa-db-ja.com

画面サイズに基づいてxy座標を計算する方法

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

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

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

編集：データベースに2つのフィールド、width_percentageとheight percentageを追加して、幅のxパーセンテージと高さのyパーセンテージを保存しました。したがって、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にスケーリングするだけなので、高さと最初のクリックと同じピクセルの計算は行いませんでした。新しい幅にパーセンテージを掛けて、画面の左からそのパーセンテージマージンのドットを設定します。パーセンテージは35％なので、新しいx座標は左端から900 *.35 = 315pxになります。うまくいかなかったし、レスポンシブサイトの同じ場所でクリックを続けるために頭を悩ませている。

javascriptjquerycoordinatesheatmap
26
Naterade

あなたはjqueryでこれを達成することができます：

$( 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);
});
10
Arun

この数式を試して、数値の範囲を変更しましたか？

FormulaX

FormulaY

そしてこれを保存する代わりに：

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

0と1の間で正規化して保存できるため、どのwidth/heightでも機能します（各xをwidthで除算して計算し、各yをheightで）：

x,     y
0.344, 0.357
0.263, 0.858

次に、それらを保存したときに使用したwidth/heightを知っている必要はありません。現在の画面のサイズに変換する場合は、それぞれに現在のwidth/heightを乗算するだけです。

8
MondKin

これはあなたがすべきことです。ドキュメントが解析されているときに、サイズ変更イベントが発生することがあります。 onloadイベント関数内にコードを配置することをお勧めします。方向変更関数は、@ Arunの回答から取得されます。

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>
3
www139

パーセンテージは正しい方向に進んでいると思います。地図画像のオフセットを含めていますか？アルゴは機能していますが、ビューポートでオフセットが変更されているため、視覚的表現が正しく表示されないのでしょうか。

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

適切な配置を得るには、毎回オフセットを追加する必要があります。

3
Joe Johnston

このためには、いくつかの計算を行う必要があります。これは、高さと幅に基づいて新しいxとyの部分を返す関数です

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

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

[〜＃〜] demo [〜＃〜]

2
Mitul

質問全体は、これを使用するページに大きく依存します。ほとんどのページには、中央に配置されたブロックや、自己サイズ変更（「レスポンシブ」）要素がいくつかあります。ページの応答性が非常に低い場合。幅が固定されていると、作業が簡単になります。ページが中央に配置されている場合は、ページの中央を基準としたカーソルのX位置を保存することができます。この方法では、ウィンドウの幅は重要ではありません。もちろん同じことが左揃えと右揃えのページにも当てはまります。この場合、X位置をウィンドウの左端または右端に対してそれぞれ保存します。

次の画像は、中央に配置されたクリック位置を示しています。ウィンドウのサイズを変更しても、クリックのxプロパティとyプロパティはここでは変更されないことに注意してください。

explanation of center-oriented position

今より一般的なメソッド

ウィンドウのサイズ、カーソル位置、およびスクロールオフセットを保存する場合、クリックするたびにレイアウトと一緒に再現できますが、一意の寸法セットごとにそれを再現する必要があります。上記のトリックを使用すると、すべてのレイアウトをオーバーレイして、共通の特徴を見つけることができる場合があります。たとえば、ページがウィンドウの中央に配置され、最大幅があり、ウィンドウの中央を基準にしてX位置を保存した場合、少なくともその幅のウィンドウで発生したすべてのクリックをオーバーレイできます。

ただし、いくつかのトリックを実行して、既に保存した情報と一緒にクリックした要素を保存することもできます。要素に対するクリック位置も保存する場合、このデータを「送信ボタンが右下で押されている」または「ドロップダウンの遠端をクリックすることが多いため、誤って表示されることがある」などと評価できます。数ピクセルずつクリックしてください。」.

0
Hubert Grzeskowiak

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

1。 パディングとマージンはスケーリングされない場合があります。スタイルシートの最後に「* {padding：0; margin：0}」を使用して、問題が解決するかどうかを確認します。

2。 外側と内側（つまり、すべての要素）の要素のスケーリングを確認します。単一の要素が拡大縮小に失敗すると、他の多くの要素がずれてしまいます。これは通常、テキスト入力で発生します。スタイルシートの最後に「* {border：solid 2}」を使用して、各要素のスケーリングの効果を視覚的に観察します。

問題は解決されると思います。

0
aanand_ub