r11-01, ## Documents ##, XML Vademecum profesjonalisty

Rozdział 11.
Wektorowy język znaczników

Prezentacja dokumentów XML w przeglądarkach nie powinna ograniczać się do samego tekstu i podjęto już szereg inicjatyw zmierzających do utworzenia graficznych aplikacji XML. W rozdziale 8, kiedy omawialiśmy użycie modelu DOM XML w Javie, a także w rozdziale 9, kiedy omawialiśmy interfejs SAX, utworzyliśmy przeglądarkę graficzną XML do wyświetlania okręgów. Z kolei w rozdziale 1 krótko omówiono język SVG, język Skalowalnej grafiki wektorowej. SVG istnieje już od dość dawna, ale nadal nie jest zbyt powszechnie obsługiwany. Obecnie najszerzej stosowaną graficzną aplikacją XML jest Wektorowy język znaczników (VML, Vector Markup Language) zaproponowany przez Microsoft.

Microsoft opisuje VML jako „aplikację Rozszerzalnego języka znaczników (XML) 1.0, w której zdefiniowano sposób kodowania informacji wektorowych wraz z dodatkowymi znacznikami opisującymi sposób wyświetlania tych informacji i ich modyfikowania”.

VML obsługuje znaczniki opisujące grafikę wektorową tak samo jak HTML obsługuje znaczniki opisujące dane tekstowe. VML używa własnego zestawu elementów, ale obsługuje też CSS, wobec czego można stosownie do potrzeb zmieniać styl i położenie zdefiniowanych w nim figur. VML używany jest w pakiecie Microsoft Office 2000, w programach Microsoft Word, PowerPoint i Excel. Kiedy w jednym z tych programów tworzysz grafikę, jest ona zapisywana jako VML. Język ten jest także wbudowany w Internet Explorera. Kod VML można tworzyć rysując narzędziami dołączanymi do Microsoft Office, można także samemu pisać odpowiednio kod i tą drugą możliwością zajmiemy się w tym rozdziale.

Istnieją dwa podstawowe opisy VML: podręcznik tego języka dostępny na stronach Microsoftu oraz informacja tej firmy przesłana do W3C i przez W3C opublikowana (zresztą z tej informacji niewiele wynika, gdyż poza Microsoftem nikt nie wydaje się być VML zanadto zainteresowany). Oto adresy wymienionych dokumentów; pamiętaj, że adresy Microsoftu mają tendencję do bardzo szybkiego zmieniania się:

http://msdn.microsoft.com/standards/vml/ref/ - podręcznik języka VML opracowany przez Microsoft, zawiera przykłady.
http://www.w3.org/TR/NOTE-VML - informacja wysłana W3C datowana na 13 maja 1998 roku.

VML został dodany do Internet Explorera przed wbudowaniem w tę przeglądarkę obsługi XML, zatem sposób implementacji VML nie obejmuje wysp danych XML ani żadnych tego typu mechanizmów. Zamiast tego używa się przestrzeni nazw VML oraz oddzielnego procesora VML zaimplementowanego jako zachowanie Explorera (czyli zewnętrzny moduł kodu). Z wektorowym językiem znaczników pobieżnie zapoznaliśmy się w rozdziale 1, teraz przyjrzymy mu się dokładniej.

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Użycie Wektorowego języka znaczników

</H1>

</CENTER>

<P>

<v:oval STYLE='width:100pt; height:75pt'

fillcolor="yellow" />

<P>

<v:rect STYLE='width:100pt; height:75pt' fillcolor="blue"

strokecolor="red" STROKEWEIGHT="2pt" />

<P>

<v:polyline

POINTS="20pt,55pt,100pt,-10pt,180pt,65pt,260pt,25pt"

strokecolor="red" STROKEWEIGHT="2pt" />

</BODY>

</HTML>

Zachowania Internet Explorera

Więcej o zachowaniach Internet Explorera będących jedną z technik Microsoftu zmierzających do rozdzielenia znaczników od treści dokumentu znajdziesz pod adresem http://msdn.microsoft.com/workshop/c-frame.htm#/workshop/author/default.asp.

Nasz przykładowy dokument spowoduje wykreślenie kilku figur - obejrzyj rysunek 11.1.

Rysunek 11.1.

Przykładowa strona VML

0x01 graphic

Teraz VML omówimy dokładnie, zaczniemy od powiedzenia paru słów o składni tego dokumentu.

Tworzenie dokumentów VML

W Internet Explorerze VML zanurza się w dokumentach HTML. Zaczyna się od zadeklarowania przestrzeni nazw v:

Konieczne jest także uruchomienie procesora VML zaimplementowanego jako zachowanie Explorera. W tym celu używa się znacznika <STYLE> łącząc przestrzeń nazw v z domyślnym zachowaniem VML:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

W ten sposób Internet Explorer został już poinformowany, że elementy VML (z przestrzeni nazw v) występujące w tym dokumencie mają być przetwarzane przez procesor VML. Teraz można do dokumentu dodawać elementy takie jak oval (umieszczając je w przestrzeni nazw v):

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Użycie Wektorowego języka znaczników

</H1>

</CENTER>

<P>

<v:oval STYLE='width:100pt; height:75pt'

fillcolor="yellow" />

<P>

<v:rect STYLE='width:100pt; height:75pt' fillcolor="blue"

strokecolor="red" STROKEWEIGHT="2pt" />

<P>

<v:polyline

POINTS="20pt,55pt,100pt,-10pt,180pt,65pt,260pt,25pt"

strokecolor="red" STROKEWEIGHT="2pt" />

</BODY>

</HTML>

Następnie przyjrzymy się wszystkim elementom dostępnym w języku VML.

Elementy VML

W VML zdefiniowano dwadzieścia elementów pokazanych w tabeli 11.1.

Tabela 11.1.
Elementy VML

Element	Opis
arc	Wykreśla łuk.
background	Dodaje tło.
curve	Wykreśla krzywą.
fill	Wypełnia figurę.
formulas	Określa wzór umożliwiający skalowanie figur.
group	Grupuje figury.
handles	Wykreśla uchwyty figur.
image	Obsługuje obrazki.
imagedata	Opisuje dane obrazka, który ma być umieszczony na figurze.
line	Wykreśla linię.
oval	Wykreśla elipsę.
path	Określa ścieżkę do renderingu.
polyline	Wykreśla łamaną.
roundrect	Wykreśla prostokąt z zaokrąglonymi rogami.
shadow	Dodaje do figury cień.
shape	Tworzy figurę podstawową.
shapetype	Definiuje figurę wielokrotnego użytku.
stroke	Określa sposób wykreślania ścieżki.
textbox	Tworzy okienko tekstowe.
textpath	Określa ścieżkę, wzdłuż której ma być wykreślany tekst.

Ogólna struktura VML oparta jest na dwóch podstawowych elementach: shape oraz group. Pierwszy z nich jest podstawowym elementem VML i używa się go do definiowania ogólnie pojętych figur graficznych. group pozwala grupować zestawy figur, aby były traktowane jako całość.

W VML zdefiniowano także szereg dodatkowych elementów najwyższego poziomu, które usprawnić mają obsługę złożonych informacji graficznych, można na przykłady użyć elementu shapetype do zdefiniowania figury i następnie do takiej definicji się odwoływać w elemencie shape uzyskując wiele kopii takiego samego fragmentu rysunku.

Można też użyć szereg predefiniowanych figur opartych na elemencie shape. Użycie figur predefiniowanych oznacza, że nie jest konieczne ich definiowanie. Do takich figur należą line, polyline, curve, rect, roundrect, oval, arc i image.

Atrybuty wspólne

