原文：http://dlstone.blogchina.com/control/2107979.html
第一部分
VML
入门
第一节
VML
基本概念
VML
相当于
IE
里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。
VML
是微软
1999
年
9
月附带
IE5.0
发布的，在我认为，
VML
其实是
Word
和
HTML
结合的产物。可以将
Word
文档另存为
HTML
，其中的文本和图片可以很容易的转换，但如果是手绘制的图形在以往的
IE
里面就无法解释了，如果都转换成图形文件又不太现实。于是微软把
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>
|
第二节
Shape
对象和
vml
坐标系
Shape
是
VML
最基本的对象，利用它可以画出所有你想要的图形。在
VML
中，使用的坐标并不是
Document
的坐标，它有自己的坐标系，这样一来，动态改变它的坐标，就可以实现放大、缩小、旋转等功能了。
shape
的
CoordSize
属性就是用来定义坐标的，它有两个参数，
<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)
，这样的坐标就像数学里面的坐标了，把画版分成了四个块。
在解决实际问题的时候，我发现，
IE
会自动把可见的
VML
图象放在相对的
(0,0)
位置，意思是说，上面两张图如果没有增加两个辅助的坐标，在
IE
上显示出来是并列的两个正方形。
shape
中最主要的属性是
Path
，它是个功能强大的画笔，语法很简单，由几个字母组成，下面详细讲述：
m
x,y:MoveTo
把画笔移动到
(x,y)
；
l
x,y:LineTo
从当前点到
(x,y)
画一条线；可以给连续的几个点，
VML
会连续画出来直到遇到
x
命令。
x:Close
结束一条线；
e:End
结束画图
shape
的其他常用属性
:
FillColor:
填充颜色，使用
HTML
中规定的颜色；例如
: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
的对象中使用它。
在下面几节，将详细介绍
Shape
延伸出来的一些具体对象，诸如
Rect
、
RoundRect
、
Oval
、
Line
等对象。
第三节
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
体现
: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
的变形，是不规则的连续曲线。它有一个特殊的属性
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>
|
第四节
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)
，意思是隔图形边的上下左右多少范围内定位文字。
第五节
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"
/>
第六节
Image
对象
Image
对象从外部调用一个图形文件，只要
IE
能够显示的格式都可以。需要注意的是，
VML
只用来显示这张图片，并没有将这图片矢量化，如果以后放大缩小，画质会改变的。
<v:image src="big.GIF"
style="position:relative;top:0;left:0;width:165;height:157"
/>
第七节
Group
容器
Group
的使用很简单，但功能很强大。它能让一系列的
VML
对象使用共同的坐标系，它很常用的，基本上如果使用了超过一个
VML
对象的页面都使用
Group
。使用
Group
还有个好处，就是可以动态改变
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>
第八节
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"
，效果是一样的。