Wprowadzenie do Raphaël.js

James Williams
James Williams
X Strona główna

Wstęp

SVG, czyli Scalable Vector Graphics, to oparty na języku XML język służący do opisywania obiektów i scen. Elementy SVG mogą wywoływać zdarzenia i można do nich tworzyć skrypty w języku JavaScript. SVG ma kilka wbudowanych typów podstawowych, takich jak okręgi i prostokąty, oraz umożliwia wyświetlanie tekstu. Chociaż technologia SVG nie jest nową technologią, HTML5 umożliwia teraz umieszczanie obiektów SVG na stronie bezpośrednio bez użycia tagu <object> lub <embed>. Łączy je to z elementami aktualnie dostępnymi w obiekcie canvas. Raphaël.js to biblioteka JavaScript, która umożliwia programowe tworzenie scen SVG. Wykorzystuje ujednolicony interfejs API do tworzenia scen SVG tam, gdzie jest obsługiwany, lub języka VML(języka modelu wektorowego) w obecnej postaci, czyli wersji Internet Explorera starszych niż IE9.

Rysowanie pierwszej sceny

Zacznijmy od narysowania prostej sceny z Raphaëlem. Rysujemy scenę, tworząc instancję obiektu Raphaëla. W tym przypadku użyłem konstruktora, który wstawia go do danego elementu HTML o określonej szerokości i wysokości, ale Raphaël może też poprosić o dołączenie obiektu do DOM. Następnie utworzyliśmy prostokąt, podając odpowiednie pozycje x i y oraz szerokość i wysokość. Następnie utworzyłem okrąg, podając współrzędne i promień. Na koniec użyłam funkcji atrybutu (attr), aby przypisać kolory do obiektów.

Do każdego obiektu SVG możesz przypisać atrybuty takie jak kolor, obrót, kolor kreski, rozmiar itp. Szczegółową listę atrybutów, które można przypisać, 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 mechanizm renderowania do tworzenia obiektów. Rysowanie wzdłuż ścieżki przypomina rysowanie rysikiem na gigantycznym papierze milimetrowym. Możesz poinstruować, aby podnosić pióro z papieru i przesunąć go w inne miejsce(przesuń do), aby narysować linię(linię do) lub narysować krzywą(łuk). Ścieżki umożliwiają tworzenie obiektów w formacie SVG o tym samym poziomie szczegółowości niezależnie od skali. Gdy wydajesz instrukcję narysowania krzywej, SVG bierze pod uwagę pierwotny i ostateczny żądany rozmiar krzywej (po wyskalowaniu), a potem matematycznie oblicza punkty pośrednie w celu wyrenderowania gładkiej krzywej.

Kod i rysunek poniżej przedstawiają prostokąt i zamkniętą krzywą narysowaną ze ścieżkami. Litera M i współrzędne przesuwają pióro do tej pozycji, a następnie L, po której następuje para współrzędnych, rysuje linię od bieżącej pozycji do tej pozycji. Rysuje gładką krzywą Beziera z danym punktem kontrolnym i punktem końcowym ze współrzędnymi względnymi. Z zamyka ścieżkę. Ogólnie, gdy polecenie pisane jest wielką literą, wraz ze współrzędnymi bezwzględnymi, małe litery używają współrzędnych względnych. M/m i Z/z uruchamiają to samo polecenie dla małych i wielkich liter. Listę wszystkich instrukcji dotyczących ścieżek 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"});

Rysunek tekstu

Ilustracje bez możliwości rysowania tekstu byłyby naprawdę nudne. Na szczęście Raphaël wykorzystuje dwie metody rysowania. Pierwsza metoda, czyli tekst, przyjmuje współrzędne x i y wraz z ciągiem znaków do narysowania. Metoda tekstowa nie daje Ci dużej kontroli nad czcionkami ani innymi efektami. Używamy do niej czcionki w rozmiarze domyślnym.

Druga metoda, czyli drukowanie, rysuje tekst jako zbiór ścieżek. Dzięki temu możemy modyfikować pojedyncze litery. W przykładzie poniżej pokolorowaliśmy cyfrę 5 pomarańczowym wypełnieniem, kolorem „ROCKS” z niebieskawym wypełnieniem. Rysunek pogrubiliśmy, aby symulować pogrubienie. Użyliśmy do tego czcionki niestandardowej 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"});
}

