SVG要素を自由に手描きで選択してください

Question

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

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

1. mousedownでpath要素を作成し、mouseup
2. は場合に、pathを閉じるまで、マウスの動きを記録：私は解かなければならないステップの数が表示さ

   Screenshot http://s23.postimage.org/y6t5t9be3/Screen_Shot_2013_02_26_at_15_31_26.png

   ユーザーが円を描いていない

3. 円の中に完全にまたは部分的に含まれるsvg要素を見つける

どのようなアプローチがありますか、どのように進むべきかについてのアドバイスはありますか？

私はD3.jsを使用しています。このslide（Mike Bostock、D3の作成者）は面白そうかもしれません。

Answer 1

私は、次のステップに行くだろう：フリーハンドフォームのAABBを取得

1. を（または最小/最大ボックス）、
2. AABBフリーフォーム1と重なり、中に保存し、すべての要素を見つけますフリーハンド形の凸包を取得リスト、
3. 、
4. 試験凸包内部リスト嘘の要素からそれぞれまたは頂点の一部

場合

すべての頂点を凸包の内部に置くようにテストする場合、要素がフリーハンドの図の中に完全に入っているのか、それとも重なっているのかを判断できます。

残念ながら、私はd3.jsに精通していませんが、凸包、aabbs、テストポイントをポリゴンの内側に配置する方法を提供していると思います。おそらくそれも、ステップ2

幸運にAABBの重複見つけるために、AABBのクエリを作成する機能を提供します...