Jak dodać "kliknij i przeciągnij", aby przeskalować obraz w SVG?

chcę pozwolić odwiedzającym przeskalować obraz, używając kliknij i przeciągnij:Jak dodać "kliknij i przeciągnij", aby przeskalować obraz w SVG?

<html> 
    <body> 
     <svg> 
      <image>

Czy istnieje biblioteka JavaScript, która może mi pomóc?

zauważam Raphael has click and drag metod, ale będę jeszcze pisać dużo JS:

znaleźć narożniki obrazu
Dodać obszar w pobliżu narożników wybierane
Rysuj ikony dla rogi więc to oczywiste, że są selekcyjny
dodaj kliknij, przeciągnij i upuść na rogach
zaktualizować wymiary obrazu

Mogłem to wszystko zrobić, ale brzmi to czasochłonne. Czy powinienem użyć skryptu o otwartym kodzie źródłowym? Inne sugestie?

Źródło

2011-09-04 ram1

Znalazłem to rozwiązanie pod tym wpisem: Draggables and Resizables in SVG.

W odpowiedzi można znaleźć łącze jsfiddle: http://jsfiddle.net/tmkfs/. Możesz zmienić rozmiar okna, klikając i przeciągając róg okna. Mam nadzieję, że ten kod może ci pomóc.

Źródło

2011-09-16 15:21:24 cabreracanal

Znalazłem również ten https://github.com/cjheath/Raphaelle. Skrypt umożliwiający zmianę rozmiaru poprzez klikanie i przeciąganie obiektów. – cabreracanal

Nie to, co wiem. Muszę zrobić to samo i jestem zaskoczony, że nie znalazłem jeszcze wtyczki ani nawet przykładu, jak to zrobić z Rahpeal.js. Ponieważ wydaje się, że wiele osób chciałoby zrobić z SVG lub Rapheal.js, jestem zaskoczony, że nie ma wbudowanego sposobu, aby to zrobić (pomyślałbym, że skala + przeciągnięcie wystarczyłoby, ale to nie było tak proste, jak mogłoby się wydawać).

Potrzebuję tej funkcjonalności, więc sam ją buduję. Wpadłem na mały szkopuł (udokumentowany tutaj: Raphael.js drag with scale causes weird jumping behavior), ale właśnie to działało. Kiedy skończę, mogę opublikować moje rozwiązanie w jsfiddle lub na github, kiedy skończę, jeśli chcesz.

Źródło

2011-09-05 02:46:19 chuckles

Dobrze wiedzieć. Tak, podziel się z tobą rozwiązaniem, gdy skończysz. – ram1

Powinieneś rzucić okiem na SvgKit Zapewnia on ładną bibliotekę do manipulowania - generuj svg, w tym obsługę zdarzeń za pomocą javascript.

z oficjalnej dokumentacji:

Dodatki do obiektu SVGKit do obsługi zdarzeń. W SVG trudno jest uzyskać , aby uzyskać współrzędne myszy do lokalnych współrzędnych. SVGEvent ma procedury pozwalające włączyć elementy przeciągalne, elementy obrotowe oraz zapobiegać przesuwaniu i powiększaniu elementów.

Prezentacje wydarzeń is here.

Źródło

2011-09-15 13:42:02 edigu

Jak dodać "kliknij i przeciągnij", aby przeskalować obraz w SVG?

Odpowiedz

Powiązane problemy