問題タブ [bounding-box]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
0 に答える
477 参照

mysql - 一連の mysql ジオメトリを囲む境界ボックスを計算する方法は?

一連の形状を含む mysql テーブルがあります。テーブルは次のように定義されます。

テーブルには 24 個の形状 (レコード) が含まれています。各形状の「ogc_geom」には、形状を定義するポリゴンがあります。

shapeid = 0 の "ogc_geom" の例は次のとおりです。

すべての形状を囲む境界ボックスを計算するにはどうすればよいですか?

0 投票する
1 に答える
6945 参照

java - 境界ボックスを使用した衝突検出

私はクラスのプログラミングプロジェクトを行っています。ボール、パドル、4 つのエッジ、およびレンガで構成されるゲーム ブレーク アウトをプログラムしています。ボールはさまざまなオブジェクトから跳ね返り、衝突が検出されると、各オブジェクトはそれ自体に対してさまざまな操作を実行します。以下は、現在動作しない私のコードです。オブジェクトの位置 (中心点) を使用して境界ボックスを作成し、各エッジ (上、下、左、右) の値を使用してボックスがヒットするかどうかを計算しようとしています。私は頭の中で、コーナーが衝突する衝突と、あるオブジェクトが他のオブジェクトの真ん中のどこかに衝突する衝突の 2 つのタイプがあると考えました。私のコードを見て、できれば助けてください。私がやろうとしていることを行うためのより良い方法があるかどうかはわかりませんが、私が現在持っているものはありません.

これは、衝突できる他のすべてのオブジェクトと衝突できるすべてのオブジェクトをチェックするコードの一部です。また、各オブジェクトを動かし、ゲームのクロックを刻みます。

これは、オブジェクトが別のオブジェクトと衝突したかどうかを判断するために使用されるコードの一部であり、衝突した場合に実行する適切なアクションでもあります。コードのこのセクションは特にボール オブジェクトからのものであるため、ブロックに当たったときに実行されるアクションは ySpeed が逆になります。

0 投票する
4 に答える
19566 参照

javascript - JavaScript を使用して、回転した要素のバウンディング ボックスの X、Y、高さ、および幅を計算します。

基本的に、私は JavaScript に対してこの質問をしています:回転した四角形からバウンディング ボックスの座標を計算します。

ダイアグラム

この場合:

  • iX = 回転した (青) HTML 要素の幅
  • iY = 回転した (青) HTML 要素の高さ
  • bx = バウンディング ボックスの幅 (赤)
  • by = バウンディング ボックスの高さ (赤)
  • x = バウンディング ボックスの X 座標 (赤)
  • y = バウンディング ボックスの Y 座標 (赤)
  • iAngle/t = HTML 要素の回転角度 (青色。表示されていませんが、以下のコードで使用されています)、参考までに: この例では 37 度です (この例では重要ではありません)。

回転した HTML 要素を囲むバウンディング ボックス (すべて赤い数字) の X、Y、高さ、幅を JavaScript で計算するにはどうすればよいでしょうか? これに対するスティッキー ビットは、回転された HTML 要素 (青いボックス) の元の X/Y 座標を取得して、何らかのオフセットとして使用することです (これは、以下のコードには示されていません)。これは、中心点を決定するためにCSS3 の transform-originを調べる必要があるかもしれません。

部分的な解決策が得られましたが、X/Y 座標の計算が正しく機能していません...

近くにいるような気がするのに、まだ遠い…

あなたが提供できるどんな助けにも感謝します!

非 JavaSCRIPTERS を支援するには...

HTML 要素が回転されると、ブラウザは次のように見える「行列変換」または「回転行列」を返します。rotate(Xdeg) = matrix(cos(X), sin(X), -sin(X), cos(X), 0, 0); 詳細については、このページを参照してください

回転した要素 (青) の幅、高さ、および角度のみに基づいてバウンディング ボックス (赤) の X、Y を取得する方法について、これは私たちを啓発するだろうと感じています。

新しい情報

うーん...面白い...

ここに画像の説明を入力

