2009-09-17 11 views
14

Znalazłem w Internecie bibliotekę wektorową, która działa nawet z IE6!Co jest lepsze i dlaczego? RaphaelJS lub HTML5 Canvas?

http://raphaeljs.com/index.html

To niesamowite.

Teraz moje pytanie jest lepsze niż nadchodzące płótno HTML5 < >? Jedynym powodem, dla którego pytam, jest to, że może minąć wiele lat zanim Microsoft wdroży canvas >, który nie wymaga wtyczki do uruchomienia.

I będzie jeszcze dłużej, dopóki wszyscy użytkownicy IE w Internecie nie pozbędą się swoich starych przeglądarek, abyśmy mogli usprawiedliwić korzystanie z płótna HTML5 < >.

Chodzi mi o przestrzeganie standardów, ale to zajmie zbyt dużo czasu dzięki powolnemu rozwojowi przeglądarki.

Myśli?

+0

Nie jesteście w jakiś sposób zaangażowani w projekt, prawda? To brzmi jak Rah! Rah! post, a nie pytanie. –

+0

@ T.J. Nie, właśnie znalazłem to w Internecie. I byłem naprawdę sfrustrowany czekaniem na IE, aby dogonić wszystkie inne przeglądarki. – leeand00

Odpowiedz

20

Raphael jest biblioteką grafiki wektorowej, wykonaną przy użyciu SVG, podczas gdy płótno HTML5 jest grafiką bitmapową.

Jeśli chcesz robić grafiki wektorowe, myślę, że chodzenie z Raphaelem to prawdopodobnie dobry wybór na "tylko" płótnie. Jak mówisz, płótno nie działa z IE i prawdopodobnie minie trochę czasu, zanim zostanie natywnie obsługiwane. Jeśli Rafael robi to, czego potrzebujesz, nie ma szczególnego powodu, aby go nie używać.

Zauważ, że istnieją również inne biblioteki do tego: Excanvas, który emuluje płótno dla IE używając VML (o ile mi wiadomo), a także kilka innych, które robią to samo z Silverlight i Flash, ale nie pamiętam ich nazw.

Istnieje również Dojo, który ma komponent do abstrakcyjnego wykorzystania płótna za łatwym w użyciu interfejsem, który obsługuje także IE.

Posiadanie natywnego płótna we wszystkich przeglądarkach nie spowoduje, że biblioteki staną się przestarzałe, ponieważ biblioteki zwykle usuwają część złożoności płótna, ułatwiając korzystanie.

+5

Wydajność to wielka różnica. SVG zwalnia dużo, jeśli jest wiele węzłów do narysowania. Jest to nieodłączny wynik działania SVG. Wydajność HTML5 Canvas zależy głównie od całkowitej liczby pikseli, które wymagają przerysowania (szerokość x wysokość). – Jacco

+0

@Jacco - świetny punkt - rzeczy naprawdę zaczynają się jąkać z SVG, jeśli próbujesz animować wiele rzeczy (np. Pole gwiazdy) - Canvas może sobie z tym poradzić znacznie lepiej. –

5

SVGWeb (http://code.google.com/p/svgweb/) od Google jest tym, czego potrzebujesz. To sprawia, że ​​IE jest kompatybilny z SVG, który jest standardem i który wszystkie inne popularne przeglądarki już obsługują. Innymi słowy, jak mówi Google, "Korzystając z biblioteki oraz natywnego wsparcia SVG, możesz natychmiast zająć ~ 95% istniejącej zainstalowanej bazy internetowej."

5

Można również użyć narzędzia http://code.google.com/p/explorercanvas/, które implementuje standard HTML5 Canvas w IE. Wszystko co musisz zrobić to dodać:

<head> 
<!--[if IE]><script src="excanvas.js"></script><![endif]--> 
</head> 

Różnica między płótnie i SVG jest wyjaśnione następująco:

SVG i płótno nie są naprawdę wymienne technologie. SVG jest typem grafiki zatrzymanej w trybie , gdzie wszystko jest rysowane z modelu abstrakcyjnego (dokument SVG). Kanwa z kolei jest rodzajem grafiki trybu natychmiastowego, w której nie jest modelem, a klient (JavaScript) musi zająć się odświeżaniem, animacjami itp. .

4

Odpowiedź zależy od tego, czego potrzebujesz:

  • jeśli trzeba dodać obsługi zdarzeń do obiektów graficznych: trzeba użyć SVG. Else Canvas.

  • jeśli są potrzebne żadne zdarzenia jest wydajność ważne: jeśli tak to Płótno 5.

Zauważ, że IE 9 obsługuje płótnie i oferuje więcej HTML 5 wsparcia w porównaniu do innych przeglądarek!

+1

Zdarzenia mogą być równie łatwo obsługiwane w obszarze HTML5 Canvas. – Jacco

+0

Samo płótno zareaguje na zdarzenia kliknięcia; musisz jednak ręcznie śledzić lokalizacje obiektów. Biblioteki takie jak [KineticJS] (http://www.kineticjs.com/) pomagają w tym i sprawiają, że Canvas jest tak łatwy w użyciu jak Raphael. – btown

0

szukał "raphael vs canvas" post tutaj ma 5 lat. Czy od tego czasu coś się zmieniło? Czy raphael jest przestarzały?