Transzformációk

Eddigi példáinkban az alakzatok helyét egyes attribútumok beállításával határoztuk meg. Eddigi ismereteink azonban a rajzok elkészítésekor korlátokat szabtak: a téglalapok oldalai párhuzamosak voltak a koordinátarendszer tengelyeivel, és egy elnevezett alakzatot is csak az eredetivel azonos állásúan tudtunk elhelyezni a dokumentumban. Szerencsére rendelkezésünkre állnak olyan eszközök, melyek segítségével minden transzformációt elvégezhetünk az alakzatokon, az egyszerű nagyítástól kezdve a forgatva tükrözésig. Az SVG-ben van néhány alapvető transzformáció, melyekre egyszerű leírási módszer is van. Ezen kívül számos más transzformációt megadhatunk az alapvető típusok kombinálásával. Legáltalánosabb eszközként pedig használhatjuk a mátrixokkal való megadás lehetőségét is.


Transzformációk elhelyezése a dokumentumban

Mielőtt konkrét transzformációk elkészítésébe kezdenénk, fontos tisztázni, hogy milyen helyzetekben használhatunk transzformációkat, és ezektől milyen eredményre számíthatunk.

Egy transzformáció tetszőleges alakzatra vonatkozhat. Ide kell érteni az egyszerű, egyetlen geometriai elemmel leírható alapalakzatokat és a bonyolult, több részből álló, de csoportba foglalt objektumokat is. Továbbá transzformálhatunk egy korábban definiált és felhasználni kívánt elemet is. Végső soron szükségünk van egyetlen kódelemre, melyre alkalmazni szeretnénk a transzformációt. Ennek az elemnek az attribútumai közé kell felvennünk egy újat, a transform nevűt. Az, hogy milyen transzformációt alkalmazunk erre az alakzatra, az attribútum tartalmától függ. Az alábbi három leírás tehát ekvivalens megoldásokat jelent:

1. <rect transform="..." (egyéb jellemzők)/>
2. <g transform="...">
<rect
(egyéb jellemzők)/>
</g>
3. <rect id="tegla" (egyéb jellemzők)/>
<use
xlink:href="#tegla" transform="..."/>

Ahhoz, hogy egy transzformáció eredményét ismerjük, fontos tudni, hogy az SVG hogyan végzi el az eredmény kiszámolását. Mint ahogyan azt már a "Koordinátarendszerek" című fejezetben láttuk, minden alakzatnak van egy saját koordinátarendszere. A transzformációk segítségével ezt a koordinátarendszert módosítjuk. Ezt úgy lehet elképzelni, hogy a módosítani kívánt alakzat egy külön lapon helyezkedik el, amit elforgathatunk, megnyújthatunk, vagy bármilyen módon áttranszformálhatunk. Az így kapott eredmény pedig visszakerül a nem módosított elemek közé. Tulajdonképpen a megjelenítés során ez játszódik le. Amelyik alakzatot nem transzformáltuk, az az eredeti formában kerül kirajzolásra, amelyiket pedig igen, az az új, transzformált koordinátarendszerben.

Ábra a koordinátarendszerekről.A jobboldali képen adott egy kör a (20,20) pontban, melynek sugara 10 egység (narancssárga színnel rajzolva). Alkalmazzunk rá egy transzformációt, ami x irányban kétszeresére nyújtja meg (ennek eredménye látható kék színnel rajzolva). Ezen kívül az eredeti és a transzformált koordinátarendszerben is (narancssárga az eredetiben ill. kék színnel az újban) be vannak rajzolva mindkét tengely mentén az 5, 10, 15 és 20 pontokhoz tartozó rácsvonalak.

Az eredeti kör középpontja a kiírásnak megfelelően a (20,20) pontban van, ahogyan ez az ábráról is leolvasható.
Ha alkalmazzuk a transzformációt, akkor minden x koordináta értéke kétszeresére nő, azaz a kört tartalmazó koordinátarendszer megváltozik, az x irányú egység mérete kétszeresére nő. Ez látható az ábrán is: a középpont még mindig a (20,20) pontban van, de ennek helye az eredeti koordinátarendszerben a (40,20) pontnak felel meg. Továbbá a kör is megnyúlt. Sugara megmaradt az eredeti 10 egység, a változás itt is az arányok változásának köszönhető.
Mivel függőleges irányú módosítást nem alkalmaztunk, az eredeti és a transzformált kör középpontjának y koordinátái azonosak maradtak.

