A mellékelt példa megnyitása előtt szükséges egy VML02 nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez nyissa meg a mellékelt mappa Tulajdonság ablakát, és itt a Webmegosztás lapon engedélyezze a mappa megosztását olvasási és parancsfájlok futtatási jogával.
A formák megjelenéséhez meg kell adnunk az előző részben megismert deklarációkat. Elsőként a névtér-deklarációt a HTML tagban:
<HTML xmlns:v="urn:schemas-microsoft-com:vml" XMLNS:MSHelp="http://msdn.microsoft.com/msHelp">
Ezt követően egy stílusdeklarációt a VML viselkedéssel:
<STYLE>.vml { BEHAVIOR: url(#default#VML) }
</STYLE>
Majd dinamikusan importáljuk a névteret:
<SCRIPT LANGUAGE="JScript">
document.namespaces("v").doImport("#default#VML");
</SCRIPT>
A sorozatunk előző számában egy kört rajzoltunk kétféle formában a weblapra a <v:oval...></v:oval> deklarációval, azonban a VML ennél több beépített formával rendelkezik, mely közül többet felhasználtunk a mellékelt példában is. Lássuk ezeket sorban.
Négyszög rajzolása
A négyszögeket a RECT kulcsszóval adjuk meg a névtér neve után egy kettősponttal elválasztva. A példánkban a négyszöget a következő módon adtuk meg:
<v:rect style='Z-INDEX:105;LEFT:26px;WIDTH:100px;POSITION:absolute;TOP:87px;HEIGHT:75px' fillcolor="yellow" strokecolor="red" strokeweight="2pt" />
A tag attribútumai a következők:
- fillcolor: a forma kitöltő színe, mely most sárga.
- strokecolor: a forma keretének színe, jelen esetben piros.
- strokeweight: a keret vastagsága.
Kerekített sarkú négyszög
A forma kulcsszava a ROUNDRECT, melyet a példában a következő módon használtunk:
<v:roundrect style="Z-INDEX:103;LEFT:25px;WIDTH:100px;POSITION:absolute;TOP:221px;HEIGHT:75px" arcsize="0.3" fillcolor="yellow" strokecolor="red" strokeweight="2pt" />
A kerekítést az arcsize attribútum értéke adja meg, melynek értéke most 0.3. A tulajdonság értéke 0 és 1 között lehet, 0 érték esetén a forma kerekítés nélküli négyszög, míg 1 esetén egy ellipszis.
Görbe
A <v:curve> tag segítségével rajzolhatunk tetszőleges (Bezier) görbét a weblapjainkra. A példában a következő deklarációval rajzoltunk egy szabályos, lefelé görbülő ívet:
<v:curve style="Z-INDEX:102; LEFT:267px; POSITION:absolute; TOP:98px" from="0,0" control1="100pt,100pt" control2="200,100" to="300,0" strokecolor="red" strokeweight="3pt" />
A forma használható attribútumai a következők:
- from: megadható, hogy honnan induljon a görbe rajzolása, vagyis a fizikai (x,y) koordináta – legyen az egy tetszőleges pont a weblapon – lesz a (0,0) koordináta. Ehhez képest adjuk meg a többi attribútum értékét.
- to: megadható a görbe zárópontjának koordinátája a „from” attribútum értékéhez képest. Jelen esetben ez (300,0), ami azt jelenti, hogy a görbe 300 pixel szélességben húzódik.
- control(x) (ahol az x egy sorszám): megadhatóak azok a kontrolpontok a forma rajzolásakor, melyek meghatározzák a megjelenést. Jelen példában meghatározzák a görbület ívét, valamint a görbülés irányát is.
Egyenes rajzolása
Tetszőleges helyzetű egyenest a <v:line> tag segítségével rajzolhatunk. Erre a következő példát említhetnénk:
<v:line from="20pt,20pt" to="100pt,20pt" '
strokecolor="red" strokeweight="2pt">
Mivel egy egyenest két pont határoz meg a síkban, így ezeket a „from” és a „to” attribútumok értéke határozza meg.
- from: a relatív kezdő pozíció.
- to: a relatív végpont koordinátái.
Az egyenes jelen esetben egy 100 egység hosszú, vízszintes egyenes.
Több egyenes alkotta forma
A <v:polyline> tag segítségével tetszőleges irányú és hosszúságú egyeneseket fűzhetünk össze egyetlen egyenessé. Ennek módja lehet a következő:
<v:polyline points="18pt,54pt,90pt,-9pt,180pt,63pt,261pt,27pt"
strokecolor="red" strokeweight="2pt"/>
A pontok helyzete egyértelműen azonosítja az egyeneseket.
Körívek
A körívek rajzolására a <v:arc> tagot használhatjuk. Itt megadhatjuk, hogy a kör ívéből mekkora hányadot rajzoljunk ki, és honnan kezdjük azt. A példában a következőképpen adtuk meg ezt:
<v:arc style="Z-INDEX:100;LEFT:26px;WIDTH:100px;POSITION:absolute;TOP:391px;HEIGHT:100px" startangle="0" endangle="180" strokecolor="red" strokeweight="2pt" />
A két legfontosabb attribútum a következő:
- startangle: a kezdő fok, ahonnan a rajzolást indíthatjuk.
- endangle: a záró fok értéke.
A példában a 90 és a 180 fokos körívre mutatunk egy példát. Természetesen lehetőség van ezzel a technikával egy teljes kört is kirajzolni. A formák script nyelvekből is elérthetők, így programozási szempontból ideálisak.