W informacji o VML wysłanej W3C znajdziesz fragmenty DTD tego języka (ale tylko fragmenty). Dwiema ważnymi częściami są encje parametryczne coreattrs i shapeattrs definiujące listy atrybutów, których używa wiele z omawianych w tym rozdziale elementów. Oto definicja encji coreattrs:

<!entity %coreattrs

id id #implied -- identyfikator niepowtarzalny w dokumencie --

class cdata #imlied -- lista klas rozdzielanych spacjami --

style cdata #imlied -- przypisane dane stylu --

title cdata #implied -- pomocniczy tytuł lub opis --

href cdata #implied -- URL wywoływany przy kliknięciu elementu --

target cdata #implied -- docelowa ramka dla href --

alt cdata #implied -- tekst, gdy nie można wyświetlić elementu --

coordsize cdata #implied -- wielkość współrzędnych w elemencie --

coordorigin cdata #implied -- współrzędne lewego górnego rogu --

wrapcoords cdata #implied -- do użycia przy przepełnieniu tekstem linii --

To z kolei definicja encji shapeattrs:

<!entity %shapeattrs

opacity cdata #implied -- nieprzezroczystość elementu --

chromakey cdata #implied - kolor, który będzie uważany za
przezroczysty--

stroke cdata #implied -- logiczna: czy obrysować figurę ramką --

strokecolor cdata #implied -- kolor RGB obrysowania --

strokeweight cdata #implied -- grubość linii obrysowującej --

fill cdata #implied -- logiczna: czy wypełniać figurę --

fillcolor cdata #implied -- kolor RGB wypełnienia --

print cdata #implied -- logiczna: czy element ma być drukowany --

Użycie CSS w VML

W VML używa się CSS do rozmieszczania figur. Oprócz stosowania standardowych właściwości CSS elementy VML podlegają także obracaniu i odwracaniu. Każdy element określa też własny układ współrzędnych dotyczących jego zawartości, co pozwala zawartość takiego elementu skalować odpowiednio do elementu zewnętrznego.

W VML użyto szeregu stylów VML stanowiących rozszerzenie CSS2, teraz się przyjrzymy tym elementom.

Właściwość rotation

Właściwości rotation można użyć do określenia obrotu figury lub grupy. Obrót mierzy się w stopniach dookoła środka zgodnie z ruchem wskazówek zegara.

Właściwość flip

Właściwości flip używa się do określenia, czy dana figura lub grupa mają być odbite względem osi x i y. Właściwość ta może mieć dwie wartości:

Wartość	Opis
x	Odbicie kształtu względem osi x.
y	Odbicie kształtu względem osi y.

Właściwości center-x i center-y

Właściwości center-x i center-y użyć można do wskazania środka bloku zawierającego kształt. Właściwości tych można użyć alternatywnie do zwyczajowego w CSS pozycjonowania właściwościami left i top.

Lokalna przestrzeń współrzędnych

Elementy shape i group są dla CSS elementami blokowymi. Wewnątrz bloków dla elementów zawartych w nich za pomocą atrybutów coordsize i coordorigin definiowany jest lokalny układ współrzędnych. Atrybuty te dokładniej omówimy dalej, kiedy będziemy mówić o grupowaniu figur.

Atrybut coordsize określa, ile jednostek składa się na szerokość bloku. Atrybut coordorigin określa współrzędną lewego górnego rogu bloku. Przyjrzyj się na przykład grupie zdefiniowanej następująco:

< shape style='width: 500px; height: 200px'

coordsize="100,100" coordorigin="-50,-50" />

Blok zawierający będzie miał 500 pikseli szerokości i 200 pikseli wysokości. Współrzędne będą zmieniały się od -50 do 50 wzdłuż osi x oraz od -50 do 50 wzdłuż osi y. Punkt (0,0) znajdzie się dokładnie pośrodku bloku. Figury wewnątrz grupy będą rozmieszczane i skalowane stosownie do takiego właśnie lokalnego układu współrzędnych. Jest to użyteczne, gdyż wzajemne proporcje pozostaną niezmienne niezależnie od zmian zewnętrznego bloku.

Element shape

Element shape jest jednym z najważniejszych elementów VML, choć można rzadko go praktycznie używać (zwykle wygodniej jest korzystać z predefiniowanych figur na nim opartych). Element ten może występować samodzielnie lub w elemencie group. Element ten zawiera oprócz atrybutów coreattrs i shapeattrs trzy atrybuty dodatkowe:

<!attlist shape %coreattrs; %spapeattrs;

type cdata #implied -- odwołanie do shapetype --

adj cdata #implied -- lista ustawień ścieżek parametrycznych --

path cdata #implied -- polecenia opisujące obrys --

Aby nasz wykład był kompletny, w tabeli 11.2 zestawiono wszystkie atrybuty tego elementu wraz z opisami. Zwróć uwagę na to, że atrybuty VML mogą należeć do przestrzeni nazw VML lub CSS.

Tabela 11.2.
Atrybuty elementu shape

Przestrzeń nazw	Atrybut	Typ	Wartość domyślna	Opis
CSS	flip	string	null	Określa, czy obrazek znajdujący się wewnątrz prostokąta odniesienia ma być odbity względem danej osi. Można użyć wartości x, y lub obu ich naraz.
CSS	height	number	100	Określa wysokość bloku zawierającego figurę.
CSS	left, margin-left, center-x itd.	number	0	Określa położenie lewej strony bloku zawierającego figurę.
CSS	position	string	static	Określa sposób pozycjonowania CSS. Kiedy znajduje się wewnątrz grupy, zawsze musi mieć wartość absolute.
CSS	rotation	number	0	Określa kąt, o który figura ma być obrócona.
CSS	top, margin-top, center-y itd.	number	0	Określa położenie górnego brzegu bloku zawierającego figurę.
CSS	visibility	string	visible	Określa widoczność figury.
CSS	width	number	100	Określa szerokość prostokąta zawierającego figurę.
CSS	z-index	number	0	Określa wyniesienie figury. Liczby dodatnie oznaczają „wysuwanie się” z ekranu, ujemne - cofanie.
VML	adj	string	null	Rozdzielana spacjami lista liczb stanowiących parametry dostosowujące formułę opisującą obrys figury (obrys często zwany jest też ścieżką).
VML	alt	string	null	Tekst mogący się pojawiać w miejsce figury.
VML	chromakey	color	null	Określa kolor, który będzie interpretowany jako przezroczysty.
VML	class	string	null	Określa klasę CSS figury.
VML	coordorigin	Vector2D	"0 0"	Współrzędne lewego górnego rogu bloku zawierającego figurę.
VML	coordsize	Vector2D	"1000 1000"	Określa szerokość i wysokość przestrzeni współrzędnych zawartej w bloku zawierającym figurę.
VML	fill	boolean	true	Jeśli ma wartość true, obrys figury będzie wypełniony.
VML	fillcolor	color	white	Określa kolor pędzla użytego wypełnienia obrysu figury.
VML	href	string	null	Określa adres URI, do którego należy wykonać przeskok po kliknięciu figury.
VML	id	string	null	Niepowtarzalny identyfikator figury.
VML	opacity	number	1.0	Stopień nieprzejrzystości figury. Przyjmuje wartości od 0 (przezroczysta) do 1 (całkowicie nieprzejrzysta).
VML	path	string	null	Określa obrys (ścieżkę) opisujący figurę; jest to napis zawierający polecenia definiujące ten obrys.
VML	print	boolean	true	Jeśli ma wartość true, figura będzie drukowana.
VML	stroke	boolean	true	Jeśli ma wartość true, obrys opisujący kształt będzie wykreślany ciągłą linią, chyba że zdefiniowany zostanie podelement stroke.
VML	strokecolor	color	black	Określa kolor używany do wykreślenia obrysu kształtu.
VML	strokeweight	number	0.75pt	Określa szerokość linii obrysu.
VML	target	string	null	Ramka docelowa dla podanego wcześniej URI (patrz: atrybut href).
VML	title	string	null	Nadaje figurze opis.
VML	type	string	null	Zawiera identyfikator typu figury (shapetype) opisującego figurę.
VML	v	string	null	Napis zawierający polecenia definiujące obrys.
VML	wrapcoords	string	null	Używany do wpisywania tekstu w figurę.

