INFINIUS

RaphaelJS

My Upcoming Presentation
[Creative Commons Licensephoto credit: Dmitry Baranovskiy]

Javascript framework-a ima u zadnje vrijeme čak i previše, stoga je teško naći neki koji se ističe iznad ostalih – koliko po kvaliteti i lakoći upotrebe tako i po funkcionalnosti koju nudi za razliku od ostalih. Raphaël JS je definitivno jedan od takvih – omogućava jednostavno crtanje i upravljanje vektorskom grafikom unutar web stranica!

Dok nam je HTML5 donio mnogo lakše baratanje grafikom i animacijama preko svog <canvas> elementa, vektorska grafika je nekako uvijek stajala po strani iako je dostupna već duže vrijeme u preglednicima. Djelomično zato jer nije SVG kao otvoreni standard nije bio podržan od strane većinski upotrebljavanog Internet Explorera (tek s IE9 je došla i podrška za SVG, do IE8 je za vektorsku grafiku upotrebljavan VML), a djelomično zato jer je bilo normalno da se za vektorski prikaz upotrebljava Flash.

Zašto uopće vektori kad imamo <canvas>?

I jedna i druga tehnika nam pružaju mogućnosti crtanja i animacije, ali svaka na svoj način. Dok putem vektora upravljamo direktno objektima, putem HTML5 <canvas> elementa precrtavamo cijeli element prilikom svakog pokreta animacije (iako vrlo brzo). Veća razlika je prilikom interakcije s elementima putem npr. klika – unutar vektora je moguće pratiti točno određeni element dok ste kod <canvas> crteža manje-više osuđeni pretpostavljati da je korisnik kliknuo na nacrtani element koji se nalazi na tom pikselu.

Gotove vektorske crteže je jednostavno napraviti u grafičkoj aplikaciji (npr. Inkscape) te manipulirati njima kasnije putem javascripta dok canvas elemente morate prvo nacrtati putem javascripta (ukoliko se ne radi o postojećim slikama). Zadnja veća razlika je u samom predstavljanju – budući da vektorske elemente možete prikazivati putem njihovog formata (kao čisti XML), u bilo kojem pregledniku bi se trebao prikazati barem tekst upisan unutar elemenata, čak i ako preglednik ne podržava SVG, dok je prikaz na ekranu kod <canvas> elementa ovisan isključivo o javascriptu koji će elemente iscrtati (naravno, ukoliko postoji podrška za <canvas>).

Podrška preglednika

Iako crteži i animacije napravljene RaphaelJS-om izgledaju poprilično napredno, ne morate se bojati – gotovo svi preglednici koji podržavaju SVG će bez problema prikazati sadržaj stvoren RaphaelJS-om (Firefox 3.0+, Chrome 5.0+, Opera 9.5+, Safari 3.0+), uključujući i IE6 do IE8 koji su podržani putem VML-a (djelomično, budući da nisu podržane sve funkcije SVG-a).

Kako početi?

RaphaelJS demo poglavlje bi trebalo pokazati već dosta što je sve moguće uz pomoć ovog frameworka, no još dosta dodatnih primjera (s objašnjenjima) je dostupno i na I Run My Website.

Na logiku crtanja uz pomoć RaphaelJS-a je potrebno prvo se naviknuti (razmišljajte u obliku css postavki position: fixed;); iako se i dalje radi o html elementima, putem RaphaelJS-ovih javascript funkcija se deklariraju crteži i animacije kao odvojeni elementi unutar osnovnog crteža koji su pozicionirani strogo po vrijednostima piksela (transformacije se mogu postavljati i putem omjera). Naravno, za početak je potrebno pozvati raphael framework kod u stranicu na koju pokušavamo dodati crtež, a nakon toga se jednostavno počinje crtati:

// deklaracija osnovne radne povrsine 
// 100px od gornjeg lijevog kuta roditeljskog elementa
// 950px sirine, 650px visine
var povrsina = Raphael(100,100,950,650);

// veliki crveni pravokutnik 
// 50px od gornjeg lijevog kuta radne povrsine
// 650px sirine, 400px visine
// crvena ispuna, bez obruba
var kvadrat = povrsina.rect(50,50,650,400).attr({fill: "#ff0000", stroke: "none"});

Zaželite li isprobati sami ovo, igraonica je pravo mjesto za testiranje.

Dokumentacija

Osnovna referenca funkcija na RaphaelJS-ovim stranicama je ustvari dosta za početak jer nekih posebnih iznenađenja van okvira ovih objašnjenja i primjera i nema. Što se tiče kompletnijih pojašnjenja nekih parametara (naročito atributa elemenata i deklaracije putanja), dovoljno je pogledati SVG specifikaciju da bi se u potpunosti ovladalo crtanjem i animacijom vektorima.

Alternative i primjena?

Nekih posebnih alternativa ukoliko ste se odlučili za direktno kreiranje i manipuliranje vektorskih crteža unutar web stranica gotovo da i nema (ako zanemarimo Flash naravno); najbliži po razvijenosti projekta SVGWeb (funkcionalnost preko Flash-a) i jQuery SVG (ne radi na IE-u) imaju svoje nedostatke u općenitoj primjeni.

Što se tiče primjene na web stranicama, iako je daleko od toga da bi SVG upotrebljavali kao osnovu za sve stranice, pojedinačni crteži i animacije mogu dosta utjecati na ugođaj stranica, a njihovo definiranje je puno lakše putem RaphaelJS-a nego drugim putem te će dobro doći kao dodatni alat svakog webdizajnera.




Tagovi: ,