Seleziona elementi SVG creando un disegno a mano libera intorno a loro

Question

Sto lavorando a un progetto in cui voglio tracciare una linea attorno ad alcuni elementi SVG per fare una selezione degli oggetti all'interno dell'area.

Ecco uno screenshot di ciò che ho adesso. Ho usato Paint per aggiungere la linea per rendere perfettamente chiaro ciò che sto cercando di ottenere. Voglio selezionare i due rect all'interno del cerchio disegnato.

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

vedo una serie di passi che deve essere risolto:

1. Creare un elemento path a mousedown e registrare i movimenti del mouse fino mouseup
2. Chiudere il path, nel caso la l'utente non ha disegnato un cerchio
3. Trova elementi svg che è completamente o parzialmente all'interno del cerchio

Quali approcci vedi e hai qualche suggerimento su come procedere?

Sto usando D3.js. Questo slide (di Mike Bostock, il creatore di D3) potrebbe essere interessante da dare un'occhiata.

Answer 1

andrei le seguenti operazioni:

1. ricevendo l'AABB (o min/scatola max) della forma a mano libera,
2. trovare tutti gli elementi i cui AABB sovrappone una delle figure a mano libera e salvare il in un elenco,
3. ottenere convesso della forma a mano libera,
4. test se ciascuno o alcuni dei vertici dagli elementi della lista si trovano all'interno dello scafo convesso-

A seconda se si testano tutti i vertici all'interno dello scafo convesso, è possibile determinare se l'elemento si trova completamente all'interno del disegno a mano libera o lo si sovrappone.

Sfortunatamente non conosco bene d3.js, ma suppongo che fornisca metodi per ottenere scafi convessi, aabbs e punti di prova all'interno di un poligono. Probabilmente anche vi offre la possibilità di effettuare ricerche per trovare AABB AABB sovrapposizione nel passaggio 2.

buona fortuna ...