Microsoft wszystkim elementom przypisuje „szablony XML” określające wartości domyślne wszystkich atrybutów; oto szablon elementu shape:

<shape

type=null

adj=null

path=null

opacity="100%"

chromakey="none"

stroke="true"

strokecolor="black"

strokeweight="0.75pt"

fill="true"

fillcolor="white"

print="true"

id=null

class=null

style='visibility: visible'

title=null

href=null

target=null

alt=null

--> coordsize="1000 1000"[Author:T]

coordorigin="0 0"

wrapcoords=null

Użycie elementu shape do rysowania figur może być dość skomplikowane, gdyż konieczne jest samodzielne zdefiniowanie całej figury przez zapisanie obrysu VML. Zrobienie tego oznacza podanie położenia kolejnych punktów opisujących kształt figury. Poniżej pokazano przykład podany przez Microsoft wykreślający serce:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Figury VML - shape

</H1>

<v:shape fillcolor="red"

strokecolor="red" coordsize="21600,21600"

path="m10860,2187c10451,1746,9529,1018,9015,730,

7865,152,6685,,5415,,4175, 152,2995,575,1967,

1305,1150,2187,575,3222,242,4220,,5410,242,6560,

575,7597l10860, 21600,20995,7597c21480,6560,

21600,5410,21480,4220,21115,3222,20420,2187,19632,

1305,18575,575,17425,152,16275,,15005,,13735,152,

12705,730,12176,1018,11254,1746, 10860,2187xe"

style='width:200;height:160;'/>

</CENTER>

</BODY>

</HTML>

Wyniki pokazano na rysunku 11.2.

Rysunek 11.2.

Użycie elementu shape

0x01 graphic

Innym sposobem rysowania figury jest określenie obrysu za pomocą elementu shapetype i następnie odwoływanie się do jego identyfikatora w atrybucie type elementu shape:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Figury VML - shape

</H1>

<v:shapetype id="Walentynka" fillcolor="red"

strokecolor="red" coordsize="21600,21600"

path="m10860,2187c10451,1746,9529,1018,9015,730,

7865,152,6685,,5415,,4175, 152,2995,575,1967,

1305,1150,2187,575,3222,242,4220,,5410,242,6560,

575,7597l10860, 21600,20995,7597c21480,6560,

21600,5410,21480,4220,21115,3222,20420,2187,19632,

1305,18575,575,17425,152,16275,,15005,,13735,152,

12705,730,12176,1018,11254,1746, 10860,2187xe"

style='width:200;height:160;'/>

</v:shapetype>

<v:shape type="#Walentynka" style='width=200;height:160;'/>

</CENTER>

</BODY>

</HTML>

Jeśli jednak nie masz żadnego narzędzia do rysowania, określanie punktów obrysu jest zadaniem bardzo niewdzięcznym i zwykle lepiej i szybciej jest użyć figur predefiniowanych.

Użycie figur predefiniowanych

W VML istnieje sporo predefiniowanych figur, których użycie może zaoszczędzić mnóstwo pracy. W tej części rozdziału omówimy użycie odpowiednich elementów.

Element rect

Element rect służy do wykreślania prostokątów. Obsługiwane są atrybuty coreattrs i shapeattrs; oto szablon XML opisujący wartości domyślne jego atrybutów:

<rect

id=null

href=null

target=null

class=null

title=null

alt=null

style='visibility: visible'

opacity="1.0"

chromakey="null"

stroke="true"

strokecolor="black"

strokeweight="1"

fill="true"

fillcolor="white"

print="true"

coordsize="1000 1000"

coordorigin="0 0"

Oto przykład użycia elementu rect - wykreślamy czerwony prostokąt z zieloną obwódką grubości czterech punktów:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Prostokąty w VML

</H1>

<v:rect style='width:200pt;height:100pt'

fillcolor="red" strokecolor="green"

strokeweight="4pt"/>

</CENTER>

</BODY>

</HTML>

Wyniki pokazano na rysunku 11.3.

Rysunek 11.3.

Użycie elementu rect

0x01 graphic

Element roundrect

Elementu roundrect można użyć do wykreślania prostokątów z zaokrąglonymi narożnikami. Element ten obsługuje atrybuty coreattrs i shapeattrs oraz dodatkowy atrybut arcsize:

<!attlist roundrect %coreattrs; %shapeattrs;

arcsize cdata #implied -- wielkość łuku narożników --

Atrybut arcsize określa zaokrąglenie narożników jako procent połowy mniejszego wymiaru prostokąta. Oto szablon XML omawianego elementu:

<roundrect

arcsize="0.2"

id=null

href=null

target=null

class=null

title=null

alt=null

style='visibility: visible'

opacity="1.0"

chromakey="null"

stroke="true"

strokecolor="black"

strokeweight="0.75pt"

fill="true"

fillcolor="white"

print="true"

coordsize="1000 1000"

coordorigin="0 0"

Jako przykład pokażemy prostokąt z poprzedniego przykładu po zaokrągleniu narożników łukiem o wymiarze 20% krótszego boku prostokąta:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Prostokąty z zaokrąglonymi rogami w VML

</H1>

<v:roundrect style='width:200pt;height:100pt'

arcsize="0.2" fillcolor="red"

strokecolor="green" strokeweight="4pt"/>

</CENTER>

</BODY>

</HTML>

Wyniki pokazano na rysunku 11.4.

Rysunek 11.4.

Użycie elementu roundrect

0x01 graphic

Element line

Elementu line używa się do wykreślania odcinków. Oto atrybuty tego elementu:

<!attlist line %coreattrs; %shapeattrs;

from cdata #implied

to cdata #implied

Dodatkowe dwa atrybuty mają znaczenie następujące:

Atrybut	Opis
from	Punkt początkowy odcinka podawany w formacie Vector2D, na przykład "100 100".
to	Punkt końcowy odcinka podawany w formacie Vector2D, na przykład "100 100".

Oto szablon XML elementu line:

<line

from="0 0"

to="10 10"

id=null

href=null

target=null

class=null

title=null

alt=null

style='visibility: visible'

opacity="1.0"

chromakey="null"

stroke="true"

strokecolor="black"

strokeweight="1pt"

fill="true"

fillcolor="white"

print="true"

coordsize="1000 1000"

coordorigin="0 0"

Oto przykład - wykreślimy grubą niebieską linię z punktu (20,20) do punktu (400,100):

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

--> <CENTER>[Author:T]

<H1>

Odcinki w VML

</H1>

</CENTER>

<v:line from="20px 20px" to="400px 100px"

strokecolor="blue" strokeweight="4pt"/>

</BODY>

</HTML>

Wyniki pokazano na rysunku 11.5.

Rysunek 11.5.

Użycie elementu line

0x01 graphic

Element oval

Elementu oval używa się do rysowania elips i kół. Obsługiwane są atrybuty coreattrs i shapeattrs. Oto szablon XML elementu oval:

<oval

position="0 0"

size="100 100"

id=null

href=null

target=null

class=null

title=null

alt=null

style='visibility: visible'

opacity="1.0"

chromakey="null"

stroke="true"

strokecolor="black"

strokeweight="0.75pt"

fill="true"

fillcolor="white"

