Scriptek

Az animációk segítségével nagyon sok minden megvalósítható egy SVG ábrán, azonban minden esemény, történés a tervezéskor eldől. Scriptek elhelyezésével azonban interaktívvá tehető egy-egy ábra, lehetőséget adva a felhasználónak, hogy befolyásolja az eseményeket, amik a képen lejátszódnak.
Ebben a fejezetben arról lesz szó, hogy hogyan lehet elhelyezni különböző scripteket a dokumentumban, és ezek segítségével hogyan változtatható meg egy alakzat egy vagy több tulajdonsága. Amiről szó lesz az ECMAScript SVG-hez kapcsolódó része. Nem fogok kitérni a programozásra, és a nyelv szabályaira. Aki ezzel szeretne foglalkozni a szakirodalomban, és az Interneten is bőségesen talál hozzá forrást.


Események, eseménykezelők

A legfontosabb része a scriptekkel való ismerkedésnek, az események megismerése. A felhasználó által végzett összes tevékenység előidéz eseményeket. Arról, hogy feldolgozzuk-e őket, már szabadon döntünk. Az alábbi táblázat tartalmazza, hogy milyen eseményekkel tudunk foglalkozni.

click egérkattintás
mousedown egérgomb lenyomása
mouseup egérgomb felengedése
mouseover az egérmutató egy alakzat fölött van
mouseout az egérmutató elhagyja egy alakzat területét
mousemove egérmozgás
load dokumentum betöltése
keydown billentyű lenyomása
keyup billentyű felengedése

Hogy reagálni tudjunk egy-egy ilyen eseményre, nincs más dolgunk, mint felvenni egy attribútumot valamelyik alakzatunkban, melynek a neve az esemény neve egy on előtaggal ellátva. Ezeket eseménykezelőnek hívjuk. Például az egérgomb lenyomására az onclick eseménykezelővel lehet reagálni. Az eseménykezelők értéke valamilyen ECMAScript szabványnak megfelelően leírt feladat lesz, ahogyan azt hamarosan látni fogjuk.

Megjegyzendő, hogy az egérgomb lenyomása ill. a kattintás nem azonos események. A kattintás az egérgomb lenyomása, majd felengedése, a két esemény együtt adja a kattintást. Ezt figyelembe kell venni a scriptek írásakor.


Scriptek elhelyezése a dokumentumban

A scriptek elhelyezésekor gondoskodni kell róla, hogy a böngésző megfelelően kezeljen egy olyan tartalmat, ami nem XML formátumú. Emiatt a scriptek beágyazásánál ugyanúgy kell eljárni, mint amikor belső stíluslapot készítünk. A script elhelyezéséhez <script> elemet kell használni:

<script type= "text/ecmascript">
<![CDATA[
//Itt helyezhetoek el a kodok.
//]]>
</script>

A CDATA részt lezáró sor a scripten belül megjegyzésként szerepel, így a script értelmezésekor nem okoz problémát.

A <script> elemen belül tetszőleges mennyiségű kódot írhatunk az ECMAScript szabványnak megfelelően. Általában egy-egy esemény lekezelése egy itt elhelyezett függvény hívásával történik. Egy dokumentumon belül több <script> elem is elhelyezhető, de általában célszerű egy helyen összegyűjteni minden scriptet.


Az eseményt érzékelő objektum módosítása

Egy eseményre általában egy függvény meghívásával szokás reagálni. Ezt a function fvnév( ){ } szerkezettel kell leírni. A kerek zárójelben a függvény paramétereit kell megadni, a kapcsosban pedig a függvény törzse helyezkedik el az utasításokkal.

Amikor egy bekövetkezett eseményt le akarunk kezelni, akkor a kezelőfüggvények egy szokásos paramétere az evt fenntartott szó. Ez tulajdonképpen egy objektumot jelöl, ami az esemény összes tulajdonságát tartalmazza. Leggyakrabban három metódusát szokás használni:

getTarget() Az érzékelő objektum tulajdonságai.
getClientX() Az egérmutató x koordinátája.
getClientY() Az egérmutató y koordinátája.

A getTarget() segítségével eltárolható az objektum minden tulajdonsága. Egy objektumtulajdonság módosításához a setAttribute(mit,mire) függvényre van szükségünk. Az első paramétere azt az attribútumot tartalmazza, amit módosítani szeretnénk, a második pedig azt, hogy mi legyen az új érték.
Ha az attribútum kezdeti értékét is le szeretnénk kérdezni, akkor azt a mennyi=getAttribute(mi) függvény segítségével tehetjük meg, aminek egyetlen paramétere a kérdéses attribútum neve, a visszatérési értéke pedig az attribútum értéke. Ehhez létre kell hozni egy változót, amiben eltárolhatjuk az értéket. Ezt a var kulcsszóval tehetjük meg.

Lássunk egy példát egy függvényre, ami egy kör sugarát felére csökkenti:

function elso(evt)
{
 var elem=evt.getTarget();
 var r=elem.getAttribute("r");
 elem.setAttribute("r",r*2);
}

Ebben a néhány sorban a következők történtek:

  1. Az elem nevű változóba belekerült a kör összes tulajdonsága.
  2. Az r változóba lekérdeztük a kör sugarának méretét.
  3. Beállítottuk az új sugarat.

A függvény megírása után már csak arról kell gondoskodni, hogy az esemény bekövetkezésekor meghívjuk.

15/1. feladat:

Készíts egy 200×200-as koordinátarendszert. Készíts el benne egy 10 egység sugarú kört a (100,100) pontba. Készíts két scriptet. Az egyik növelje meg a kör sugarát kétszeresére, ha rákattintunk. A másik állítsa vissza a 10 egység hosszú sugarat, ha lehúzzuk az egeret a körről.

A feladat megoldásában az attribútum és a változó neve is "r". Ennek nem kötelező így lennie, a változót tetszőlegesen elnevezhetjük.


Másik objektum módosítása

Amellett, hogy egy alakzat saját tulajdonságai módosíthatóak, lehetőség van arra is, hogy tetszőleges esemény hatására tetszőleges objektumot módosítsunk. Ehhez az svgDocument objektum getElementById(név) metódusát kell használni. Ennek egyetlen paramétere az objektum neve, amit az elemben elhelyezett id attribútummal tudunk megadni. Ezután a visszakapott objektummal az eddigi műveletek mindegyike elvégezhető.

15/2. feladat:

Módosítsd az előző feladatot úgy, hogy készíts el benne egy zöld és egy kék kis kört a rajzlap bal felső sarkában. Ezek a körök vegyék át az irányítást. A kékre kattintva a kör sugara változzon kétszeresére, a zöld hatására pedig álljon vissza az eredeti állapotba.


Szöveg módosítása

Az eddigi megoldások minden esetben attribútumokat módosítottak. A szövegek ezzel a módszerrel nem változtathatók meg, mert nem attribútumként, hanem elemtartalomként szerepelnek. Emiatt egy új módszerre van szükség a módosításukhoz. Először be kell azonosítani az elemet, ami a szöveget tartalmazza. Ez az eddigi módszerekkel lehetséges. Az új szöveget svgDocument objektum createTextNode("Új szöveg") metódusával kell elkészíteni, majd a már meglévő szöveggel le kell cserélni. Ezt a szöveget tartalmazó elem gyermekének lecserélésével tehetünk meg. Erre a replaceChild() metódus szolgál.

Lássunk erre is egy példát:

function modosit()
{
 var obj=svgDocument.getElementById("szov");
 var ujszoveg=svgDocument.createTextNode("szov");
 obj.replaceChild(ujszoveg,obj.getFirstChild());
}

15/3. feladat:

Készíts egy 200×200-as rajzlapot, amin helyezz el két négyzetet. Az egyik legyen kék, a másik pedig zöld. Készíts egy feliratot is, ami mindig annak a négyzetnek a színét írja ki, amelyik fölött éppen az egérmutató van. Ha nincs egyik felett sem, akkor valamilyen egyéb szöveget írj ki.


Scriptek és animációk együttműködése

Önmagukban a scriptek is és az animációk is képesek változatos hatásokat létrehozni. Mégis néha jobb eredményre vezet, ha a két lehetőséget kombináljuk. Erre kétféle lehetőség van:

  1. Animációk indítása vagy megállítása valamilyen esemény hatására.
  2. Scriptek kapcsolása animációk kezdetéhez és végéhez.

Ha egy alakzatot elneveztünk, akkor annak valamelyik eseménye okozhatja egy animáció elindulását. Ehhez az szükséges, hogy az animáció begin attribútumának értékéül adjuk az elnevezett elem nevét, majd egy pontot követően az eseményt, azaz az elemnév.eseménynév típusú értékek jöhetnek szóba. Hasonlóan az end attribútum is kaphat eseményeket értékül, azok bekövetkezésének hatására befejeződik egy animáció.

15/4. feladat:

Alakítsd át a 13/2. feladatban elkészített animációt úgy, hogy akkor induljon, ha az egérrel kattintunk a négyzeten. Ha lehúzzuk az egeret a négyzetről, akkor pedig fejeződjön be az animáció.

A másik lehetőség az, hogy egy animáció kezdetéhez vagy végéhez kapcsolunk egy-egy scriptet. Ekkor az <animate> elemben két újabb attribútumot felvétele válhat szükségessé. Az onbegin értéke egy olyan függvény neve lehet, amit az animáció kezdetekor kell végrehajtani, az onend pedig azt a függvényt tartalmazhatja, amit az animáció végén kell végrehajtani.

15/5. feladat:

Készíts egy 200×200-as rajzlapot. A (30,100) pontba helyezz el egy 30 egység sugarú bordó kört. Készíts egy animációt, ami a betöltés után 2 másodperccel indul és a körközéppont x koordinátáját eltolja 140 egységgel 4 másodperc alatt. Az animáció kezdetekor futtass le egy scriptet, ami a kör sugarát 10 egységre állítja, majd ha befejeződött, akkor egy másikat, ami a sugarat visszaállítja 30 egységnyire.