Miután tisztáztuk, hogy milyen hatásokat várhatunk egy transzformációtól, nézzük meg a konkrét típusokat is. A következő részben a leggyakoribb - ezért önálló kulcsszóval is rendelkező - transzformációk következnek. Ezeket a transform attribútumban kell elhelyezni. Minden transzformációt függvényszerűen adunk meg. Először a típus nevét kell leírni, majd utána közvetlenül zárójelben az(oka)t az érték(ek)et, amely(ek) ténylegesen meghatározzá(k) a transzformációt. Egyszerre több transzformáció is végrehajtható egy alakzaton, de a kezdeti ismerkedéshez javsalom, hogy egyszerre csak egy transzformáció hatását tanulmányozd. Ha több transzformációt szeretnénk egyszerre alkalmazni, akkor azokat egymás után szóközzel elválasztva kell a transform attribútumban felsorolni. A végrehajtási sorrendről a fejezet végén lesz szó.


Eltolás

Az eltolás megadásához a translate(x,y) használata szükséges. Kétféle alakja létezik. Általános esetben két értéket kell megadni, annak a vektornak a méreteit, amivel el szeretnénk tolni az alakzatot. A két számértéket vesszővel kell elválasztani. Ha az y irányú eltolás mértéke 0, akkor a második érték elhagyható.

8/1. feladat:

Készíts egy piros, 30 egység oldalú négyzetet az origóba. Készítsd el két másolatát. Az egyiket toldd el az (100,140) vektorral és egy másik másolatát a (70,0) vektorral. A második esetben a rövidített alakot használd.


Forgatás

Alakzatok elforgatására a rotate(szög) szolgál. Egyetlen paramétere a forgatás szöge. Fontos megjegyezni, hogy a szög megadása fokban történik, nem pedig radiánban. A forgatás középpontja ebben az esetben az origó, az alakzat koordinátarendszerének (0,0) pontja.

8/2. feladat:

Hozz létre egy 200×200-as koordinátarendszert. Rajzolj bele egy 30×30-as piros négyzetet a (150,20) pontba. Készítsd el ennek a négyzetnek az 60°-os elforgatottját, színe legyen kék. (Vigyázz, az átszínezés miatt nem jó az id és use használata!)

A forgatásnak is van egy másik alakja. Lehetőségünk van megadni a forgatás középpontját is. Ilyenkor a szög értékén kívül a középpont x és y koordinátáját is meg kell adnunk paraméterként: rotate(szög,kpx,kpy). A forgatás középpontja ebben az esetben is az alakzat koordinátarendszerében értendő.

8/3. feladat:

Hozz létre egy 80×80-as kék négyzetet úgy, hogy a középpontja a (100,100) pontba kerüljön. Készítsd el ennek a négyzetnek a 45°-os elforgatottját, melynek színe legyen sárga és a középpontja az előzővel egybe essen. Mindkét alakzat átlátszóságát állítsd 0.5-re.


Skálázás

Mint a bevezető példában is láttuk, lehetőség van a koordinátarendszer átskálázására, azaz mindkét tengely mentén megnyújthatjuk vagy összenyomhatjuk az alakzatunkat. Ehhez a scale(x,y) használata szükséges. Paraméterként azt adhatjuk meg, hogy x ill. y irányban hányszorosára változzon az egység. A második érték itt is elhagyható, ebben az esetben mindkét irányra ugyanaz az egyetlen érték fog vonatkozni.

8/4. feladat:

Hozz létre egy 300×400-as koordinátarendszert. Rajzolj egy téglalapot a (20,20) pontba. A téglalap mérete 50×60 legyen, a körvonala legyen fekete és 2 egységnyi vastagságú, a belseje legyen 0.4 egységnyire átlátszó és zöld. Készíts még két téglalapot ugyanebbe a koordinátarendszerbe ennek átskálázásával: az elsőt nyújtsd meg mindkét irányban kétszeresére, a másodiknál x irányban 3-szoros, y irányban 4-szeres legyen a nagyítás.