print="true"

coordsize="1000 1000"

coordorigin="0 0"

W poniższym przykładzie wykreślamy niebieską elipsę jak zwykle korzystając z atrybutu CSS style:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Elipsy w VML

</H1>

<v:oval style='width:200pt;height:100pt'

fillcolor="blue"/>

</CENTER>

</BODY>

</HTML>

Wyniki pokazano na rysunku 11.6.

Rysunek 11.6.

Użycie elementu oval

0x01 graphic

Element polyline

Elementu polyline używa się do definiowania figur tworzonych z łamanych. Elementu tego można użyć do tworzenia własnych figur, ma następujące atrybuty:

<!attlist polyline %coreattrs; %shapeattrs;

points cdata #implied

Atrybut points określa punkty, przez które przechodzi łamana i ma postać rozdzielanej spacjami listy współrzędnych, na przykład "0 0 10 10 40 40". Oto szablon XML tego elementu:

<polyline

points="0 0 10 10 20 0"

id=null

href=null

target=null

class=null

title=null

alt=null

style='visibility: visible'

opacity="1.0"

chromakey="null"

stroke="true"

strokecolor="black"

strokeweight="0.05pt"

fill="true"

fillcolor="white"

print="true"

coordsize="1000 1000"

coordorigin="0 0"

Oto przykładowy kod VML wykreślający łamaną:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Łamane VML

</H1>

<v:polyline points="0pt 0pt 90pt -9pt 180pt 60pt 0pt 20pt

-180pt 60pt -90pt -9pt 0pt 0pt"

strokecolor="red" strokeweight="2pt"/>

</CENTER>

</BODY>

</HTML>

Wyniki pokazano na rysunku 11.7.

Rysunek 11.7.

Użycie elementu polyline

0x01 graphic

Element curve

Elementu curve używa się do wykreślania krzywych Bèzier trzeciego stopnia. Oto atrybuty tego elementu:

<!attlist curve %coreattrs; %shapeattrs;

from cdata #implied

control1 cdata #implied

control2 cdata #implied

to cdata #implied

Dodatkowe atrybuty mają znaczenie następujące:

Atrybut	Opis
from	Punkt początkowy krzywej w przestrzeni współrzędnych elementu nadrzędnego w formacie Vector2D, na przykład "100 100".
control1	Pierwszy punkt kontrolny krzywej w formacie Vector2D, na przykład "100 100".
control2	Drugi punkt kontrolny krzywej w formacie Vector2D, na przykład "100 100".
to	Punkt końcowy krzywej w przestrzeni współrzędnych elementu nadrzędnego w formacie Vector2D, na przykład "100 100".

Punkty kontrolne pozwalają określić prostokąt otaczający krzywą i opisać jej kształt. Oto szablon XML elementu:

<curve

from="0 0"

control1="10 10"

control2="20 0"

to="10 10"

id=null

href=null

target=null

class=null

title=null

alt=null

style='visibility: visible'

opacity="1.0"

chromakey="null"

stroke="true"

strokecolor="black"

strokeweight="1"

fill="true"

fillcolor="white"

print="true"

coordsize="1000 1000"

coordorigin="0 0"

Oto przykład wykreślania krzywej w VML:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Krzywe VML

</H1>

<v:curve style='position:absolute'

from="-100pt 0" control1="100pt 100pt"

control2="200pt 100pt" to="100pt 0"

strokecolor="blue" strokeweight="4pt"/>

</CENTER>

</BODY>

</HTML>

Wyniki pokazano na rysunku 11.8.

Rysunek 11.8.

Użycie elementu curve

0x01 graphic

Element arc

Elementu arc używa się do wykreślania łuku. Łuk zdefiniowany jest przez przecięcie elipsy z wektorami promienia początkowego i końcowego, przy czym położenie promieni określa się kątowo. Oto atrybuty tego elementu:

<!attlist arc %coreattrs; %shapeattrs;

startangle cdata #implied

endangle cdata #implied

Dodatkowe dwa atrybuty mają znaczenie następujące:

Atrybut	Opis
startangle	Określa kąt początkowy łuku.
endangle	Określa kąt końcowy łuku.

oto szablon XML tego elementu:

<arc

startangle="0"

endangle="90"

id=null

href=null

target=null

class=null

title=null

alt=null

style='visibility: visible'

opacity="1.0"

chromakey="null"

stroke="true"

strokecolor="black"

strokeweight="0.75pt"

fill="true"

fillcolor="white"

print="true"

coordsize="1000 1000"

coordorigin="0 0"

Poniżej pokazano rysowanie łuku eliptycznego rozciągającego się od 0° do 160°:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Łuki w VML

</H1>

<v:arc style='width:200pt;height:100pt'

startangle="0" endangle="160"

strokecolor="blue" strokeweight="4pt"/>

</CENTER>

</BODY>

</HTML>

Wyniki pokazano na rysunku 11.9.

Rysunek 11.9.

Użycie elementu arc

0x01 graphic

Kolorowanie figur

Być może zauważyłeś, że kolory określaliśmy podając ich angielskie nazwy, na przykład red, blue czy green. Jednak w VML kolory można określać na trzy sposoby:

Za pomocą predefiniowanej nazwy koloru: fillcolor="red".
Za pomocą funkcji rgb: fillcolor="rgb(255,0,0)".
Podając wartość bezpośrednio: fillcolor="#FF0000".

W VML można używać wszystkich kolorów predefiniowanych z HTML 4.0:

aqua	navy
black	olive
blue	purple
fuchsia	red
gray	silver
green	teal
lime	white
maroon	yellow

Kolory można też określać za pomocą funkcji rgb podając składowe koloru: rgb(rrr,ggg,bbb). rrr, ggg i bbb to liczby od 0 do 255 określające składowe odpowiednio czerwonego, zielonego i niebieskiego. Można w końcu podawać kolor bezpośrednio stosując zapis #rrggbb, jak w HTML. Znaczenie rr, gg i bb jest takie samo, ale tym razem podajemy je jako liczby szesnastkowe od 0 do FF. Na przykład #000000 oznacza kolor czarny, #0000FF jasnoniebieski, zaś #FFFFFF biały.

Skalowanie figur

Być może zauważyłeś, że rozmiar figur można określać stosując atrybut style, tak jak to robiliśmy w przypadku określania prostokąta, w którym zawarta jest elipsa:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Elipsy w VML

</H1>

<v:oval style='width:200pt;height:100pt'

fillcolor="blue"/>

</CENTER>

</BODY>

</HTML>

Jeśli chcesz skalować figurę, wystarczy zmienić jej szerokość i wysokość w atrybucie style. Aby na przykład podwoić wielkość naszej elipsy w obu osiach, należałoby przypisać atrybutowi style wartość width:400pt;height;200pt.

Rozmieszczanie figur

W VML do rozkładania figur na stronach sieciowych używa się takiej samej składni, jak w CSS2. Można użyć rozmieszczania statycznego, względnego lub bezwzględnego. Do określenia przesunięcia punktu bazowego prostokąta z pozycjonowaną figurą można użyć właściwości top i left lub center-x i center-y.

Właściwości z-index można użyć do określenia „wysokości” figury na stronie. Oprócz tego właściwości rotate i flip umożliwiają obracanie i odbijanie figur. Teraz przyjrzymy się kolejno wszystkim możliwościom.

Styl rozmieszczania static

Domyślnym stylem rozmieszczania jest static, co oznacza wstawianie figury w bieżącym punkcie, w którym normalnie byłby pisany dalszy ciąg tekstu. Oto przykład użycia takiego rozmieszczania, kiedy rysujemy prostokąt zaraz za fragmentem tekstu:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Pozycjonowanie typu <I>static</I>

