Vektorgrafika kezdőknek III.

Korábbi cikkünkben ismertettük a csomópontokkal és görbékkel kapcsolatos tudnivalókat.  A folytatásban áttekintjük a különböző objektumok kijelölési/egyesítési módjait.

Előző oldal

Gyakorló feladatok

1. feladat		2. feladat
	Két kör objektum felhasználásával készíts el egy holdsarlót.		Egy csillag és egy kör felhasználásával készítsd el az itt látható objektumot.
3. feladat		4. feladat
	5 kör felhasználásával készítsd el az itt látható objektumot.		Egy csillag és egy kör felhasználásával készítsd el az itt látható objektumot.
5. feladat		6. feladat
	5 kör felhasználásával készítsd el az itt látható objektumot.		Téglalapok és körök segítségével készítsd el az itt látható objektumot.

Összetettebb - több lépést igénylő -  feladatok

Valósítsd meg az alábbi ábrákon látható objektumokat!  Neked kell rájönnöd, hogy milyen objektumok felhasználásával és milyen művelet(ek) alkalmazásával készült el az adott objektum. Ha nem boldogulsz a feladattal, segítségül megnézheted a megoldást is.
Megoldás letöltése	Megoldás letöltése	Megoldás letöltése

Az SVG nyelv

Nem szabad azt sem elfelejteni, hogy az SVG (Scalable Vector Graphics) egy XML-alapú, kétdimenziós vektorgrafikák leírására szolgáló nyelv, amelynek használatához nem feltétlenül kell SVG rajzoló program. Ha ismerjük az SVG nyelvet, egy egyszerű szöveges állomány létrehozásával is tudunk ábrákat előállítani, hasonlóan ahhoz, ahogy weblapokat is létrehozhatunk egyszerű szövegállományok készítésével.

Ez azért is jó, mert pl. egy adatbázisban tárolt adatok alapján tudunk grafikákat, diagramokat, sőt animációkat generálni.

Lássunk egy egyszerű példát:

Valósítsuk meg az itt látható objektumot az SVG nyelv használatával.

A Kód

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/></svg>

Magyarázat

Az XML és DTD deklaráció után az <svg> és </svg> tagek közé írhatjuk a konkrét objektumok leírását. Az svg tag paramétereként adhatjuk meg a grafika méretét (width - szélesség, height - magasság) A <circle> tag segítségével egy kört jeleníthetünk meg, a szükséges paraméterek megadásával. A paraméterek: cx,cy: a kör középpontjának koordinátái r: sugár stroke: körvonal színe stroke-width: körvonal szélessége fill: a kitöltés színe

Az SVG nyelvet az érdeklődők részletesebben is megismerhetik a http://www.w3schools.com/svg/default.asp webcímen  (angol nyelven), illetve a http://svg.lap.hu/ weblapon is találhatnak a témához kapcsolódó linkeket.

Szimuláció

Abonyi-Tóth Andor