teisipäev, 22. september 2009

Raphaël teek JavaScript graafika loomiseks

Viimasel ajal olen suhteliselt palju mänginud JavaScripti teegiga nimega Raphaël. Kui siiani on olnud JavaScriptiga probleeme dünaamilise graafika loomiseks - dünaamilist graafikat ei saa teha üht ega teistpidi, kuna iga brauser (st. IE vs. kõik teised) toetab erinevaid meetodeid. Põhiprobleemiks on IE, mis pole suurt midagi kuulnud SVG graafikast, küll aga tunneb VML põhist graafikat.

Siinkohas tulebki appi Raphaël, mis kujutab endast abstraktsioonikihti brauseri graafikavõimelisuse peal. Vahet pole, missugust meetodit brauser parasjagu oskab - Raphaël tõlgib selle ilusti ära. Ja seda praktiliselt kõigi levinud brauserite jaoks, sh. ka IE 6.0.

Miks sellist asja üldse vaja on? Kõik vajaliku saab ju teha kas serveri pool dünaamiliselt pildifaile genereerides või siis brauseris Flash objektidega.

JavaScript põhisel dünaamilisel graafikal on muude tehnikate ees mitmeid eeliseid.

Esiteks hoiab kokku võrguliikluse pealt, kuna liiguvad ainult (vabatekstilised) andmed ja JavaScripti kood. Kusjuures seda liiklust saab muu hulgas ka päris korralikult serveri poolt kokku pakkida, saades sellega täiendava mahuvõidu.

Teiseks saab sellisel viisil lükata serveri poolt koormust ära kliendi poolele - suhteliselt kalli dünaamilise graafika genereerimisega ei pea serveri CPU end enam vaevama. Lükkab andmed andmebaasist kliendile ja see teeb neist ise endale sobiva pildi.

Kolmandaks - iga graafikaelement ehk iga kasutatud vektor on omakorda DOM element. See aga tähendab, et näiteks igale joonele saab omistada erinevaid sündmuseid (click, mouseover, mouseout jne), saab kontrollida ja muuta elemendi asukohta, peita/näidata ja teha muid manipulatsioone JavaScripti abil otse kliendi vaates brauseri aknas.

Flash põhine graafika on sellele küll üsna lähedane võimaldades teoreetiliselt sama, kuid arvestada tuleb, et Flash on igal juhul väga piiratud. Kui .swf faili pole mingi funktsionaalsus sisse kirjutatud, siis hiljem seda väga lihtne muuta ei ole. Samuti ei ulata Flash reeglina üle tervet lehekülje, vaid on ainult oma väikeses piiratud kastis.

Kui nüüd jõuaks ära oodata kuni saaks valmis WebGL ja see ka IE's tööle hakkaks, siis võiks näha JavaScripti põhises graafikas väga huvitavaid arenguid :)

Igatahes lõpetuseks väike näide - allolev ring on joonistatudki Raphaël teeki kasutades. Hiirega peale minnes vahetab ring värvi.
HTML:
<div id="holder"></div>
JavaScript:
var paper = Raphael("holder", 180, 180);
var circle = paper.circle(90, 90, 85);
circle.attr("fill", "#f00");
circle.attr("stroke", "#0f0");

circle.node.onmouseover = function(){
    circle.attr("fill", "#00f");
}

circle.node.onmouseout = function(){
    circle.attr("fill", "#f00");
}

2 kommentaari:

Anonüümne ütles ...

Opera 10 küll asjast aru ei saa ...

Andris ütles ...

Ma ei saa hetkel kahjuks järgi proovida, et milles probleem täpselt seisneb, aga kui nii tõesti on, siis ma väga ka ei imesta.

Kuigi Opera on olnud läbi aegade sõltumatu ning teedrajav brauser (CSS, seesama SVG, mouse gestures to name a few), siis paraku esineb Operaga tihtipeale ootamatuid probleeme ("liigne" standardite jälgimine ehk?).

Kuna aga Opera on suhteliselt marginaalne brauser (ei kuulu suurde kolmikusse IE+Gecko+WebKit), siis tihtipeale ei viitsi keegi Opera teravate nurkade lihmisega tegelema hakata.