</H1>

Oto prostokąt:

<v:rect style='width:200pt;height:100pt'

fillcolor="red" strokecolor="green"

strokeweight="4pt"/>

</CENTER>

</BODY>

</HTML>

Wyniki pokazano na rysunku 11.10. Jak widać, podstawa figury została wyrównana do linii bazowej tekstu.

Rysunek 11.10.

Użycie rozmieszczania statycznego

0x01 graphic

Styl rozmieszczania relative

W przypadku rozmieszczania statycznego figura jest pozycjonowana w bieżącym strumieniu tekstu. Można też figury rozmieszczać względem bieżącego tekstu. W tym celu należy użyć stylu position:relative i użyć właściwości top i left.

Oto przykład, kiedy prostokąt umieszczamy 30 punktów na lewo od bieżącej pozycji tekstu i 15 punktów wyżej:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Pozycjonowanie typu <I>relative</I>

</H1>

Oto prostokąt:

<v:rect style='position:relative;left:30pt;

top:-15pt;width:200pt;height:100pt'

fillcolor="red" strokecolor="green"

strokeweight="4pt"/>

</CENTER>

</BODY>

</HTML>

Wynik pokazano na rysunku 11.11.

Rysunek 11.11.

Użycie rozmieszczania względnego

0x01 graphic

Styl rozmieszczania absolute

Elementy można w końcu rozmieszczać posługując się położeniem bezwzględnym. Jeśli nadasz właściwości position wartość absolute, figura będzie rozmieszczana względem lewego górnego rogu obiektu ją zawierającego. Do określania położenia używa się właściwości top i left.

Oto przykład, kiedy umieszczamy prostokąt 100 punktów od górnego brzegu i od brzegu lewego obiektu nadrzędnego - tym razem jest nim całe okno dokumentu w przeglądarce:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Pozycjonowanie typu <I>absolute</I>

</H1>

Oto prostokąt:

<v:rect style='position:absolute;left:100pt;

top:100pt;width:200pt;height:100pt'

fillcolor="red" strokecolor="green"

strokeweight="4pt"/>

</CENTER>

</BODY>

</HTML>

Wyniki pokazano na rysunku 11.12. Pamiętaj, że w przypadku bezwzględnego rozmieszczania figur nie należą one do strumienia tekstu.

Rysunek 11.12.

Użycie rozmieszczania bezwzględnego

0x01 graphic

Styl rozmieszczania z-index

Figury można tak rozmieszczać, aby na siebie zachodziły wzajemnie. W VML do określenia wysokości położenia figury służy atrybut z-index. Wartościami tego atrybutu mogą być zero, liczby całkowite dodatnie lub ujemne. Na wierzchu pojawiają się zawsze figury z wyższymi wartościami parametru z-index, a jeśli dwie figury mają taką samą wartość, to wyżej pojawia się figura wykreślona jako ostatnia.

W następnym przykładzie wyświetlamy niebieską elipsę na czerwonym prostokącie - wartość z-index elipsy jest większa od z-index prostokąta:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Pozycjonowanie w pionie

</H1>

<v:rect style='position:absolute;left:100pt;

top:100pt;width:200pt;height:100pt;z-index:0'

fillcolor="red" strokecolor="green"

strokeweight="4pt"/>

<v:oval style='position:absolute;left:150pt;top:60pt;

width:100pt;height:100pt;z-index:1'

fillcolor="blue"/>

</CENTER>

</BODY>

</HTML>

Wyniki pokazano na rysunku 11.13.

Rysunek 11.13.

Użycie pozycjonowania z-index

0x01 graphic

Jeśli zamienimy wartości właściwości z-index niebieska elipsa schowa się za czerwony prostokąt:

<v:rect style='position:absolute;left:100pt;

top:100pt;width:200pt;height:100pt;z-index:1'

fillcolor="red" strokecolor="green"

strokeweight="4pt"/>

<v:oval style='position:absolute;left:150pt;top:60pt;

width:100pt;height:100pt;z-index:0'

fillcolor="blue"/>

Wynik pokazano na rysunku 11.14.

Rysunek 11.14.

Zamiana wartości z-index

0x01 graphic

Figury o dodatnich wartościach z-index traktuje się jako wychodzące z ekranu, o wartościach ujemnych jako schowane za ekranem. Użycie wartości ujemnych pozwala umieszczać figury za zwykłym tekstem.

Styl rozmieszczania rotation

Właściwości rotation można użyć do wskazania, o ile stopni figura ma zostać obrócona. Wartości dodatnie oznaczają obrót zgodnie z ruchem wskazówek zegara, ujemne - przeciwnie.

Na przykład zapis style='rotation:45' spowoduje obrócenie naszego prostokąta o 45° zgodnie z ruchem wskazówek zegara:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Pozycjonowanie <I>rotation</I>

</H1>

<v:rect style='position:absolute;left:100pt;

top:100pt;width:200pt;height:100pt;rotation:45'

fillcolor="red" strokecolor="green"

strokeweight="4pt"/>

</CENTER>

</BODY>

</HTML>

Wyniki pokazano na rysunku 11.15.

Rysunek 11.15.

Pozycjonowanie rotation

0x01 graphic

Style rozmieszczania flip

Atrybutu stylu flip można użyć do odbicia figury względem osi x lub osi y. Oto domyślne dopuszczalne jej wartości:

Wartość	Opis
x	Odbicie obróconej figury względem osi y.
y	Odbicie obróconej figury względem osi x.

Można użyć wartości x, wartości y lub ich obu. Jeśli napisze style='flip:x y', figura zostanie odbita względem obu osi. Jako przykład pokazano odbicie figury z rysunku 11.7. względem osi y:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Pozycjonowanie z atrybutem <I>flip</I>

</H1>

<v:polyline points="0pt 0pt 90pt -9pt 180pt 60pt 0pt 20pt

-180pt 60pt -90pt -9pt 0pt 0pt"

style="flip: y"

strokecolor="red" strokeweight="2pt"/>

</CENTER>

</BODY>

</HTML>

Wynik pokazano na rysunku 11.16.

Rysunek 11.16.

Pozycjonowanie z odbiciem

0x01 graphic

Element group

Figury można grupować elementem group, wtedy można się do całej grupy odnosić jak do całości. Element group obsługuje atrybuty coreattrs, oto jego szablon XML:

<group

id=null

class=null

style='visibility: visible'

title=null

href=null

target=null

alt=null

corrdsize="1000 1000"

coordorigin="0 0"

wrapcoords=null

Oto przykład: grupujemy w całość prostokąt i elipsę:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Grupowanie elementów w VML

</H1>

<v:group id="Grupa1" style='position:absolute;

left:150pt;top:60pt;width:200pt;height:100pt'

coordsize="100 100">

</v:group>

</CENTER>

</BODY>

</HTML>

Figury zgrupowane można pozycjonować razem, więc podamy położenie bezwzględne i rozmiary całej grupy za pomocą atrybutu style elementu group.

I tu dochodzimy do ważnego punktu - w przypadku grupy figur używany jest układ współrzędnych grupy, gdyż grupa wszystkie figury w sobie zawiera. Do określenia współrzędnych grupy używa się atrybutów coordsize i coordorigin. Domyślnie początkiem jest punkt (0,0), zaś cały układ współrzędnych ma wymiary 1000x1000 (wymiary te nie mają jednostek, są to po prostu jednostki względne podawane jako same liczby).

W poniższym przykładzie określamy rozmiar układu współrzędnych na 100x100 i dalej figury wewnątrz grupy tworzyć będziemy w takich właśnie współrzędnych:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Grupowanie elementów w VML

</H1>

<v:group id="Grupa1" style='position:absolute;

