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

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

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

2 Csoportosítások és definíciók …a csoport elemei… …definiálandó elemek… …alakzatok… Csoport, definíció, szimbólum és újrafelhasználás: Csoportok eredeti tulajdonságai nem írhatók felül. Definíciók és szimbólumok eredeti példánya nem jelenik meg, tulajdonságaik átírhatók az újrafel- használás során.

3 Méretezés A következő dián összefoglalt módon lehet az svg munkaterületének és az alakzatoknak a méreteit megadni Megjegyzés: Százalékos megadásnál: a befogadó elem mérete a viszonyítási alapja a beágyazott elem méretének

4 Méretezés JelölésMéret emAlap betűkészlet magassága exAz x karakter magassága pxpixel vagy képpont ptpont (1/72 hüvelyk) pcpica (1/6 hüvelyk) cmcentiméter mmmilliméter ininch vagy hüvelyk %százalék

5 Felhasználói koordinátarendszerek Felhasználói koordinátarendszerek Igazítás lehetséges értékei: xMinYMin, xMinYMid, xMinYMax, xMidYMin, xMidYMid, xMidYMax, xMaxYMin, xMaxYMid, xMaxYMax Meet: a munkaterület üres része is látszik Slice: nem látszik az üres rész és ami lelóg a képről None: nincs igazítás, a méretarányok igazodnak a munkaterület méretéhez

6 Transzformációk Eltolás Skálázás vagy nyújtás Forgatás Döntés vagy nyírás Transzformálás mátrixokkal

7 Eltolás és skálázás Az x koordináta megadása kötelező, az y koordinátáé opcionális …alakzatok… Az x érték megadása kötelező, az y érték opcionális …alakzatok… Mindkét transzformáció a bennük foglalt alakzatok koordinátarendszerét transzformálja át

8 Feladatok Rajzolj egy ellipszist rx=50 ry=20 sugárral. Told el a (100,100) pontba. Rajzolj egy 50*60-as téglalapot a (20,20) pontba. A körvonala legyen fekete és 2 egységnyi vastag, a belseje zöld és az átlátszósága 0.4. Készíts még 2 téglalapot átskálázással. Az első legyen dupla méretű, a második x irányba ½ -ed, y irányba 3/2 -ed torzítású.

9 Forgatás és döntés A vízszintes és a függőleges egyenesek / tengelyek megdöntése adott szögben: …alakzatok… Forgatás az origó, vagy az (x,y) pont körül:

10 Feladatok Rajzolj egy 30*30-as piros négyzetet a (100,30) pontba. Készítsd el ennek a kék színű és 45°-os elforgatottját ugyanoda. Készíts egy 200*200-as koordinátarendszert, mely a (-100,-100) és a (100,100) pontok között helyezkedik el. Rajzolj az origóba egy 80*80-as lila négyzetet. Készítsd el ennek a négyzetnek a 30 fokos zöld és 60 fokos sárga elforgatottját. Állítsd be ez utóbbi 3 négyzet átlátszóságát 0.5- re.

11 Feladatok Készíts egy 200*200-as szimmetrikus koordinátarendszert. Rajzolj az origóba egy 80*80-as ¾ -ed részben átlátszó kék négyzetet. Próbáld ki a következőket: i.x koordináták döntése 30 fokkal ii.y koordináták döntése -30 fokkal iii.mindkét koordináta döntése 30 fokkal iv.az x-et 30, az y-t -30 fokkal döntsd meg

12 Mátrix-transzformáció Összevont transzformálás: …alakzatok… Eltolás: [1 0 0 1 tx ty] Forgatás: [cos(α) sin(α) –sin(α) cos(α) 0 0] Nyújtás: [sx 0 0 sy 0 0]

13 Feladatok Hozz létre két fát. Az első fa álljon egy téglalapból és egy körből. A második legyen lekicsinyítve és eltolva úgy, hogy a transzformációk egyaránt vonatkozzanak a törzsre és a lombra.