Pracuję nad interaktywnym interfejsem przy użyciu SVG i JavaScript / jQuery i próbuję zdecydować między Raphaelem a jQuery SVG . chciałbym wiedzieć
Nie potrzebuję wsparcia VML / IE w Raphaelu ani umiejętności kreślenia jQuery SVG. Interesuje mnie przede wszystkim najbardziej elegancki sposób tworzenia, animowania i manipulowania poszczególnymi elementami na płótnie SVG.
Odpowiedzi:
Ostatnio użyłem zarówno Raphaela, jak i jQuery SVG - i oto moje przemyślenia:
Plusy: dobra biblioteka początkowa, łatwa do zrobienia DUŻO rzeczy za pomocą SVG. Dobrze napisane i udokumentowane. Wiele przykładów i demonstracji. Bardzo rozszerzalna architektura. Świetne z animacją.
Wady: jest warstwą nad faktycznym znacznikiem SVG, utrudnia wykonywanie bardziej złożonych rzeczy za pomocą SVG - takich jak grupowanie (obsługuje zestawy, ale nie grupy). Nie radzi sobie świetnie z edycją już istniejących elementów.
Plusy: wtyczka jquery, jeśli już używasz jQuery. Dobrze napisane i udokumentowane. Wiele przykładów i wersji demonstracyjnych. Obsługuje większość elementów SVG, umożliwia łatwy natywny dostęp do elementów
Minusy: architektura nie jest tak rozszerzalna jak Raphael. Niektóre rzeczy mogą być lepiej udokumentowane (np. Konfiguracja elementu SVG). Nie radzi sobie świetnie z edycją już istniejących elementów. Do animacji wykorzystuje semantykę SVG - co nie jest takie świetne.
SnapSVG jest następcą Raphaela. Jest obsługiwany tylko w przeglądarkach obsługujących SVG i obsługuje prawie wszystkie funkcje SVG.
Jeśli robisz coś szybko i łatwo, Raphael jest łatwym wyborem. Jeśli masz zamiar zrobić coś bardziej złożonego, wybrałem jQuery SVG, ponieważ mogę znacznie łatwiej manipulować znacznikami niż w przypadku Raphaela. A jeśli potrzebujesz rozwiązania innego niż jQuery, SnapSVG jest dobrym rozwiązaniem.
Dla potomnych chciałbym zauważyć, że ostatecznie wybrałem Raphaela ze względu na czysty interfejs API i „bezpłatną” obsługę IE, a także dlatego, że aktywny rozwój wygląda obiecująco (obsługa zdarzeń została właśnie dodana w wersji 0.7). Pozostawiam jednak pytanie bez odpowiedzi i nadal chciałbym usłyszeć o doświadczeniach innych osób korzystających z bibliotek Javascript + SVG.
Jestem wielkim fanem Rafaela, a tempo rozwoju wydaje się rosnąć (wersja 0.85 została wydana pod koniec ubiegłego tygodnia). Kolejnym dużym plusem jest to, że jego programista, Dmitry Baranovskiy , pracuje obecnie nad wtyczką do tworzenia wykresów Raphaela, g.raphael , która wygląda, jakby kształtowała się dość gładko (jest kilka próbek wyników z wczesnych wersji na Flickr ) .
Jednak, aby wrzucić innego możliwego kandydata do biblioteki SVG, sieć SVG firmy Google wygląda naprawdę bardzo obiecująco (chociaż nie jestem wielkim fanem Flasha, którego używa do renderowania w przeglądarkach niezgodnych z SVG). Prawdopodobnie jeden do obejrzenia, zwłaszcza podczas zbliżającej się konferencji SVG Open .
Raphael jest zdecydowanie łatwiejszy do skonfigurowania i rozpoczęcia, ale pamiętaj, że istnieją sposoby wyrażania rzeczy w SVG, które nie są możliwe w Raphael. Jak wspomniano powyżej, nie ma „grup”. Oznacza to, że nie można zaimplementować warstw Transfomacji współrzędnych. Zamiast tego dostępna jest tylko jedna transformacja współrzędnych.
Jeśli twój projekt zależy od zagnieżdżonych transformacji współrzędnych, Raphael nie jest dla ciebie.
Oh Raphael przeniósł się znacznie od czerwca. Dostępna jest nowa biblioteka wykresów, która może z nią współpracować i są bardzo przyciągające wzrok. Raphael obsługuje także pełną składnię ścieżki SVG i wprowadza naprawdę zaawansowane metody ścieżki. Przyjdź do mojej witryny w wersji 1.2.8+ (wtyczka Shameless), a następnie przejdź do strony Dmitry. http://www.irunmywebsite.com/raphael/raphaelsource.html
Myślę, że to nie jest całkowicie niezwiązane, ale czy zastanawiałeś się nad płótnem? coś takiego jak Process JS może to uprościć.
Powinieneś także spojrzeć na svgweb. Używa Flasha do renderowania svg w IE i opcjonalnie w innych przeglądarkach (w przypadkach, w których obsługuje więcej niż sama przeglądarka).
Głosuję za Raphaelem - obsługa wielu przeglądarek, czysty interfejs API i spójne aktualizacje (jak dotąd) sprawiają, że korzystanie z niego jest przyjemnością. Bardzo dobrze gra także z jQuery. Przetwarzanie jest fajne, ale w tej chwili jest bardziej przydatne jako demo najnowocześniejszych rzeczy.
Jako początkujący Javascript odkryłem, że próbki Rapahel nie są takie proste, polecam http://cancerbero.mbarreneche.com/raphaeltut , który jest prawdziwym samouczkiem krok po kroku.
Dla tych, którzy nie dbają o IE6 / IE7, ten sam facet, który napisał Raphael, zbudował silnik svg specjalnie dla nowoczesnych przeglądarek: Snap.svg .. mają naprawdę fajną stronę z dobrymi dokumentami: http://snapsvg.io
snap.svg nie może być łatwiejszy w użyciu od razu po rozpakowaniu i może manipulować / aktualizować istniejące pliki SVG lub generować nowe. Możesz przeczytać te rzeczy na stronie snap.io o stronie, ale oto krótki przegląd:
Cons
Plusy
Implementuje pełne funkcje SVG, takie jak maskowanie, obcinanie, wzory, pełne gradienty, grupy i inne.
Możliwość pracy z istniejącymi plikami SVG: zawartość nie musi być generowana za pomocą Snap, aby działała z Snapem, umożliwiając tworzenie zawartości za pomocą dowolnych popularnych narzędzi do projektowania.
Pełna obsługa animacji za pomocą prostego, łatwego do wdrożenia JavaScript API
Działa z ciągami plików SVG (na przykład pliki SVG ładowane przez Ajax) bez faktycznego renderowania ich najpierw, podobnie jak kontener zasobów lub arkusz sprite.
sprawdź to, jeśli jesteś zainteresowany: http://snapsvg.io
Ponieważ nie jest tu jeszcze wspomniane: powinieneś także spojrzeć na Dojox.drawing , który zapewnia również dobre możliwości rysowania SVG. Ma całkiem imponujący zestaw funkcji. Właśnie rozpoczynam z nim projekt, ale wydaje mi się, że jest znacznie lepszy (przynajmniej pod względem funkcji) od Raphaela i JQuerySVG.
Ta prezentacja przekonała mnie do użycia go zamiast Raphael / JQuerySVG: http://www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082
Odniesienie: http://dojotoolkit.org/reference-guide/dojox/index.html
Odwołanie do Dojocampus: http://docs.dojocampus.org/dojox/drawing
Pobierz Dojo (w tym Dojox): http://dojotoolkit.org/download/
Inną biblioteką javascript svg, którą warto obejrzeć, jest d3.js. http://d3js.org/
Wolę używać RaphaelJS, ponieważ ma świetne możliwości w różnych przeglądarkach. Jednak niektórych efektów SVG i VML nie można uzyskać przy pomocy RaphaelJS (złożone gradienty ...).
Google opracował również własną bibliotekę, aby umożliwić obsługę SVG w IE: http://svgweb.googlecode.com/files/svgweb-2009-08-20-B.zip
Jeśli nie potrzebujesz obsługi VML i IE8, użyj Canvas (na przykład PaperJS). Zobacz najnowsze wersje demonstracyjne IE10 dla systemu Windows 7. Mają niesamowite animacje w Canvas. SVG nie jest w stanie zrobić nic w ich pobliżu. Ogólnie Canvas jest dostępny we wszystkich przeglądarkach mobilnych. SVG nie działa we wczesnych wersjach Androida 2.0- 2.3 (jak wiem)
Tak, Canvas nie jest skalowalny, ale jest tak szybki, że można przerysować całe płótno szybciej niż przeglądarka zdolna do przewijania portu widoku.
Z mojej perspektywy optymalizacje Microsoftu umożliwiają wykorzystanie Canvas jako zwykłego silnika GDI i wdrażanie aplikacji graficznych tak, jak robimy to teraz w systemie Windows.