Nie ma czcionki Vegur (Raphaël) i nie ma tu żadnej czcionki. Poza tym większość czcionek korzysta z formatu TrueType(TTF) lub OpenType(OTF). Aby zamienić te formaty na coś, co Raphaël może wykorzystać, musimy je przekonwertować za pomocą narzędzia o nazwie Cufon. Cufon pozwala eksportować różne style czcionki danej czcionki (standardową, pogrubioną, kursywę, pogrubioną kursywę itp.), aby korzystać z nich w Raphaël. Szczegółowy opis tej usługi wykracza poza zakres tego samouczka. Więcej informacji znajdziesz, klikając podany wyżej link. Doskonałym źródłem wygodnych czcionek do aplikacji jest Google Font Directory.

Wydarzenia

Elementy SVG mogą bezpośrednio subskrybować wszystkie tradycyjne zdarzenia wywoływane za pomocą myszy: kliknięcie, dblclick, clickdown, przesunięcie kursora, przesunięcie kursora poza pozycję, najechanie kursorem myszy, najechanie kursorem myszy i najechanie kursorem. Raphaël umożliwia dodawanie własnych metod do obszaru roboczego lub poszczególnych elementów, więc teoretycznie nic nie stoi więc na przeszkodzie, aby dodać gesty do przeglądarek mobilnych.

Poniższy fragment kodu wiąże funkcję, która umożliwia obrócenie danej litery w „ROCKS” po jej kliknięciu o 45 stopni.

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);
});
}

Różnice między SVG a Canvas

Ponieważ obie te metody służą do rysowania obiektów na ekranie, często nie jest jasne, dlaczego należy używać jednej z nich. Te dwa środki masowego przekazu stosują się zupełnie odmienne. Canvas to interfejs API w trybie natychmiastowym, co przypomina rysowanie kredkami. Możesz usunąć lub zniszczyć część rysunku, ale domyślnie nie możesz cofnąć ani zmienić poprzedniego kreski. Canvas to również bitmapa rastrowa, dlatego w przypadku skalowania obrazów w znacznym stopniu ulega pikselizacji. SVG z kolei, jak już wspomnieliśmy, może obsługiwać wiele rozdzielczości o tym samym poziomie szczegółowości i umożliwiać obsługę skryptów.

Korzystanie z SVG czy Canvas do programowania gier jest stosunkowo proste. Oprócz standardowych ograniczeń dotyczących wdrożenia na komputerze lub urządzeniu mobilnym zależy też od liczby sprite’ów. SVG pasuje do gier o niskiej jakości. Określam je jako gry z ograniczonym, jednoczesnym ruchem obiektów oraz usuwaniem i tworzeniem sprite’ów. Do tej kategorii należą m.in. szachy, warcaby czy bitwy, a także gry karciane takie jak BlackJack, Poker czy Hearts. Kolejnym wspólnym wątkiem jest to, że w wielu z tych gier gracz musi przesuwać dowolny obiekt, a obsługa skryptów SVG ułatwia wybieranie obiektów.

Narzędzia do tworzenia SVG

Korzystanie z SVG nie oznacza, że musisz ręcznie tworzyć ścieżki. Jest wiele narzędzi – zarówno open source, jak i komercyjnych – które umożliwiają eksportowanie do SVG. Dwa narzędzia, których używam intensywnie i gorąco polecam, to Inkscape i svg-edit.

svg-edit

svg-edit to działający w przeglądarce edytor SVG napisany w języku JavaScript. Ma ograniczony interfejs przypominający GIMP lub MS Paint. O ile poziom szczegółowości nie był na stosunkowo niskim poziomie, do modyfikowania rysunków w SVG służy mi głównie funkcja svg-edit, a nie ich tworzenie. Ten format pozwala tworzyć obiekty w sposób graficzny lub za pomocą kodu SVG.

Druk atramentowy

Inkscape to wieloplatformowy, w pełni funkcjonalny edytor grafiki wektorowej podobny do CorelDraw, Adobe Illustrator i Xara. Inkscape korzysta z dynamicznej społeczności wtyczek i dojrzałej bazy kodu. Poprzednik Inkscape, z którego rozwidlano Inkscape, powstał w 1999 roku. Inkscape to moja podstawowa aplikacja do obsługi zasobów wektorowych i bitmap.

A mały na bok

Format SVG nie jest obsługiwany w systemie Windows w przeglądarce Internet Explorer w wersjach starszych niż IE9. IE korzysta z formatu grafiki wektorowej VML (Vector Markup Language), który oferuje wiele funkcji podobnych do SVG. Raphaël może tworzyć sceny z użyciem SVG lub VML tam, gdzie jest on obsługiwany. Raphaël to prosty sposób na obsługę wielu platform.

Źródła