left:150pt;top:60pt;width:200pt;height:100pt'

coordsize="100 100">

<v:rect

fillcolor="red" strokecolor="green"

style='width:50;height:50'

strokeweight="4pt" />

<v:oval

fillcolor="blue"

style='width:50;height:50' />

</v:group>

</CENTER>

</BODY>

</HTML>

Wyniki pokazano na rysunku 11.17. Grupa figur traktowana jest jako całość, co ułatwia ich rozmieszczanie i skalowanie.

Rysunek 11.17.

Grupowanie elementów

0x01 graphic

Element shadow

Elementu shadow używa się do dodania figurom VML cienia, można też tworzyć efekt wytłoczenia lub podwójnych cieni. Oto lista atrybutów tego elementu:

<!attlist shadow

id id #implied -- identyfikator niepowtarzalny w dokumencie --

on cdata #implied

type cdata #implied

obscured cdata #implied

color cdata #implied

opacity cdata #implied

offset cdata #implied

color2 cdata #implied

offset2 cdata #implied

origin cdata #implied

matrix cdata #implied

Opis tych atrybutów podano w tabeli 11.3.

Tabela 11.3.
Atrybuty elementu shadow

Przestrzeń nazw	Atrybut	Typ	Wartość domyślna	Opis
VML	color	boolean	gray RGB(128,128,128)	Określa kolor pierwszego cienia.
VML	color2	boolean	gray RGB(203,203,203)	Określa kolor drugiego cienia lub wyróżnienia cienia wytłaczanego.
VML	id	string	null	Przypisuje cieniowi niepowtarzalny identyfikator.
VML	matrix	string	null	Macierz przekształcenia perspektywicznego w postaci "scalexx,scalexy,scaleyx,scaleyy,perspectivex,perspectivey". Jednostki są odwrotnościami rozmiaru figury.
VML	obscured	boolean	false	Określa, czy cień jest widoczny w przypadku niewypełnienia figury.
VML	offset	vector2D	2pt,2pt	Odsunięcie cienia od figury.
VML	offset2	vector2D	0pt,0pt	Odsunięcie wtórnego cienia od figury.
VML	on	Boolean	true	Służy do włączania i wyłączania cienia.
VML	opacity	number	1.0	Określa stopień nieprzezroczystości cienia.
VML	origin	vector2D	0,0	Określa początek układu współrzędnych. Podawany jako liczby ułamkowe.
VML	type	string	single	Rodzaj cienia, może być to single, double, emboss lub perspective (odpowiednio pojedynczy, podwójny, wytłaczany, perspektywiczny).

Oto szablon XML tego elementu:

<shadow

id=null

on="false"

type="single"

obscured="false"

color="rgb(128,128,128)"

opacity="1.0"

offset="2pt,2pt"

color2="rgb(203,203,203)"

opacity2="1.0"

offset2="0pt,0pt"

origin="0,0"

matrix=null

</shadow>

Element shadow umieszcza się wewnątrz elementów shape, shapetype lub dowolnej figury predefiniowanej, powoduje on dorysowanie figurze cienia. Najtrudniejszym zadaniem związanym z tworzeniem cienia jest zdefiniowanie macierzy przekształcenia perspektywicznego, która wskazuje sposób tworzenia cienia. W podanym przykładzie utworzono macierz powodującą wykreślenie cienia prostokąta skierowanego w górę i w prawo pod kątem 45°:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Cienie w VML

</H1>

<v:rect style='width:120pt;height:100pt;'

fillcolor="blue">

<v:shadow on="true" type="perspective"

origin=".5,.5"

matrix="1,-1,0,1,0,-5e-7"/>

</v:rect>

</CENTER>

</BODY>

</HTML>

Wyniki pokazano na rysunku 11.18 - cień rzucany przez prostokąt jest wynikiem zastosowania źródła świata w lewym dolnym rogu ekranu, z przodu.

Rysunek 11.18.

Tworzenie cieni w VML

0x01 graphic

Element fill

Jak już pokazano, atrybutu fill można użyć do wypełniania figur kolorem. Tak samo działa element fill, tyle tylko że element ten zamyka się w znacznikach odpowiednich figur. Oto lista atrybutów elementu fill:

<!attlist fill

id id #implied -- identyfikator niepowtarzalny w dokumencie --

type cdata #implied

on cdata #implied

color cdata #implied

color2 cdata #implied

opacity cdata #implied

src cdata #implied

size cdata #implied

origin cdata #implied

position cdata #implied

alignshape cdata #implied

colors cdata #implied

angle cdata #implied

focus cdata #implied

focussize cdata #implied

focusposition cdata #implied

method cdata #implied

Znaczenie poszczególnych atrybutów opisano w tabeli 11.4.

Tabela 11.4.
Atrybuty elementu fill

Przestrzeń nazw	Atrybut	Typ	Wartość domyślna	Opis
VML	alignshape	Boolean	true	Jeśli ma wartość true, cień jest wyrównywany do figury; w przeciwnym wypadku cień jest wyrównywany względem okna.
VML	angle	number	"0"	Określa kąt skierowania wektora wypełnienia cieniowanego.
VML	aspect	string	"ignore"	Użycie wartości ignore oznacza pominięcie poprawek związanych z aspektem, atleast oznacza, że obrazek jest co najmniej wielkości imageSize, zaś atmost oznacza, że obrazek nie jest większy niż imageSize.
VML	color	color	"white"	Określa kolor wypełnienia.
VML	color2	color	"white"	Określa wtórny kolor wypełnienia stosowany w przypadku użycia wzorów wypełnienia.
VML	colors	string	null	Określa kolory pośrednie cieniowania, na przykład "20% red, 60% blue, 80% green".
VML	focus	number	"0"	Określa punkt skupienia tonalnego wypełnienia liniowego; dopuszczalne wartości mieszczą się między -100 a 100.
VML	focusposition	Vector2D	0,0	W przypadku wypełnień tonalnych radialnych określa położenie prostokąta najbardziej wewnętrznego.
VML	focussize	Vector2D	0,0	W przypadku wypełnień tonalnych radialnych określa rozmiar najbardziej wewnętrznego prostokąta.
VML	id	string	null	Podaje niepowtarzalny identyfikator figury.
VML	method	string	"sigma"	Określa metodę wypełniania, może przybierać wartości none, linear, sigma lub any.
VML	on	boolean	true	Włącza lub wyłącza wyświetlanie wypełnienia.
VML	opacity	number	1.0	Określa stopień nieprzejrzystości wypełnienia.
VML	origin	Vector2D	"auto"	Określa początek układu współrzędnych względem lewego górnego rogu obrazka. Domyślnie ustawiany pośrodku obrazka.
VML	position	Vector2D	"auto"	Punkt odniesienia prostokąta figury używanego do pozycjonowania układu odniesienia obrazka. Podawany jako ułamek rozmiaru obrazka.
VML	size	Vector2D	"auto"	Określa rozmiar obrazka.
VML	src	string	null	Określa adres URI w przypadku wypełniania obrazkami lub wzorami.
VML	type	string	"solid"	Określa sposób wypełnienia. Może przybierać wartości solid, gradient, gradientradial, title, pattern lub frame.

Oto szablon XML opisywanego elementu:

<fill

id=null

type="solid"

on="true"

color="white"

opacity="1.0"

color2="white"

opacity2="1.0"

src=null

size="auto"

origin="center"

position="center"

aspect="ignore"

alignshape="true"

colors=null

angle="0"

focus="0"

focussize="0,0"

focusposition="0,0"

method="sigma"

Tworzyć można różne rodzaje wypełnień: tonalne (cieniowane), wypełnienia wzorcami czy obrazkami.

Generowanie wypełnień cieniowanych