各ブラウザは、X/Y の観点から異なる方法で回転を処理しているようです! FF はそれを完全に無視し、IE と Opera はバウンディング ボックスを描画し (ただし、そのプロパティは公開されません。つまり、bx & by)、Chrome と Safari は四角形を回転させます! FF を除くすべてが X/Y を適切に報告しています。つまり... X/Y の問題は FF のみに存在するようです! とても奇妙です!

また$(document).ready(function () {...});、回転したX / Yが認識されるには早すぎるようです(これは私の元の問題の一部でした!)。X/Y インテロゲーションが呼び出される直前に要素を回転させています$(document).ready(function () {...});が、しばらくしてから (!?) まで更新されないようです。

もう少し時間があれば、この例で jFiddle を使用しますが、「jquery-css-transform.js」の変更された形式を使用しているため、jFiddle の前に少し手を加える必要があります...

それで...どうした、FireFox?かっこよくないよ、男!

プロットは厚くなります...

FF12 は FF11 の問題を修正したようで、IE や Opera のように動作します。しかし、今は X/Y で振り出しに戻っていますが、少なくとも理由はわかっていると思います...

回転したオブジェクトの X/Y がブラウザによって正しく報告されていても、回転していないバージョンには「ゴースト」X/Y がまだ存在しているようです。これは操作の順序のようです。

  • X、Y が 20,20 の回転されていない要素から開始
  • 上記の要素を回転すると、X、Y が 15,35 と報告されます
  • 上記の要素を JavaScript/CSS 経由で X,Y 10,10 に移動します
  • ブラウザーは論理的に要素を 20,20 に戻し、10,10 に移動してから再回転し、X,Y は 5,25 になります。

だから...私は要素が10,10のポストローテーションで終わることを望んでいますが、要素が(一見)再回転されたポストムーブであるという事実のおかげで、結果のX、YはセットX、Yとは異なります。

これは私の問題です!したがって、私が本当に必要としているのは、目的の宛先座標 (10,10) を取得し、そこから逆方向に作業して、要素が 10,10 に回転する開始 X、Y 座標を取得する関数です。ブラウザの内部動作のおかげで、要素が 10=5 回転したように見えるので、少なくとも私の問題が何であるかはわかっています。

0 投票する
1 に答える
1370 参照

mongodb - ボックスの地理空間クエリ内のマングースが正しく機能しない

簡単な質問:
nodejsでマングースを使用して地理空間クエリを作成する適切な方法は何ですか?

複雑な話:
空間インデックスを持つマングースでスキーマを作成しました

次に、表3のドキュメントに挿入しました。これらのドキュメントは、mongoクライアントとmongooseの両方でdb.mymodels.find({})MyModel.find({});

次に、バウンディングボックスを使用して地理空間クエリを作成しようとします。
mongoクライアントは正常に動作します

ボックス内で、期待どおりに1つの結果のみを返します。
一方、マングースは3つの結果すべてを返します

この質問では、whereの代わりにfind()を使用する必要があると述べていますが、findをwhereに置き換えようとすると、'need an area > 0' チェックしたエラーが発生し、バウンディングボックスが左下、右上の順に正しくフォーマットされます。

何をすべきか?マングースを使用してバウンディングボックスで地理空間クエリを作成する適切な方法は何ですか?

0 投票する
1 に答える
565 参照

javascript - 回転していない長方形上の点

/ (プラスand )で始まり、回転先/を計算するこの優れた質問と回答を見つけました。この計算は完全に機能しますが、逆方向に実行したいと思います。/とから始めて、元の/とを計算したいと思います。xycenter x/ydegrees/radiansx'y'x'y'degrees/radiansxycenter x/y

または、JavaScript/jQuery では:

上記の数学/コードは、図 A の状況を解決します。/ (赤い円)、(青い星)、および の既知の値に基づいて、目的地x'/ (緑の円)の位置を計算します。y'xycenter x/ydegrees/radians

しかし、図 B を解くには数学/コードが必要です。ここで、目的地x/ y(緑色の円) だけでなく、目的地center x/y(緑色の星) も、開始x/ y(灰色の円、おそらく必要ではありません)、目的地x'/ y'(赤い円)、および の既知の値から見つけることができますdegrees/radians

