Wprowadzenie
SVG, czyli Scalable Vector Graphics, to oparty na XML-u język do opisywania obiektów i scen. Elementy SVG mogą wywoływać zdarzenia i być skryptowane za pomocą kodu JavaScript. Format SVG zawiera kilka wbudowanych typów prymitywnych, takich jak koła i prostokąty, a także umożliwia wyświetlanie tekstu. Chociaż technologia SVG nie jest nowa, HTML5 umożliwia teraz umieszczanie obiektów SVG bezpośrednio na stronie bez użycia tagu <object> lub <embed>, co jest zgodne z obecnymi możliwościami w przypadku kanwy. Raphaël.js to biblioteka JavaScriptu, która umożliwia tworzenie scen SVG w sposób programowy.
Używa ono jednolitego interfejsu API do tworzenia scen SVG, gdzie jest ono obsługiwane, lub VML(język modelowania wektorów), gdzie jest ono obecnie używane, czyli w wersjach Internet Explorera wcześniejszych niż IE9.
Rysowanie pierwszej sceny
Zacznijmy od narysowania prostej sceny w programie Raphaël. Rysowanie sceny rozpoczynamy przez utworzenie obiektu Raphaël. W tym przypadku użyłem konstruktora, który wstawia obiekt do podanego elementu HTML o określonej szerokości i wysokości, ale możesz też dodać obiekt do modelu DOM (Document Object Model). Następnie utworzyłem prostokąt, podając pożądane pozycje x i y oraz szerokość i wysokość. Następnie utworzyłem okrąg, podając odpowiednie współrzędne i promień. Na koniec użyłem funkcji atrybutu (attr), aby przypisać kolory obiektom.
Każdy obiekt SVG może mieć przypisane atrybuty, takie jak kolor, obrót, kolor i wielkość obrysu itp. Szczegółową listę atrybutów do przypisania znajdziesz tutaj.
var paper = Raphael("sample-1", 200, 75);
var rect = paper.rect(10, 10, 50, 50);
var circle = paper.circle(110, 35, 25);
rect.attr({fill: "green"});
circle.attr({fill: "blue"});
Rysowanie zaawansowanych kształtów za pomocą ścieżek
Ścieżka to seria instrukcji używanych przez renderer do tworzenia obiektów. Rysowanie za pomocą ścieżki przypomina rysowanie piórem na dużym arkuszu papieru milimetrowego. Możesz nakazać, aby pióro zostało odłączone od papieru i przesunięte w inne miejsce(polecenie move to), aby narysować linię(polecenie line to) lub aby narysować łuk(polecenie arc to). Ścieżki umożliwiają tworzenie obiektów SVG o takim samym poziomie szczegółowości niezależnie od skali. Gdy wydajesz instrukcję, aby narysować krzywą, SVG bierze pod uwagę pierwotny i docelowy rozmiar krzywej (po skalowaniu) oraz oblicza matematycznie punkty pośrednie, aby wygenerować gładką krzywą.
Kod i rysunek poniżej pokazują prostokąt i zamkniętą krzywą narysowaną za pomocą ścieżek. Litera M z współrzędnymi przenosi pióro w to miejsce, litera L z parą współrzędnych rysuje linię od bieżącej pozycji do tej pozycji, litera S rysuje gładką krzywą Béziera z danym punktem sterującym i końcowym w współrzędnych względnych. Z zamyka ścieżkę. Zazwyczaj użycie wielkiej litery powoduje wykonanie polecenia z użyciem współrzędnych bezwzględnych, a małej – z użyciem współrzędnych względnych. M/m i Z/z, odpowiednio, wydają to samo polecenie w wielkich lub małych literach. Listę wszystkich instrukcji ścieżki znajdziesz tutaj.
var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");
rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});
Rysowanie tekstu
Ilustracje bez możliwości rysowania tekstu byłyby naprawdę nudne. Na szczęście Raphaël oferuje 2 metody rysowania tekstu. Pierwsza metoda, text, przyjmuje współrzędne x i y oraz ciąg znaków do narysowania. Metoda tekstowa nie daje Ci zbyt dużego wpływu na czcionkę ani inne efekty. Rysuje domyślną czcionkę w domyślnym rozmiarze.
Druga metoda, drukowanie, rysuje tekst jako zbiór ścieżek. Dzięki temu możemy modyfikować poszczególne litery. W przykładzie poniżej cyfra 5 jest pomarańczowa, „ROCKS” jest niebieska, a grubsza kreska imituje pogrubienie tekstu. Użyliśmy do tego niestandardowej czcionki o rozmiarze 40 punktów.
var paper = Raphael("sample-4", 600, 100);
var t = paper.text(50, 10, "HTML5ROCKS");
var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Vegur"), 40);
letters[4].attr({fill:"orange"});
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
}
Czcionka Vegur nie jest dostępna w Raphaël, tak jak żadna inna czcionka. Poza tym większość czcionek używa formatu TrueType(TTF) lub OpenType(OTF). Aby przekształcić te formaty w coś, czego może używać Raphaël, musimy przekonwertować je za pomocą narzędzia Cufon. Cufon umożliwia eksportowanie różnych stylów czcionek danej czcionki (zwykły, pogrubiony, kursywa, pogrubiona kursywa itp.) do użycia w Raphaël. W tym samouczku nie omawiamy szczegółowo Cufona. Więcej informacji znajdziesz w powyższym linku. Katalog czcionek Google to świetne źródło czcionek do zastosowań w Twoich aplikacjach.
Wydarzenia
Elementy SVG mogą bezpośrednio subskrybować wszystkie tradycyjne zdarzenia związane z myszką: click, dblclick, mousedown, mousemove, mouseout, mouseover, mouseup i hover. Raphaël umożliwia dodawanie własnych metod do kanwy lub poszczególnych elementów, więc teoretycznie nic nie stoi na przeszkodzie, aby dodawać gesty do przeglądarek mobilnych.
Podany poniżej fragment kodu łączy funkcję, która po kliknięciu danej litery obraca ją o 45° w kierunku zgodnym z zegarkiem.
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
letters[i].click(function(evt) {
this.rotate(45);
});
}
SVG a Canvas
Obie te metody służą do rysowania obiektów na ekranie, więc często nie jest od razu jasne, dlaczego należy używać jednej z nich zamiast drugiej. Te 2 medium mają bardzo różne podejścia. Canvas to interfejs API w trybie natychmiastowym, który działa podobnie do rysowania kredkami. Możesz wyczyścić lub usunąć część rysunku, ale domyślnie nie możesz cofnąć ani zmienić poprzedniego skrótu. Obraz typu canvas jest też bitmapą rastrową, więc podczas skalowania obrazów może się on gubić. Z drugiej strony, jak już wspomnieliśmy, pliki SVG mogą wyświetlać wiele rozdzielczości z tym samym poziomem szczegółowości i można je sformatować.
Decyzja, czy do programowania gry używać SVG czy Canvas, jest dość prosta. Poza typowymi ograniczeniami związanymi z tym, czy planujesz wdrożenie na komputery czy urządzenia mobilne, wszystko sprowadza się do liczby sprite’ów. Format SVG nadaje się do tworzenia gier o niskiej jakości. Chodzi o gry, w których występuje ograniczone jednoczesne przemieszczanie się obiektów oraz usuwanie i tworzenie sprite’ów. Do tej kategorii należą liczne gry planszowe, takie jak szachy, warcaby czy bitwa morska, a także gry karciane, np. blackjack, poker i tref. Kolejnym wspólnym elementem jest to, że w wielu z tych gier gracz musi przesunąć dowolny obiekt, a możliwość skryptowania wektorowych gier umożliwia łatwe wybieranie obiektów.
Narzędzia do tworzenia plików SVG
Korzystanie z formatu SVG wcale nie oznacza, że musisz tworzyć ścieżki ręcznie. Do eksportowania do formatu SVG służy kilka narzędzi, zarówno open source, jak i komercyjnych. Dwa narzędzia, których używam i bardzo polecam, to Inkscape i svg-edit.
svg-edit
svg-edit to edytor SVG w przeglądarce napisany w JavaScript. Ma ono ograniczony interfejs użytkownika przypominający GIMP lub MS Paint. O ile poziom szczegółowości nie był stosunkowo niski, do dopracowywania rysunków SVG używałam głównie narzędzia svg-edit, a nie do ich tworzenia. Narzędzie svg-edit umożliwia tworzenie obiektów graficznie lub za pomocą kodu SVG.
Inkscape
Inkscape to wieloplatformowy, pełen edytor grafiki wektorowej podobny do CorelDraw, Adobe Illustrator i Xara. Inkscape korzysta z aktywnej społeczności twórców wtyczek i dojrzałego kodu źródłowego. Poprzednik Inkscape, z którego powstał Inkscape, został opracowany w 1999 roku. Inkscape to moja ulubiona aplikacja do pracy z zasobami wektorowymi i bitmapowymi.
Krótkie omówienie
Format SVG nie jest obsługiwany w systemie Windows w przeglądarkach Internet Explorer w wersjach starszych niż IE9. IE używa formatu grafiki wektorowej o nazwie VML (Vector Markup Language), który zapewnia wiele tych samych funkcji co SVG. Raphaël może tworzyć sceny, które używają formatu SVG lub VML, jeśli jest on obsługiwany. Korzystanie z biblioteki Raphaël to łatwy sposób na zapewnienie obsługi na różnych platformach.
Pliki referencyjne
- Rapahël.js: http://raphaeljs.com
- Dokumentacja Raphaël: http://raphaeljs.com/reference.html