Aby utworzyć figurę cieniowaną, należy atrybut type odpowiedniego elementu fill ustawić na wartość gradient lub gradientradial i następnie określić pozostałe atrybuty, takie jak method, color2, focus i angle. Oto przykład - tworzymy owal cieniowany w sposób standardowy:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Wypełnienia tonalne

</H1>

<v:oval style='width:200pt;height:100pt'

fillcolor="blue" strokecolor="white">

<v:fill method="linear sigma" angle="45"

type="gradient" />

</v:oval>

</CENTER>

</BODY>

</HTML>

Wyniki pokazano na rysunku 11.19:

Rysunek 11.19.

Wypełnienie tonalne

0x01 graphic

Kolejną możliwością wypełniania jest użycie typu gradientradial, w przypadku którego wypełnienie tonalne jest ułożone radialnie. W poniższym przykładzie wypełniamy w ten sposób prostokąt:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Wypełnienia tonalne po łukach

</H1>

<v:rect style='width:200pt;height:100pt'

fillcolor="blue" strokecolor="white">

<v:fill method="linear sigma" angle="45"

type="gradientradial" />

</v:rect>

</CENTER>

</BODY>

</HTML>

Wyniki pokazano na rysunku 11.20.

Rysunek 11.20.

Radialne wypełnienie tonalne

0x01 graphic

Można w końcu określić początek układu odniesienia wypełnień tonalnych, w poniższym przykładzie jako ten początek ustawimy pośrodku prostokąta, dzięki czemu uzyskamy naprawdę ciekawy efekt:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Wypełnienia tonalne po łukach

</H1>

<v:rect style='width:200pt;height:100pt'

fillcolor="blue" strokecolor="white">

<v:fill method="linear sigma" angle="45"

focus="100%" focusposition=".5,.5" focussize="0,0"

type="gradientradial" />

</v:rect>

</CENTER>

</BODY>

</HTML>

Wyniki pokazano na rysunku 11.21.

Rysunek 11.21.

Wypełnienie radialne z początkiem układu współrzędnych pośrodku prostokąta

0x01 graphic

Tworzenie wzorów wypełnienia

Aby narysować figurę wypełnioną wzorem, należy ustawić atrybut type elementu fill na wartość pattern, a następnie nadać właściwości src adres URI pliku z obrazkiem. Oto na przykład prostokąt wypełniony bąbelkami (wzór ten jest dystrybuowany wraz z systemem Windows jako Bąbelki.bmp; konieczna było jego konwersja na format GIF zrozumiały dla Internet Explorera):

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Wypełnienia wzorem

</H1>

<v:rect style='width:200pt;height:100pt'

fillcolor="blue">

<v:fill type="pattern" src="Bąbelki.gif"/>

</v:rect>

</CENTER>

</BODY>

</HTML>

Zwróć uwagę, że wskazaliśmy także żądany kolor (oryginalnie obrazek jest czarno biały). Wyniki pokazano na rysunku 11.22, gdzie widać, że obrazek z bąbelkami jest wielokrotnie powtórzony, aby pokryć cały prostokąt.

Rysunek 11.22.

Wypełnienie wzorem

0x01 graphic

Tworzenie wypełnień obrazkami

Aby wykreślić figurę wypełnioną obrazkiem, należy ustawić atrybut type elementu fill na wartość frame, a wartości src przypisać adres URI używanego obrazka. Oto przykład, w którym wyświetlamy obrazek --> delfiny.jpg[Author:T] :

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Wypełnienia obrazkiem

</H1>

<v:rect style='width:150pt;height:150pt'>

<v:fill type="frame" src="delfiny.jpg"/>

</v:rect>

</CENTER>

</BODY>

</HTML>

Wyniki pokazano na rysunku 11.23 - obrazek jest tak rozciągany i zwężany, aby nadać mu wymiary prostokąta zadeklarowane w VML.

Rysunek 11.23.

Wypełnienie obrazkiem

0x01 graphic

Użycie elementu shapetype

Tworzenie figur można sparametryzować za pomocą elementu shapetype. Element ten określa rodzaj figury i później rodzaj ten można przypisywać tworzonym figurom. Tworząc taki rodzaj nadaje mu się niepowtarzalny identyfikator, następnie do tego identyfikatora odwołuje się w atrybucie type elementu shape.

Oto lista atrybutów elementu shapetype:

<!attlist shapetype %coreattrs; %shapeattrs;

adj cdata #implied -- lista wartości dostosowujących --

path cdata #implied -- zestawienie poleceń kreślenia obrysu --

Oto znaczenie specjalizowanych atrybutów tego elementu:

Atrybut	Opis
adj	Lista rozdzielonych przecinkami parametrów liczbowych dostosowujących formuły opisujące obrys figury.
path	Obrys decydujący o postaci figury; napis zawiera polecenia ten obrys wykreślające.

Oto szablon XML elementu shapetype:

<shapetype

adj=null

path=null

opacity="100%"

chromakey="none"

stroke="true"

strokecolor="black"

strokeweight="0.75pt"

fill="true"

fillcolor="white"

print="true"

id=null

class=null

style='visibility: visible'

title=null

href=null

target=null

alt=null

coordsize="1000 1000"

coordorigin="0 0"

wrapcoords=null

W tym rozdziale widzieliśmy już przykład definiowania figury przez atrybut path:

<v:shapetype id="Walentynka" fillcolor="red"

strokecolor="red" coordsize="21600,21600"

path="m10860,2187c10451,1746,9529,1018,9015,730,

7865,152,6685,,5415,,4175, 152,2995,575,1967,

1305,1150,2187,575,3222,242,4220,,5410,242,6560,

575,7597l10860, 21600,20995,7597c21480,6560,

21600,5410,21480,4220,21115,3222,20420,2187,19632,

1305,18575,575,17425,152,16275,,15005,,13735,152,

12705,730,12176,1018,11254,1746, 10860,2187xe"

style='width:200;height:160;'/>

</v:shapetype>

Powyższy obrys opisuje figurę. Definiowanie obrysu jest zadaniem dość skomplikowanym; podaje się pary punktów występujące kolejno na obrysie używając poleceń takich jak m (początek obrysu), x (zamknięcie obrysu), e (zakończenie obrysu) i tak dalej. Dostępne polecenia zestawiono w tabeli 11.5. Tabela ta też wskazuje, ile parametrów należy poszczególnym poleceniom podawać w notacji DTD, na przykład 2* oznacza dowolną liczbę par argumentów. Wskazując punkty można pomijać zera, zatem zapis 16275,,15005,,13735,152 jest równoważny zapisowi 16275,0,15005,0,13735,152.

Tabela 11.5.
Polecenia używane w atrybucie path

