javascript - SVG 要素の周囲にフリーハンドで描画して選択する

Question

領域内のオブジェクトを選択するために、いくつかの SVG 要素の周りに線を引きたいプロジェクトに取り組んでいます。

これが私が今持っているもののスクリーンショットです。達成しようとしていることを完全に明確にするために、ペイントを使用して線を追加しました。rect描いた円の中の2つを選択したいです。

解決しなければならないいくつかのステップがあります。

1. pathで要素を作成し、mousedownそれまでのマウスの動きを記録しますmouseup
2. pathユーザーが円を描いていない場合は、 を閉じます
3. 完全または部分的に円の内側にある svg 要素を見つける

どのようなアプローチが見られますか? また、その方法に関する推奨事項はありますか?

D3.jsを使用しています。このスライド(D3 の作成者である Mike Bostock によるもの) を見てみると面白いかもしれません。

Answer 1

次の手順を実行します。

1. フリーハンド形式の aabb (または最小/最大ボックス) を取得し、
2. aabb がフリーフォームの aabb と重なっているすべての要素を見つけて、リストに保存します。
3. フリーハンド形式の凸包を取得し、
4. リストの要素の頂点のそれぞれまたは一部が凸包の内側にあるかどうかをテストします

すべての頂点が凸包の内側にあることをテストするかどうかによって、要素がフリーハンドの描画の内側に完全にあるのか、それともオーバーラップするだけなのかを判断できます。

残念ながら、私は d3.js に精通していませんが、凸包、aabbs、およびテスト ポイントをポリゴン内に配置するメソッドを提供していると推測します。おそらく、ステップ 2 で重複する aabb を見つけるために aabb クエリを作成する機能も提供します。

幸運を...