原文：http://dlstone.blogchina.com/control/2107979.html
第一部分
VML
入門
?
第一節(jié)????
VML
基本概念
VML
相當于
IE
里面的畫筆，能實現(xiàn)你所想要的圖形，而且結合腳本，可以讓圖形產生動態(tài)的效果。
VML
是微軟
1999
年
9
月附帶
IE5.0
發(fā)布的，在我認為，
VML
其實是
Word
和
HTML
結合的產物。可以將
Word
文檔另存為
HTML
，其中的文本和圖片可以很容易的轉換，但如果是手繪制的圖形在以往的
IE
里面就無法解釋了，如果都轉換成圖形文件又不太現(xiàn)實。于是微軟把
Word
里面的圖形控件結合到
IE
里面，使
IE
也具備了繪圖功能。
VML
的全稱是
Vector Markup Language(
矢量可標記語言
)
，矢量的圖形，意味著圖形可以任意放大縮小而不損失圖形的質量，這在制作地圖上有很大用途。為了顯示它的強大，和增加你學習
VML
的信心，先給你看看一個
VML
例子
:
Demo1.html
|
<html xmlns:v="urn:schemas-microsoft-com:vml">
<STYLE>
v\:* { Behavior: url(#default#VML) }
</STYLE>
<body>
<v:roundrect strokecolor="black" fillcolor="white"
style="position:relative;left:20;top:5;width:100px;height:40px;z-index:9">
?????? <v:shadow
on="t" type="single" color="silver" offset="3pt,3pt"></v:shadow>
??????
<v:textbox id="memo"
style="font-size:10pt;color:blue;line-height:18px" inset="1,1,1,1">Hello
world!<br>Hello VML!</v:textbox>
</v:roundrect>
<v:oval strokecolor="black" fillcolor="white"
style="position:relative;left:9;top:20;width:14px;height:10px;z-index:8">
?????????????
<v:shadow on="t" type="single" color="silver"
offset="3pt,3pt"></v:shadow>
</v:oval>
<v:oval strokecolor="black" fillcolor="white"
style="position:relative;left:0;top:35;width:10px;height:8px;Z-index:7">
????????????????????
<v:shadow on="t" type="single" color="silver"
offset="3pt,3pt"></v:shadow>
</v:oval>
<!--/v:group-->
</body>
|
第二節(jié)
Shape
對象和
vml
坐標系
Shape
是
VML
最基本的對象，利用它可以畫出所有你想要的圖形。在
VML
中，使用的坐標并不是
Document
的坐標，它有自己的坐標系，這樣一來，動態(tài)改變它的坐標，就可以實現(xiàn)放大、縮小、旋轉等功能了。
shape
的
CoordSize
屬性就是用來定義坐標的，它有兩個參數(shù)，
<v:shape CoordSize="2800,2800"
/>
，
這里的
2800,2800
是橫縱坐標被分成了
2800
個點，并不是
HTML
里面默認像素。如果沒有設置圓點，
VML
默認是
0,0
（左上角），當然你也可以使用
CoordOrig
屬性設置
VML
的圓點坐標。
<v:shape CoordOrig="-1400,-1400"
CoordSize="2800,2800" style="width:500;height:500" />
?
???
注意
:
定義的坐標只是相對的，真正顯示的圖形大小還需要
style="width:500;height:500"
來定義！
?
上面的定義后，你可用的坐標是
x(-1400
到
1400) y(-1400
到
1400)
，這樣的坐標就像數(shù)學里面的坐標了，把畫版分成了四個塊。
在解決實際問題的時候，我發(fā)現(xiàn)，
IE
會自動把可見的
VML
圖象放在相對的
(0,0)
位置，意思是說，上面兩張圖如果沒有增加兩個輔助的坐標，在
IE
上顯示出來是并列的兩個正方形。
??? shape
中最主要的屬性是
Path
，它是個功能強大的畫筆，語法很簡單，由幾個字母組成，下面詳細講述：
m
x,y:MoveTo
把畫筆移動到
(x,y)
；
l
x,y:LineTo
從當前點到
(x,y)
畫一條線；可以給連續(xù)的幾個點，
VML
會連續(xù)畫出來直到遇到
x
命令。
x:Close
結束一條線；
e:End
結束畫圖
??? shape
的其他常用屬性
:
FillColor:
填充顏色，使用
HTML
中規(guī)定的顏色；例如
:fillcolor=red
Filled:
是否要填充圖形，如果圖形不是封閉的，也會自動封閉圖形進行填充。當
Filled="true"(
默認
),fillcolor
才有效果；
StrokeColor:
線的顏色；
StrokeWeight:
線的寬度；
Title:
當鼠標移動到該圖形上的時候，顯示的文字，和
HTML
里面的
alt
、
tilte
一樣；
Type:
指定該圖形屬于那個
ShapeType
，
ShapeType
可以為
VML
制定模版，將在以后加以描述；
???
前面的這些屬性，
FillColor
、
Filled
可以在
<v:Fill />
中使用，
StrokeColor
、
StrokeWeight
可以在
<v:Stroke />
中使用。也可以在
Shape
或者
繼承
Shape
的對象中使用它。
???
在下面幾節(jié)，將詳細介紹
Shape
延伸出來的一些具體對象，諸如
Rect
、
RoundRect
、
Oval
、
Line
等對象。
第三節(jié)
Line,PolyLine
（線）對象
???
Line
是做圖中最常用的，它有兩個特殊的屬性
from
和
to ,
就是起始點和終止點坐標。
<v:line from="0,0" to="100,50"
style="position:relative;"/>
?
●如果要改變線的樣式，
LineStyle (Stroke)
屬性可以做到
:
??? Single(
默認
)
，
ThinThin
，
ThinThick
，
ThickBetweenThin
?
●如果要改變線的類型，可以用
DashStyle(Stroke)
屬性
:
?
??? <v:line style="position:relative"
from="0,0" to="100,0" >
??? <v:stroke dashstyle="Dot"/>
??? </v:line>
Solid(
默認
)
ShortDash:
ShortDot:
ShortDashDot:
ShortDashDotDot:
Dot:
Dash:
LongDash:
DashDot:
LongDashDot:
LongDashDotDot:
●在畫坐標的時候，需要箭頭，
VML
已經定義好了箭頭，在
Stroke
體現(xiàn)
:EndArrow
和
StartArrow
屬性，一個是線開始的時候有箭頭，另一個是線結束的時候有箭頭。箭頭的樣式也有不少
EndArrow="Block":
EndArrow="Classic":(
這個看起來還比較舒服
)
EndArrow="Diamond":
StartArrow="Oval":
StartArrow="Open":
?
Demo2.html
|
<html xmlns:v="urn:schemas-microsoft-com:vml">
<STYLE>
v\:* { Behavior: url(#default#VML) }
</STYLE>
<body>
<v:line from="0,0" to="100,50"
style="position:relative;" onmouseover="alert('hi')">
<v:stroke dashstyle="LongDashDot"
EndArrow="Classic"/>
</v:line>
</body>
|
?
PolyLine
是
Line
的變形，是不規(guī)則的連續(xù)曲線。它有一個特殊的屬性
Points
，用來設置每個點的坐標，例如：
Demo3.html
|
<html xmlns:v="urn:schemas-microsoft-com:vml">
<STYLE>v\:* { Behavior: url(#default#VML)
}</STYLE>
<body>
<v:PolyLine filled="false" Points="0,0 0,100 20,150
200,100" style="position:relative"/>
<v:stroke StartArrow="Oval" EndArrow="Classic"
dashstyle="Dot" />
</v:PolyLine>
</body>
|
?
第四節(jié)
Rect,RoundRect
（矩形）對象
demo4.html
?
|
<html xmlns:v="urn:schemas-microsoft-com:vml">
<STYLE>v\:* { Behavior: url(#default#VML)
}</STYLE>
<body>
<table>
<tr><td>
<v:Rect
style="position:relative;width:100;height:50"/>
</td></tr>
<tr><td>
?
???
<v:RoundRect onmouseover="alert('RoundRect
顧名思義，是圓角的矩形，這種形狀在畫流程圖的時候很常用，如果加上陰影，就更好看了
')" style="position:relative;width:100;height:50">
??? <v:shadow
on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
???
</v:RoundRect>
</td></tr>
<tr><td>
<v:RoundRect
style="position:relative;width:120;height:50px">
??&nbp;
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
??? <v:TextBox
inset="5pt,5pt,5pt,5pt" style="font-size:10.2pt;">Hello
world!</v:TextBox>
???
</v:RoundRect>
</td></tr>
</table>
</body>
|
在
VML
里面，
True
和
False
可以簡寫成
T
和
F
。
Shadow
中的
offset
屬性用來設置
偏移原圖的
x,y
值。
on
屬性用來決定是否顯示陰影。在矩形中寫字，要用到
TextBox
對象。
TextBox
比較關鍵的屬性是
inset(left,top,right,bottom)
，意思是隔圖形邊的上下左右多少范圍內定位文字。
第五節(jié)
oval(
圓
)
對象
用
VML
畫圓
(Oval)
是非常簡單的，只要設置圓的高和寬就可以了。當然定位也是常用的：
?
???
<v:oval
style="position:relative;left:5;top:5;width:100;height:80"/>
?
???
還要注意的是，
top
和
left
是圓的左上角坐標，
width
和
height
是圓的寬和高，不是圓的半徑。其圓心坐標是
(left-width/2,top-height/2)
。
???
說到圓，不得不想到弧
(arc) VML
已經定義了弧對象，它有除了圓的基本性質外，兩個特殊的屬性
startangle
和
endangle
，就是起始角度和結束角度，單位是度，而不是弧度：
?
<v:arc filled=false
style="position:relative;width:100;height:100" StartAngle="0" EndAngle="270"
/>
?
第六節(jié)
Image
對象
??
Image
對象從外部調用一個圖形文件，只要
IE
能夠顯示的格式都可以。需要注意的是，
VML
只用來顯示這張圖片，并沒有將這圖片矢量化，如果以后放大縮小，畫質會改變的。
?
<v:image src="big.GIF"
style="position:relative;top:0;left:0;width:165;height:157"
/>
?
第七節(jié)
Group
容器
???
Group
的使用很簡單，但功能很強大。它能讓一系列的
VML
對象使用共同的坐標系，它很常用的，基本上如果使用了超過一個
VML
對象的頁面都使用
Group
。使用
Group
還有個好處，就是可以動態(tài)改變
CoordSize
值放大或縮小整個
Group
里面的
VML
。
?
<v:group ID="group1"
style="position:relative;WIDTH:200px;HEIGHT:200px;" coordsize = "2000,2000">
<v:rect
style="WIDTH:2000px;HEIGHT:2000px" fillcolor="#99cccc">
???
<v:shadow on="t" type="single" color="silver" offset="5pt,5pt">
</v:rect>
<v:oval
style="position:relative;top:100;left:100;width:1000;height:1000;z-index:7;"
fillcolor="red" strokeColor="red"/>
<v:rect
style="position:relative;top:500;left:300;width:1000;height:1000;z-index:8;"
fillcolor="blue" strokeColor="blue"/>
<v:line from="200,200" to="1000,1700"
style="z-index:9" fillcolor="yellow" strokeColor="yellow" strokeWeight=2pt/>
</v:group>
?
第八節(jié)
ShapeType
給
VML
制作模板
??
VML
的這個功能很有用，模版，顧名思義，它可以減少書寫代碼的量，又使的代碼可讀性提高。在理解
VML
模版的時候，可以和
HTML
的
CSS
一樣理解，它是定義好的一種形狀，下次使用的時候直接聲明
type
屬性就可以了。看看下面的例子：
?
<v:shapetype id="arrowUP"
coordsize="6 6"> <!--
三角形
向上
-->
???
<v:path v="m 3,0 l 0,6,6,6,3,0 x e" />
</v:shapetype>
<v:shapetype id="arrowDown"
coordsize="6 6"> <!--
三角形
向下
-->
???
<v:path v="m 0,0 l 3,6,6,0,0,0 x e" />
</v:shapetype>
?
???
定義好上面的模版后，以后就可以直接調用了：
?
???
<v:shape type="#arrowUP"
style="position:relative;width:50;height:50"/>
?
???
<v:shape type="#arrowDown"
style="position:relative;width:50;height:50"/>
?
???
<v:shape fillcolor=blue type="#arrowDown"
style="position:relative;width:80;height:80" />
?
???
不知道大家有沒有注意到，
VML
里面對“
,
”使用不強制的，你可以使用
coordsize="6,6"
也可以使用
coordsize="6 6"
，效果是一樣的。