Wybierz elementy SVG, wykonując wolny rysunek wokół nich.

Question

Pracuję nad projektem, w którym chcę narysować linię wokół niektórych elementów SVG, aby dokonać wyboru obiektów wewnątrz tego obszaru.

Oto zrzut ekranu z tego, co mam teraz. Użyłem Farba, aby dodać linię, aby było idealnie jasne, co próbuję osiągnąć. Chcę wybrać dwa rect wewnątrz narysowanego koła.

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

widzę szereg kroków, które musi zostać rozwiązany:

1. Tworzenie elementu path na mousedown i nagrywać ruchy myszy aż mouseup
2. Zamknij path, w przypadku gdy użytkownik nie narysował okręgu
3. Znajdź elementy svg, które są całkowicie lub częściowo wewnątrz okręgu

Jakie podejście widzisz i czy masz jakieś zalecenia, jak się do tego zabrać?

Używam D3.js. Ten slide (autorstwa Mike'a Bostocka, twórcy D3) może być interesujący, aby przyjrzeć się.

Answer 1

chciałbym przejść następujące etapy:

1. uzyskiwanie AABB (lub min/max box) w postaci wolnej ręki,
2. znaleźć wszystkie elementy, których AABB zachodzi jedna z swobodne formowania i zapisać w sposób lista,
3. uzyskanie wypukłej formy Freehand
4. testową jeśli każda lub niektóre z wierzchołków z elementów listy znajdują się wewnątrz wypukłej kadłub

W zależności od tego, czy przetestujesz wszystkie wierzchołki tak, aby leżały wewnątrz wypukłego kadłuba, możesz określić, czy element leży całkowicie wewnątrz rysunku odręcznego, czy tylko się na niego nakłada.

Niestety nie jestem zaznajomiony z d3.js, ale zgadnij, że zapewnia metody uzyskania wypukłych kadłubów, aabbs i punktów testowych, które znajdują się wewnątrz wielokąta. Prawdopodobnie nawet oferuje możliwość dokonywania zapytań AABB znaleźć nakładających AABB w kroku 2.

powodzenia ...