Vágás, maszkolás

Munkánk során előfordulhat, hogy speciális hatásokat szeretnénk elérni. Lehetőségünk van a képnek csak egy bizonyos formájú területét megmutatni, vagy olyan látványt előállítai, mintha egy áttetsző felületen keresztül néznénk a képet. Ebben a fejezetben a hatások előállításához szükséges eszközöket, a vágást és a maszkolást ismerheted meg.


Vágás

A vágás során meghatározhatjuk, hogy a rajzunk mely része legyen látható, és mely területek maradjanak ki a megjelenítésből. Ennek érdekében mindössze a megjelenítendő részletet kijelölő alakzatot kell elkészítenünk.

Megjegyezhetjük, hogy a vágás legegyszerűbb formáját akkor is alkalmazzuk, amikor egy rajzlapot készítünk. Ekkor a tetszőlegesen méretezhető rajzterületen megadjuk azt a részt, amelyet látni szeretnénk az ábrán. Természetesen ennél sokkal bonyolultabb feladatokat is elvégezhetünk a vágás segítségével.

A vágógörbe leírásához egy <clipPath> elemet kell elhelyezni a dokumentum elején, a <defs> elemen belül.

<clipPath id= ""  
  clipPathUnits= "userSpaceOnUse" >
<!--Ide kerül a vágógörbe-->
</clipPath>  

A vágógörbe tetszőleges számú geometriai alakzatból és szövegekből állhat össze. Az összetevők által lefedett teljes terület látható lesz a megjelenítés során. A vágás szempontjából nincs jelentősége az alakzatok színének és kitöltésének.

A clipPathUnits attribútumban megadhatjuk, hogy melyik koordinátarendszert szeretnénk használni a vágógörbe megadásakor. A beállítások ugyanúgy működnek, ahogyan azt a "Színátmenetek, mintázatok" fejezetben láttuk. A userSpaceOnUse érték azt jelenti, hogy a rajzlap koordinátarendszerét használjuk, az objectBoundingBox beállítás esetében pedig az alakzat befoglaló téglalapja adja a koordinátarendszert. Ennek megfeleően kell megválasztanunk az adatok mértékegységét is.

A későbbi felhasználáshoz nevet is kell adni a görbének az id attribútumban.

Az elkészült görbét egy vagy több alakzatra, csoportra lehet alkalmazni. A vágógörbét a style attribútumban lehet megadni. Formátuma azonos a mintázatoknál látottal: clip-path: url(#vagogorbe_neve).

17/1. feladat:

Készíts egy kör alakú vágógörbét, majd alkalmazd az 5/3. feladatban elkészített kép teljes egészére. A kör középpontja legyen a (100,100) pontban és a sugara legyen 50 egység. Segítségül: hogy az összes összetevőre egyszerre alkalmazható legyen a vágógörbe, célszerű csoportosítást használni.

17/2. feladat:

Az előzőleg elkészített görbét módosítsd úgy, hogy az alakzat befoglaló téglalapja legyen a használt koordinátarendszer. A kör középpontja a befoglaló téglalap középpontja legyen, és érintse az oldalát. Alkalmazd a görbét az előző képen szereplő összes alakzatra, mindegyikre külön-külön.


Maszkolás

Amikor egy képen maszkot helyezünk el, akkor tulajdonképpen azt írjuk le, hogy a képek egyes részei milyen erősen legyenek láthatók. Egy maszk úgy viselkedik, hogy a színétől és átlátszóságától függően kitakarja, vagy átengedi a kép eredeti színét, átlátszóságát. Minél sötétebb egy maszk, annál többet enged láttatni az alatta elhelyezkedő ábrából. Ha a színe vikágos, vagy átlátszó, akkor azonban alig enged át valamit.

Maszk készítéséhez a <mask> elemet használjuk:

<mask id= ""  
  maskContentUnits= "objectBoundingBox" >
  x= "" >
  y= "" >
  width= "" >
  height= "" >
<!--Ide kerülnek a maszk alkotóelemei.-->
</mask>  

Az x, y, width és height attribútumok a maszk méretét adják meg a maszkolandó alakzat koordinátarendszerében. Ha ettől el szeretnénk térni és a rajtzlap koordinátarendszerében adjuk meg a méreteket, akkor a maskContentUnits attribútum értékét userSpaceOnUse-ra kell állítani. Az id attribútumban kell megadni a maszk nevét, amivel a későbbiekben hivatkozhatunk rá.

Ez elkészült maszkot az alakzaton úgy alkalmazhatju, mint ahogyan a mintázatoknál tettük. Fel kell venni a style attribútumban egy mask: url(#maszk_neve) mezőt, amiben meg kell adni a használni kívánt maszk nevét.

A maszk alkotóelemei tetszőleges színű és mintázatú alakzatok lehetnek. Az átengedett szín mennyisége a maszk képpontjaiból kerül kiszámításra, az alábbi képlet szerint:
(0.2125*piros+0.7154*zöld+0.0721*kék)*áttetszőség
Az így kapott érték 0 és 1 közé esik. Ha az érték 1, akkor a maszkolt alakzat teljes egészében látható, ha 0, akkor egyáltalán nem. A köztes értékek esetében pedig arányosan lesz látható a kép.

Az alábbi ábrán négy színnel láthatsz példákat. A maszkolt térglalapok színe minden sorban piros, zöld, kék és fekete. A maszkok egy-egy ilyen sorra vannak alkalmazva. Minden sor alatt látható, hogy milyen színnel lett maszkolva.

Ábra a különböző színű maszkok hatásáról.

Az egyes beállítások eredményét egy interaktív ábrán is tanulmányozhatod, melyet az alábbi linkre kattintva érhetsz el: maszk.html.
Az ábrán egy beágyazott képet láthatsz, amelyen egy négyzet és egy kör van megrajzolva. A két alakzat színe megegyezik, abban különböznek csupán, hogy a körön elhelyezkedik egy maszk is. Az alapszín és a maszk színe ill. átlátszósága is változtatható a mezők segítségével. Ha a megjelenítendő értékeket beírtuk, akkor az alapszínt az "Alapszín módosítása", a maszk színét pedig a "Maszk színének módosítása" gombbal változtathatjuk meg. A színösszetevők értéke 0 és 255 között lehet. Az átlátszóság 0 és 1 közötti értéket vehet fel.

17/3. feladat:

Készíts egy 300×100-as rajzlapot és helyezz el rajta 3 négyzetet. A négyzetek 80×80 egység méretűek legyenek és a színük legyen sorban piros zöld és kék. Alkalmazz mindegyikre egy olyan maszkot, amely egy kört tesz láthatóvá belőlük. A maszk színe legyen piros.