Az ábrán jól látható, hogy valóban minden érték 2, 3 vagy 4-szeresére nőtt, beleértve a körvonalakat is. Megfigyelhető továbbá, hogy a téglalapok bal felső sarka sem maradt az eredeti helyen, a koordinátarendszerrel együtt a kiindulópont is elmozdult.


Tengelyek "megdöntése"

Ennél a transzformációnál látszik igazán az a technika, amivel az SVG dolgozik. Itt ugyanis arról van szó, hogy valamelyik tengelyt egyszerűen eldöntjük, egy új koordinátarendszert létrehozva. Ez a transzformáció egy affinitás.
A két tengely külön-külön módosítható a skewX(szög) és skewY(szög) segítségével. Egyetlen paraméterük azt határozza meg, hogy az x ill. az y tengely milyen szöggel legyen megdöntve az eredetihez képest.

8/5. feladat:

Hozz létre egy 200×200-as origóra szimmetrikus koordinátarendszert, azaz a rajzlapodon a (-100,-100) és a (100,100) pontok közötti rész legyen látható. Rajzolj az origójába egy 80×80-as négyzetet. Próbáld ki milyen eredményt kapsz, ha


Több transzformáció alkalmazása egy alakzatra

Mint ahogyan arról a fejezet elején szó volt, egy alkzaton több transzformáció is végrehajtható. Erre a 8/5. feladat 3. és 4. részében láthattunk példát is. Felmerül a kérdés, hogy fontos-e ezeknek a transzformációknak a sorrendje, ill. ha igen, akkor egy SVG kép megjelenítésekor milyen sorrendben kerülnek végrehajtásra a transzformációk.
Némi geometriai ismerettel felvértezve könnyen találhatunk példát arra, hogy két transzformáció sorrendjét felcserélve lényegesen más eredményhez jutunk. Természetesen akadnak olyan speciális esetek, ahol a felcserélés ellenére azonos eredményt kapunk. Az első esetre általában jó példa lehet egy eltolás és egy forgatás kombinációja, ezek kétféle sorrendben történő végrehajtása általában különböző eredményre vezet. A második esetre pedig biztosan megfelelő két eltolás kombinációja, amelyek sorrendje nem befolyásolja a végeredményt. Tehát jogos a sorrendiség kérdése.

Alapvetően kétféle megadási móddal találkozhatunk.
Ha egyetlen transform attribútumban adjuk meg mindkét transzformációt, akkor a feldolgozás balról jobbra halad. Azaz az elsőként megadott transzformáció kiértékelésével kezdődik a feldolgozás, majd az így kapott ábrát módosítja a következő, és így tovább egészen az utolsó transzformáció feldolgozásáig.
A másik esetben több egymásba ágyazott <g> elemről és ezekben megadott transzformációkról lehet szó. Ebben az esetben először a külső elemben megadott transzformációt hajtja végre a megjelenítő, majd folyamatosan halad a belső elemek felé.

Az alábbi két példa tehát megegyező eredményre vezet, feldolgozásuk során először a forgatás, majd az eltolás kerül végrehajtásra:

1. <g transform="rotate(30) translate(100,40)">
<!--Itt következnek az elemek, amiket transzformálunk.-->
</g>
2. <g transform="rotate(30)">
<g transform="translate(100,40)">
<!--Itt következnek az elemek, amiket transzformálunk.-->
</g>
</g>

Transzformációk megadása mátrixok segítségével

Ábra egy mátrixról.Minden síkbeli transzformáció egyértelműen leírható 3×3-as mátrixok segítségével. A mátrixalgebra eszközeit felhasználva könnyen összevonható több transzformáció együttes hatása egyetlen mátrixba. Ennek módszereiről most nem lesz szó. Amit megismerünk, az a módszer, amivel egy mátrix-alakban megadott transzformációt alkalmazhatunk egy-egy alakzatra.

A jobboldali ábrán látható egy általános síkbeli transzformációt leíró mátrix. A felső két sora 6 ismeretlent tartalmaz, az alsó sora mindig a 0,0,1 számokból áll. Emiatt amikor egy transzformációt megadunk, a felső két sor értékeit írjuk csak le. A transform értékeként a matrix(a b c d e f) értéket adjuk, ahol az a-f értékek jelölik a mátrix ábra szerinti helyein álló számokat.