Polecenie	Nazwa	Parametry	Opis
ae	angleellipseto	6*	center(x,y), size(w,h), start-angle, end-angle - wykreślany jest wycinek elipsy.
al	angleellipse	6*	Ma takie samo znaczenie jak angleellipseto, ale zakłada się przesunięcie do punktu początkowego odcinka.
ar	arc	8*	left, top, right, bottom, start(x,y), end(x,y). Ma takie samo znaczenie jak arcto, ale nowy podobrys zaczynany jest od niejawnego przesunięcia do punktu początkowego.
at	arcto	8*	left, top, right, bottom, start(x,y), end(x,y). Pierwsze cztery parametry określają prostokąt otaczający elipsę, następne cztery dwa wektory promieni tej elipsy. Polecenie rysuje wycinek elipsy od kąta określonego pierwszym wektorem do kąta określonego drugim wektorem.
c	curveto	6*	Wykreśla sześcienną krzywą Bèziera z punktu bieżącego do punktu określonego dwoma ostatnimi parametrami. Pierwsze cztery parametry to punkty kontrolne.
e	end	0	Kończy bieżący zestaw podobrysów.
l	lineto	2*	Wykreśla łamaną od punktu bieżącego do kolejnych podawanych punktów.
m	moveto	2	Rozpoczyna nowy podobrys od podanego punktu.
nf	nofill	0	Zapewnia, że bieżący zestaw podobrysów nie zostanie wypełniony.
ns	nostroke	0	Zapewnia, że bieżący zestaw podobrysów nie będzie wykreślany.
qb	quadraticbezier	2+2*	(controlpoint(x,y))*, end(x,y) - Definiuje jedną lub więcej kwadratowych krzywych Bèziera o podanych punktach kontrolnych i punkcie końcowym.
qx	--> ellipticalquadrantx[Author:T]	2*	end(x,y) - wykreśla --> ćwiartkę elipsy[Author:T] z punktu bieżącego poziomo do punktu końcowego.
qy	ellipticalquadranty	2*	end(x,y) - działa tak samo jak ellipticalquadrantx, ale wykreślanie łuku zaczyna się od położenia pionowego.
r	rlineto	2*	Wykreśla łamaną od punktu bieżącego do kolejnych podanych punktów.
v	rcurveto	6*	Tworzy sześcienną krzywą Bèziera używając podanych współrzędnych obliczając je względem punktu bieżącego.
wa	clockwisearcto	8*	left, top, right, bottom, start(x,y), end(x,y). Działa tak samo jak arcto, ale łuk wykreślany jest zgodnie z ruchem wskazówek zegara.
wr	clockwisearc	8*	left, top, right, bottom, start(x,y), end(x,y). Działa tak samo jak arc, ale łuk wykreślany jest zgodnie z ruchem wskazówek zegara.
x	close	0	Zamyka bieżący podobrys. Wykreśla odcinek od punktu bieżącego do początkowego punktu moveto.

Elementu shapetype używa się tak, jak to pokazano już wcześniej w tym rozdziale:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Figury VML - shape

</H1>

<v:shapetype id="Walentynka" fillcolor="red"

strokecolor="red" coordsize="21600,21600"

path="m10860,2187c10451,1746,9529,1018,9015,730,

7865,152,6685,,5415,,4175, 152,2995,575,1967,

1305,1150,2187,575,3222,242,4220,,5410,242,6560,

575,7597l10860, 21600,20995,7597c21480,6560,

21600,5410,21480,4220,21115,3222,20420,2187,19632,

1305,18575,575,17425,152,16275,,15005,,13735,152,

12705,730,12176,1018,11254,1746, 10860,2187xe"

style='width:200;height:160;'/>

</v:shapetype>

<v:shape type="#Walentynka" style='width=200;height:160;'/>

</CENTER>

</BODY>

</HTML>

Wyniki pokazano już wcześniej, na rysunku 11.2.

Właściwości figury można określić w elemencie shapetype, jak w przykładzie powyższym, gdzie określono tak właściwość fillcolor. Jeśli jednak chcesz użyć w konkretnej figurze innych ustawień, wystarczy je podać powtórnie w odpowiednim elemencie shape. Oto przykład, gdzie zmieniono kolor serduszka na niebieski:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Figury VML - shape

</H1>

<v:shapetype id="Walentynka" fillcolor="red"

strokecolor="red" coordsize="21600,21600"

path="m10860,2187c10451,1746,9529,1018,9015,730,

7865,152,6685,,5415,,4175, 152,2995,575,1967,

1305,1150,2187,575,3222,242,4220,,5410,242,6560,

575,7597l10860, 21600,20995,7597c21480,6560,

21600,5410,21480,4220,21115,3222,20420,2187,19632,

1305,18575,575,17425,152,16275,,15005,,13735,152,

12705,730,12176,1018,11254,1746, 10860,2187xe"

style='width:200;height:160;'/>

</v:shapetype>

<v:shape type="#Walentynka" fillcolor="blue"

style='width=200;height:160;'/>

</CENTER>

</BODY>

</HTML>

Zaawansowane techniki VML

W tym rozdziale omawialiśmy podstawowe techniki VML, ale język ten jest znacznie bogatszy, podobnie jak inne języki opisu grafiki. W ostatnim przykładzie wzorowanym na podręczniku VML Microsoftu wyświetlimy napis wzdłuż ścieżki za pomocą formuły VML:

<HEAD>

<TITLE>

Użycie Wektorowego języka znaczników VML

</TITLE>

<STYLE>

v\:* {behavior: url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<H1>

Ścieżka tekstu w VML

</H1>

<v:shapetype id="MyShape"

coordsize="21600,21600" adj="9931"

path="m0@0c7200@2,14400@1,21600,

0m0@5c7200@6,14400@6,21600@5e">

<v:formulas>

<v:f eqn="val #0"/>

<v:f eqn="prod #0 3 4"/>

<v:f eqn="prod #0 5 4"/>

<v:f eqn="prod #0 3 8"/>

<v:f eqn="prod #0 1 8"/>

<v:f eqn="sum 21600 0 @3"/>

<v:f eqn="sum @4 21600 0"/>

<v:f eqn="prod #0 1 2"/>

<v:f eqn="prod @5 1 2"/>

<v:f eqn="sum @7 @8 0"/>

<v:f eqn="prod #0 7 8"/>

<v:f eqn="prod @5 1 3"/>

<v:f eqn="sum @1 @2 0"/>

<v:f eqn="sum @12 @0 0"/>

<v:f eqn="prod @13 1 4"/>

<v:f eqn="sum @11 14400 @14"/>

</v:formulas>

<v:path textpathok="t"/>

<v:textpath on="t" fitshape="t" xscale="t"/>

</v:shapetype>

<v:shape type="#MyShape"

style='position:absolute; top:60pt; left:60pt;

width:207pt;height:63pt;' adj="8717"

fillcolor="blue" strokeweight="1pt">

<v:fill method="linear sigma" focus="100%"

type="gradient"/>

<v:shadow on="t" offset="3pt"/>

<v:textpath style='font-family:"Times New Roman";

v-text-kern:t' trim="t" fitpath="t" xscale="f"

string="VML"/>

</v:shape>

</CENTER>

</BODY>

</HTML>

Wyniki pokazano na rysunku 11.24. Tego typu grafikę można obejrzeć w produktach z rodziny Microsoft Office, takich jak Word czy PowerPoint - teraz wiesz, jak się ją tworzy.

Rysunek 11.24.

Użycie ścieżki tekstu w VML

0x01 graphic

Więcej informacji o VML znajdziesz na stronie Microsoftu poświęconej temu językowi. VML jest językiem naprawdę potężnym, ale jego zastosowanie ogranicza się do Internet Explorera. Pewnego dnia inne przeglądarki będą zawierały obsługę języka graficznego zatwierdzonego przez W3C, na przykład SVG, a wtedy ten rozdział będzie można napisać od nowa.

W następnym, już ostatnim rozdziale przyjrzymy się użyciu XML po stronie serwera z wykorzystaniem języka Perl.

40 Część I ♦ Podstawy obsługi systemu WhizBang (Nagłówek strony)

Rozdział 1 ♦ Pierwsze kroki (Nagłówek strony)

40 C:\Moje dokumenty\Wojtek Romowicz\Książki\XML Vademecum profesjonalisty\r11-01.doc

C:\Moje dokumenty\Wojtek Romowicz\Książki\XML Vademecum profesjonalisty\r11-01.doc 1

przecinek u autora to błąd

U autora znacznik <CENTER> umieszczony jest nieprawidłowo.

obrazek gdzieś z moich zasobów

u autora błąd (ellipticalqaudrantx)

proszę sprawdzić

Wyszukiwarka