Web-grafika II (SVG) 4. gyakorlat

Az előadások a következő témára: "Web-grafika II (SVG) 4. gyakorlat"— 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 <polygon points=“pontok”/> <polyline points=“pontok”/>

3 Sokszögek - path <path d=“paraméterek felsorolása”/>
MoveTo Mozgat LineTo Rajzol ClosePath Vonalvég Horizont Vízszint-es Vertical Függőle-ges Abszolút M L Z H V Relatív m l z h v <path d=“M L L L L 10 40Z”/> <path d=“m10 10h20v20l-10 10h-10Z”/>

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 <path d=“M x1 y1 A rx ry rotx ívméret irányjelölő xvég yvég”/> 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 <path d=“M x1 y1 Q vez1x vez1y vég1x vég1y …”/> 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 <path d=“M x1 y1 Q vez1x vez1y vég1x vég1y T vég2x vég2y”/> 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 <path d=“M x1 y1 C vez1x vez1y vez2x vez2y vég2x vég2y …”/> 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 Folytonos vagy simított harmadfokú polybézier-görbe:
<path d=“M x1 y1 C vez1x vez1y vez2x vez2y vég2x vég2y S vez3x vez3y vég3x vég3y”/> 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 A szöveg (x,y) koordinátája. Stílusok (CSS):
<text x=“x” y=“y” style=“stílus”> …szöveg… </text> 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 Szövegen belüli stílusváltások (tspan).
<text x=“x” y=“y” style=“stílus”> …szöveg… <tspan x=“x1” y=“y1” dx=“dx” dy=“dy” rotate=“szög” baseline-shift=“bs” style=„stílus1”> …szöveg1… </tspan> …szöveg… </text> 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 textLength : megadható a szöveg hossza
<text textLength=“tL” lengthAdjust=“lA” style=“writing-mode: tb; glyph-orientation-vertical: 0”> …szöveg… </text> 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
<text><textPath xlink:href=“#gorbe” startOffset=“x%”> …szöveg… </textPath></text> 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.