Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

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

Hasonló előadás


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

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

2 Görbék és sokszögek Eddig volt: –Sokszög : polygon –Töröttvonal : polyline

3 Sokszögek - path Sokszögek - path Paramé- terek MoveTo Mozgat LineTo Rajzol ClosePath Vonalvég Horizont Vízszint- es Vertical Függőle- ges AbszolútMLZHV Relatívmlzhv

4 Feladatok Készíts egy házikót, ajtóval. Használj abszolút koordinátákat. Hozz létre az előző mellett egy ugyanolyan házikót, de most relatív koordinátákkal dolgozz. Hozz létre egy 3. házat is, melynek a megadása a lehető legrövidebb legyen.

5 Ívek Ívek Az x1, y1 az ellipszisív kiinduló pontja, valamint az ellipszisív paraméterei: –A (a) : Abszolút, ill relatív koordináták használata –rx, ry : azon ellipszis x és y sugara, amin a két pont elhelyezkedik –rotx (fokban): az x tengely elforgatása az ellipszisnél –ívméret [0/1]: 0, ha az ív kisebb, mint 180°; 1, ha ≥180° –irányjelölő: 0, ha az ív a negatív irányba rajzolandó; 1, ha a pozitív irányba –xvég, yvég : az ellipszisív (x,y) végpontja

6 Feladatok Készíts egy lekerekített sarkú piros téglalapot a path tag használatával. Hozd létre ellipszisívekből a fekete-fehér szinű jin-jang ábrát.

7 Bézier-görbék I Bézier-görbék I Az x1, y1 a másodfokú Bézier-görbe kiinduló pontja, valamint a görbe további paraméterei: –Q (q) : Abszolút, ill relatív koordináták használata –vez1x, vez1y : a görbe első vezérlőpontjának koordinátái –vég1x, vég1y : a görbe első végpontjának koordinátái –… : további vezérlő-, végpont párokat lehet megadni Folytonos vagy simított másodfokú polybézier-görbe: –T (t) : Abszolút, ill relatív koordináták használata –vég2x, vég2y : a görbe 2. végpontjának koordinátái

8 Feladatok Hozz létre egy másodfokú Bézier-görbét a (10,80) és a (180,160) pontok között, (70,20) vezérlőponttal. Rajzold meg a segédvonalakat is. Folytasd az előző görbét a (380,100) pontba, a (250,10) vezérlőponttal. Hozz létre az előző adatokkal egy polybézier-görbét, melynél a második ív vezérlőpontját a megjelenítő számítja ki.

9 Bézier-görbék II Bézier-görbék II Az x1, y1 a harmadfokú Bézier-görbe kiinduló pontja, valamint a görbe további paraméterei: –C (c) : Abszolút, ill relatív koordináták használata –vez1x, vez1y : a kezdőpont vezérlőpontjának koord. –vez2x, vez2y : a végpont vezérlőpontjának koord. –vég2x, vég2y : a görbe végpontjának koordinátái –… : további ponthármasok adhatók meg

10 Bézier-görbék III Bézier-görbék III Folytonos vagy simított harmadfokú polybézier-görbe: –S (s) : Abszolút, ill relatív koordináták használata –vez3x, vez3y : az új végpont vezérlőpontjának koord. –vég3x, vég3y : az új végpont koordinátái

11 Feladatok Hozz létre egy harmadfokú Bézier-görbét a (10,80) és a (380,260) pontok között, (70,10) és (280,60) vezérlő- pontokkal. Rajzold meg a segédvonalakat is. Próbálkozz különböző jellegű harmadfokú görbék létrehozásával. (Tipp: változtasd a vezérlőpontok helyét a két végpont által meghatározott síkrészletekben)

12 Szövegek Szövegek …szöveg… A szöveg (x,y) koordinátája. Stílusok (CSS): –font-family : serif, sans-serif, monospace –font-size : érték –font-weight : bold, normal –font-style : italic, normal –text-decoration : none, underline, overline, linetrough –word-spacing : normal, érték (+/-) –letter-spacing : normal, érték (+/-) –text-anchor : start, middle, end (a szöveg igazítása az (x,y) koordinátához)

13 Feladatok Hozd létre és nevezd el a ‘Helló világ!’ szöveget, majd ezt felhasználva próbáld ki a különböző betűtípusokat, - stílusokat.

14 Stílusváltások Stílusváltások …szöveg… …szöveg1… …szöveg… Szövegen belüli stílusváltások (tspan). –x1, y1 : a belső szöveg helye –dx, dy : karakterek vízszintes ill függőleges eltolása. Több érték is megadható, ebben az esetben minden karakterhez különböző érték rendelődik –szög : betűk elforgatása –baseline-shift : sub, super (alsó-, ill felső index) –Az eddig tanult stílusok is felhasználhatóak, a stílus1 természetesen csak a szöveg1-re lesz hatással.

15 Feladatok Hozz létre egy többsoros szöveget a tspan segítségével, told el az első sor betűit vízszintesen, a másodikat függőlegesen, a harmadikat vegyesen, valamint forgasd is el őket. Írd le a víz és a sósav képletét. Írd le a másodfokú megoldóképletet.

16 További stílusok További stílusok …szöveg… –textLength : megadható a szöveg hossza –lengthAdjust : spacing, spacingAndGlyphs – hogyan dolgozhat a megjelenítő a szöveg hosszán: csak a térközökkel – spacing térközzel és jelszélességgel is – spacingAndGlyphs –writing-mode : tb - 90°-os elforgatással ír ki –g-o-v: 0 : a szöveget függőlegesen írja ki, ha a ‘tb’ is be van kapcsolva

17 Görbén elhelyezett szöveg …szöveg… Egy előre megadott görbén (gorbe), az adott (x) ponttól kezdve - ami megadható %-ban vagy felhasználói egységben is – helyezzük el a szöveget

18 Feladatok Írj ki 4 sort függőlegesen úgy, hogy mindhárom kódja más legyen. Segítség: transform, writing-mode, w-m + g-o-v, textPath A korábban létrehozott görbék egyikét felhasználva írj ki rá egy szöveget.


Letölteni ppt "Web-grafika II (SVG) 4. gyakorlat Kereszty Gábor."
Google Hirdetések