strokecolor="red" STROKEWEIGHT="2pt" />
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
Teraz VML omówimy dokładnie, zaczniemy od powiedzenia paru słów o składni tego dokumentu.
2 D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc
Rozdział 1 f& Pierwsze kroki (Nagłówek strony)
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
.
.
.
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):
Użycie Wektorowego języka znaczników
strokecolor="red" STROKEWEIGHT="2pt" />
D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc 3
4 Część I f& Podstawy obsługi systemu WhizBang (Nagłówek strony)
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ść.
4 D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc
Rozdział 1 f& Pierwsze kroki (Nagłówek strony)
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:
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:
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.
D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc 5
6 Część I f& Podstawy obsługi systemu WhizBang (Nagłówek strony)
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:
type cdata #implied -- odwołanie do shapetype --
adj cdata #implied -- lista ustawień ścieżek parametrycznych --
path cdata #implied -- polecenia opisujące obrys --
6 D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc
Rozdział 1 f& Pierwsze kroki (Nagłówek strony)
>
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ń Atrybut Typ Wartość Opis
nazw domyślna
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, number 0
Określa położenie lewej strony bloku
margin-
zawierającego figurę.
left,
center-x
itd.
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, number 0
Określa położenie górnego brzegu
margin-
bloku zawierającego figurę.
top,
center-y
itd.
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.
D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc 7
8 Część I f& Podstawy obsługi systemu WhizBang (Nagłówek strony)
VML chromakey color null
Określa kolor, który będzie
interpretowany jako przezroczysty.
VML class string null
Określa klasę CSS figury.
VML coordorigi Vector2D "0 0"
Współrzędne lewego górnego rogu
n
bloku zawierającego figurę.
VML coordsize Vector2D "1000
Określa szerokość i wysokość
1000"
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 strokecolo color black
Określa kolor używany do wykreślenia
r
obrysu kształtu.
VML strokeweig number 0.75pt
Określa szerokość linii obrysu.
ht
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.
8 D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc
Rozdział 1 f& Pierwsze kroki (Nagłówek strony)
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:
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
/>
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:
Figury VML - shape
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"
D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc 9
10 Część I f& Podstawy obsługi systemu WhizBang (Nagłówek strony)
style='width:200;height:160;'/>
Wyniki pokazano na rysunku 11.2.
Rysunek 11.2.
Użycie elementu
shape
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:
Figury VML - shape
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;'/>
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.
10 D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc
Rozdział 1 f& Pierwsze kroki (Nagłówek strony)
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:
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:
Prostokąty w VML
strokeweight="4pt"/>
Wyniki pokazano na rysunku 11.3.
D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc 11
12 Część I f& Podstawy obsługi systemu WhizBang (Nagłówek strony)
Rysunek 11.3.
Użycie elementu
rect
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:
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:
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:
12 D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc
Rozdział 1 f& Pierwsze kroki (Nagłówek strony)
Prostokąty z zaokrąglonymi rogami w VML
strokecolor="green" strokeweight="4pt"/>
Wyniki pokazano na rysunku 11.4.
Rysunek 11.4.
Użycie elementu
roundrect
Element line
Elementu line używa się do wykreślania odcinków. Oto atrybuty tego elementu:
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:
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"
D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc 13
14 Część I f& Podstawy obsługi systemu WhizBang (Nagłówek strony)
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):
Odcinki w VML
Wyniki pokazano na rysunku 11.5.
Rysunek 11.5.
Użycie elementu
line
Element oval
Elementu oval używa się do rysowania elips i kół. Obsługiwane są atrybuty coreattrs
i shapeattrs. Oto szablon XML elementu oval:
size="100 100"
id=null
href=null
target=null
class=null
title=null
alt=null
style='visibility: visible'
opacity="1.0"
chromakey="null"
14 D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc
Rozdział 1 f& Pierwsze kroki (Nagłówek strony)
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:
Elipsy w VML
Wyniki pokazano na rysunku 11.6.
Rysunek 11.6.
Użycie elementu
oval
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:
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:
D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc 15
16 Część I f& Podstawy obsługi systemu WhizBang (Nagłówek strony)
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ą:
Aamane VML
Wyniki pokazano na rysunku 11.7.
Rysunek 11.7.
Użycie elementu
polyline
16 D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc
Rozdział 1 f& Pierwsze kroki (Nagłówek strony)
Element curve
Elementu curve używa się do wykreślania krzywych BŁzier trzeciego stopnia. Oto atrybuty tego
elementu:
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:
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:
Krzywe VML
control2="200pt 100pt" to="100pt 0"
strokecolor="blue" strokeweight="4pt"/>
Wyniki pokazano na rysunku 11.8.
Rysunek 11.8.
Użycie elementu
curve
Element arc
Elementu arc używa się do wykreślania łuku. Auk 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:
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:
endangle="90"
id=null
href=null
target=null
class=null
title=null
18 D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc
Rozdział 1 f& Pierwsze kroki (Nagłówek strony)
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:
Auki w VML
strokecolor="blue" strokeweight="4pt"/>
Wyniki pokazano na rysunku 11.9.
Rysunek 11.9.
Użycie elementu
arc
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".
D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc 19
20 Część I f& Podstawy obsługi systemu WhizBang (Nagłówek strony)
" 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:
Elipsy w VML
20 D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc
Rozdział 1 f& Pierwsze kroki (Nagłówek strony)
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:
Pozycjonowanie typu static
Oto prostokąt:
strokeweight="4pt"/>
Wyniki pokazano na rysunku 11.10. Jak widać, podstawa figury została wyrównana do linii
bazowej tekstu.
D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc 21
22 Część I f& Podstawy obsługi systemu WhizBang (Nagłówek strony)
Rysunek 11.10.
Użycie
rozmieszczania
statycznego
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:
Pozycjonowanie typu relative
Oto prostokąt:
strokeweight="4pt"/>
Wynik pokazano na rysunku 11.11.
Rysunek 11.11.
Użycie
rozmieszczania
względnego
22 D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc
Rozdział 1 f& Pierwsze kroki (Nagłówek strony)
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:
Pozycjonowanie typu absolute
Oto prostokąt:
strokeweight="4pt"/>
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
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.
D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc 23
24 Część I f& Podstawy obsługi systemu WhizBang (Nagłówek strony)
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:
Pozycjonowanie w pionie
strokeweight="4pt"/>
Wyniki pokazano na rysunku 11.13.
Rysunek 11.13.
Użycie
pozycjonowania z-
index
Jeśli zamienimy wartości właściwości z-index niebieska elipsa schowa się za czerwony
prostokąt:
strokeweight="4pt"/>
Wynik pokazano na rysunku 11.14.
24 D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc
Rozdział 1 f& Pierwsze kroki (Nagłówek strony)
Rysunek 11.14.
Zamiana wartości
z-index
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:
Pozycjonowanie rotation
strokeweight="4pt"/>
Wyniki pokazano na rysunku 11.15.
D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc 25
26 Część I f& Podstawy obsługi systemu WhizBang (Nagłówek strony)
Rysunek 11.15.
Pozycjonowanie
rotation
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:
Pozycjonowanie z atrybutem flip
strokecolor="red" strokeweight="2pt"/>
Wynik pokazano na rysunku 11.16.
26 D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc
Rozdział 1 f& Pierwsze kroki (Nagłówek strony)
Rysunek 11.16.
Pozycjonowanie
z odbiciem
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:
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ę:
Grupowanie elementów w VML
.
.
.
D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc 27
28 Część I f& Podstawy obsługi systemu WhizBang (Nagłówek strony)
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:
Grupowanie elementów w VML
style='width:50;height:50'
strokeweight="4pt" />
style='width:50;height:50' />
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
28 D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc
Rozdział 1 f& Pierwsze kroki (Nagłówek strony)
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:
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ń Atrybut Typ Wartość Opis
nazw domyślna
VML color boolean gray
Określa kolor pierwszego cienia.
RGB(128
,128,12
8)
VML color2 boolean gray
Określa kolor drugiego cienia lub
RGB(203
wyróżnienia cienia wytłaczanego.
,203,20
3)
VML id string null
Przypisuje cieniowi niepowtarzalny
identyfikator.
VML matrix string null
Macierz przekształcenia
perspektywicznego w postaci
"scalexx,scalexy,scaleyx,s
caleyy,perspectivex,perspe
ctivey". 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
D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc 29
30 Część I f& Podstawy obsługi systemu WhizBang (Nagłówek strony)
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:
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
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:
Cienie w VML
matrix="1,-1,0,1,0,-5e-7"/>
30 D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc
Rozdział 1 f& Pierwsze kroki (Nagłówek strony)
Wyniki pokazano na rysunku 11.18 cień rzucany przez prostokąt jest wynikiem zastosowania
zródła świata w lewym dolnym rogu ekranu, z przodu.
Rysunek 11.18.
Tworzenie cieni
w VML
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:
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ń Atrybut Typ Wartość Opis
nazw domyślna
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
D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc 31
32 Część I f& Podstawy obsługi systemu WhizBang (Nagłówek strony)
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 focusposit Vector2D 0,0
W przypadku wypełnień tonalnych
ion
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
32 D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc
Rozdział 1 f& Pierwsze kroki (Nagłówek strony)
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:
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:
D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc 33
34 Część I f& Podstawy obsługi systemu WhizBang (Nagłówek strony)
Wypełnienia tonalne
Wyniki pokazano na rysunku 11.19:
Rysunek 11.19.
Wypełnienie
tonalne
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:
Wypełnienia tonalne po łukach
Wyniki pokazano na rysunku 11.20.
34 D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc
Rozdział 1 f& Pierwsze kroki (Nagłówek strony)
Rysunek 11.20.
Radialne
wypełnienie
tonalne
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:
Wypełnienia tonalne po łukach
type="gradientradial" />
Wyniki pokazano na rysunku 11.21.
Rysunek 11.21.
Wypełnienie
radialne
z początkiem
układu
współrzędnych
pośrodku
prostokąta
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
D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc 35
36 Część I f& Podstawy obsługi systemu WhizBang (Nagłówek strony)
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):
Wypełnienia wzorem
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
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:
Wypełnienia obrazkiem
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
Użycie elementu shapetype
Tworzenie figur można sparametryzować za pomocą elementu shapetype. Element ten określa
rodzaj figury i pózniej 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:
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:
path=null
opacity="100%"
D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc 37
38 Część I f& Podstawy obsługi systemu WhizBang (Nagłówek strony)
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:
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;'/>
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
38 D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc
Rozdział 1 f& Pierwsze kroki (Nagłówek strony)
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 quadraticbezie
2+2* (controlpoint(x,y))*, end(x,y)
r
Definiuje jedną lub więcej
kwadratowych krzywych BŁziera
o podanych punktach kontrolnych
i punkcie końcowym.
qx ellipticalquad
2* end(x,y) wykreśla ćwiartkę elipsy
rantx
z punktu bieżącego poziomo do punktu
końcowego.
qy ellipticalquad
2* end(x,y) działa tak samo jak
ranty
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,
D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc 39
40 Część I f& Podstawy obsługi systemu WhizBang (Nagłówek strony)
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:
Figury VML - shape
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;'/>
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:
Figury VML - shape
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;'/>
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:
Ścieżka tekstu w VML
path="m0@0c7200@2,14400@1,21600,
0m0@5c7200@6,14400@6,21600@5e">
D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc 41
42 Część I f& Podstawy obsługi systemu WhizBang (Nagłówek strony)
width:207pt;height:63pt;' adj="8717"
fillcolor="blue" strokeweight="1pt">
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
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.
42 D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc
Rozdział 1 f& Pierwsze kroki (Nagłówek strony)
D:\Kompakt !!!\Kompakt\Ksiazki\XML Vademecum profesjonalisty\r11-01.doc 43
Wyszukiwarka
Podobne podstrony:
r11 01 (3)
t informatyk12[01] 02 101
2570 01
introligators4[02] z2 01 n
Biuletyn 01 12 2014
beetelvoiceXL?? 01
01
2007 01 Web Building the Aptana Free Developer Environment for Ajax
9 01 07 drzewa binarne
więcej podobnych podstron