2017-03-11 17 views
4

長方形の周囲に枠線を描く方法と、重なった枠線の描画方法が少し異なります。これらの矩形は、さまざまなサイズと重なりを持つことができるようにユーザーが生成します。ユーザーはzオーダーを指定します。次に例を示します。長方形の枠線を描画するためのアルゴリズム

enter image description here

私のデータは、単純な矩形のデータ構造でモデル化されます。簡単にするために、私はすべての境界を線で描くことを期待しています(オーバーラップがない場合でも)。私はブラウザでSVGを使用して長方形と枠線を描画することを計画していますが、私はプラットフォームにとらわれない汎用ソリューションを探しています。 。

この問題のドメインは私にとって初めてのものです。私はこの分野で多くの経験を持っていませんが、私は喜んで情報を得ることができます。

+0

2つ以上の矩形が重複している可能性はありますか?画像で最も高いスタックは2です。 – maraca

+0

[2つの矩形の交差を検出するアルゴリズム?](http://stackoverflow.com/questions/115426/algorithm-to-detect-intersection-of-two-rectangles?rq=1 ) – Arash

+0

@marca - まさに矩形はユーザーが提供するもので、さまざまなサイズと重なりを持つことができます。私はシンプルさのために最小モックアップを提供しましたが、いくつかのオーバーラップを追加する必要がありました。私にそれをさせてください。 –

答えて

2

矩形の枠線は、その上にある矩形の影響を受けるように見えます。

矩形を上から順に描画します。描画する次の矩形の8つの角隣接エッジペアのそれぞれに対して、現在描画されているすべての矩形をループして、角を含む矩形を見つけ、エッジの最も長い部分をオーバーラップさせます。エッジのその部分をオーバーラップしてレンダリングします。

これが遅すぎる場合は、2次元セグメントツリーを使用して、現在描画されているすべての矩形を保存して、特定のコーナーを含む矩形をすばやく特定できるようにします。

+0

あなたの答えをありがとう。長方形にさまざまなサイズや重なりがあることを示すためにモックアップを更新しました。私は本当にあなたの答えを変えるとは思わない、同意する? –

+0

私はこの正確な手法に従って成功しました。私はこの答えが深い詳細には及ばないことを知っていますが、ここではそれらをすべて崩壊させるという考え方があります。最初に最も高いzオーダーでソートされた長方形を処理します。チェックされている各四角形について、4つの線に分割します。次に、それらの4行を、その上の各四角形の4行に対してテストします。線が交差すると判断されると、より小さなセグメントに分割します。交差線を別々にレンダリングする。全体としては、約140行のコードでした。 ありがとうございます! –

関連する問題