Web-grafika II (SVG) 7. gyakorlat Kereszty Gábor.

Az előadások a következő témára: "Web-grafika II (SVG) 7. gyakorlat Kereszty Gábor."— Előadás másolata:

1 Web-grafika II (SVG) 7. gyakorlat Kereszty Gábor

2 Animációk egyebek I Ahol a elemet használjuk a nem szám értékű attr. megváltoztatására. visibility: láthatóság (hidden, visible) A prev kulcsszóval is tudunk hivatkozni a megelőző animációra, ebben az esetben nem kell elneveznünk a transzformáló animációt.

3 Animációk egyebek II Ahol az első animáció 4-szer fut le, a második pedig 7mp-ig ismétlődik. A második akkor indul, amikor az első a 3. lefutásának közepén tart.

4 Scriptek Script elhelyezése az svg törzsön belül: <![CDATA[ function fvnev(paramlista){ … kód … }; … további függvények … //]]>

5 Fő események click – kattintás mousedown – egérgomb lenyomása mouseup – egérgomb felengedése mouseover – egérrel felette állunk mouseout – egérrel lejövünk róla mousemove – egér mozgatása load – dokumentum betöltve keydown – billentyűlenyomás keyup - billentyűfelengedés

6 Fő / általános paraméter Ez a paraméter az ‘evt’, ami a bekövetkezett eseményhez tartozó tulajdonságokat tartalmazza. Metódusai: getTarget() – az objektum getClientX, getClientY – az egér x és y koordinátája

7 Saját paraméter elérés Ahol a getAttribute-tal lekérdezhetjük egy adott attr. értékét, a setAttribute-tal pedig új értéket adhatunk egynek… <![CDATA[ function fvnev(evt){ var obj = evt.getTarget(); var attr = obj.getAttribute(“attribútumnév”); obj.setAttribute(“attribútumnév”, érték); }; … további függvények … //]]>

8 Feladatok Készíts egy 50*50-es zöld téglalapot, aminek a szélessége a 100-ra nő, ha ráállunk az egérrel, és visszaáll az eredetire, ha lejövünk róla. Egészítsd ki az előző feladatot úgy, hogy a téglalap magassága a másfélszeresére növekedjen, amikor rákattintunk.

9 Elem keresés id alapján Amikor a sokszögre kattintunk, a kör egy adott tulajdonságát tudjuk változtatni. <![CDATA[ function fvnev(){ var obj = svgDocument.getElementById(“kor”); var attr = obj.getAttribute(“attribútumnév”); obj.setAttribute(“attribútumnév”, érték); }; … további függvények … //]]>

10 Feladatok Készíts egy sárga kört, aminek a sugara 10 egység. Készíts két “vezérlőgombot”. Az egyikre kattintva a kör sugara változzon a kétszeresére, a másik állítsa vissza az eredeti sugarat.

11 Szöveg módosítása Szöveget úgy tudunk módosítani, hogy lecseréljük annak „gyerekét”. <![CDATA[ function fvnev(){ var obj = svgDocument.getElementById(“szoveg”); var ujsz = svgDocument.createTextNode(“újszöveg”); obj.replaceChild(ujsz, obj.getFirstChild() ); }; //]]> …eredeti szöveg…

12 Feladatok Készíts egy lila és egy fekete négyzetet. Készíts egy olyan scriptet, ami kiírja annak a téglalapnak a színét, amelyik felett állsz.

13 Animáció & script Animáció elejéhez és végéhez is lehet scriptet kapcsolni, valamint az indítás és leállítás megoldható egy-egy esemény kiváltásával, pl:

14 Feladatok Készíts egy 40 egység sugarú piros kört, aminek a mérete megduplázódik, majd visszacsökken eredeti mértére, ha rákattintunk. Készíts egy olyan függvényt, ami a „Vege” üzenetet jeleníti meg, és hívd meg ezt a fv-t az animáció végén. / text-visibility vagy alert(‘Vege’) /

15 Egyéb – setInterval() var timer; function kezd(){ timer = setInterval(‘mozgat()’,5); }; function veg(){ clearInterval(timer); }; function mozgat(){ …kód… }; …