図AとB

上記のコードは、宛先x/ y(緑色の円) を介して解決します ( iDegrees * -1@andrew cook の回答のおかげで、彼によって削除されました) が、それを行うには、宛先の場所center x/y(緑色の星) を入力する必要があります) であり、以下の図 C でわかるように、これが現在不足している計算です。

ダイアグラムC

では、座標?/ ?(緑の星) nA(角度) およびx'/ y'(赤い円) をどのように見つけるのでしょうか?

0 投票する
0 に答える
302 参照

javascript - Raphael.js - カスタム フォントを使用すると bbox が大きすぎる

カスタムフォントでテキストを作成すると、バウンディングボックスが大きすぎるという問題があります。標準フォントを使用すると、すべて問題ありません。誰でもアイデアはありますか?

私はそれを解決しました!@font-face のみが使用されている場合、raphael.js はテキストの幅を検出できないようです。Raphael.registerFont() でフォントを登録する必要がありました。

0 投票する
1 に答える
689 参照

python - KML: Python で境界座標から Range を計算する

特定のポリゴンの境界ボックス座標を持っている場合、KML ファイルの LookAt 要素の理想的な範囲値を Python で計算する方法はありますか?

範囲の境界座標から取得する数式または数式のセットは、すでに非常に役立ちます。

0 投票する
3 に答える
518 参照

php - PHP で画像を回転させたときに作成されるバウンディング ボックスの背景が黒くなる

これに対する答えを求めてインターネットを精査しましたが、うまくいくものを見つけることができないようです。画像をたとえば 5 度回転すると、その画像は、回転を格納するために作成された境界画像内で回転します。その作成された画像は完全に黒です。

バウンディングボックスの画像が完全に透明になるようにしようとしています。私が見た他のウェブサイトや質問のいくつかは、これがうまくいくはずだと言っています:

ただし、これは次のようになります。

収量

黒い境界ボックスを透明にするにはどうすればよいですか?

ありがとう!

0 投票する
2 に答える
1238 参照

ios - CGPath が CGRect と交差する領域を見つける

ユーザーがまだタッチするのに十分であることを確認するために、画面の境界内にあるCGPathの量を確認できるようにする必要があるiOSアプリに取り組んでいます。問題は、形状が角にある場合、パスが角にある場合、通常使用するすべての方法 (および試してみようと思うすべての方法) が失敗することです。

ここに写真があります:ここに画像の説明を入力

その形状が画面上にどのくらいあるかを計算するにはどうすればよいですか?

0 投票する
2 に答える
932 参照

javascript - 方向付けされたバウンディングボックスを分割するにはどうすればよいですか?

2次元の(必ずしも凸ではない)ポリゴンの方向付けされたバウンディングボックス(obb)ツリーを構築するコードを書いています。

これまでのところ、凸包を見つけ、船体に回転キャリパー法を使用することで、ポリゴンの面積が最小のobbを見つけることができました。

下の写真はその一例です。赤い線と赤い点が付いた黄色で塗りつぶされたポリゴンは、元のポリゴンを表しています。凸包は青色で黒い線で示され、obbは紫色の線で示されています。

(編集)要求に応じて:インタラクティブバージョン-Chromeでのみテスト済み

ここで、コードを拡張して、OBBだけでなく、OBBツリーを構築したいと思います。これは、ポリゴンをカットし、ポリゴンの半分ごとに新しいOBBを計算する必要があることを意味します。

これを行うための推奨される方法は、OBBを半分にカットしてポリゴンをカットすることのようです。しかし、いずれかの軸の中央でobbをカットすると、ポリゴン上に新しい頂点を作成する必要があるように見えます(そうでない場合、そのパーティションの凸包を見つけるにはどうすればよいですか?)。

  1. このような頂点の追加を回避する方法はありますか?
  2. そうでない場合、(実装の難しさに関して)それを行う最も簡単な方法は何ですか?最もランタイム効率の良い方法は何ですか?