VML勾画流程图(一)入门概念
VML勾画流程图(一)入门概念
official document location:
http://www.w3.org/TR/NOTE-VML
中文教程
http://www.itlearner.com/code/vml/index.html
VML的基本概念
VML的全称是Vector Markup Language(矢量可标记语言)
第一个示例hello world，文件头：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v\:* {behavior: url(#default#VML);}
</style>
</head>
<body>
...snip
</body>
</html>
文件体内容：
<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>
Shape对象与VML坐标系
Shape是VML最基本的对象，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" />
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的对象中使用它。
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 from="0,0" to="100,0" style="position:relative;">
<v:stroke dashstyle="Dot"/>
<v:line>
Solid(默认),ShortDash,ShortDot,ShortDashDot,ShortDashDotDot,Dot,Dash,LongDash,DashDot,LongDashDot,
LongDashDotDot;
在画坐标的时候，需要箭头，VML已经定义好了箭头，在Stroke体现:EndArrow 和 StartArrow 属性，一个是线开始的时候有箭头，另一个是线结束的时候有箭头。箭头的样式也有不少(Block,Classic,Diamond,Oval,Open)：
<v:line from="0,0" to="100,0" style="position:relative;">
<v:stroke dashstyle="Solid" endarrow="classic"//>
<v:line>
PolyLine是 Line 的变形，是不规则的连续的线。它有个特殊的属性 Points ,用来设置每个点的坐标。例如：
<v:PolyLine filled="false" Points="0,0 0,100 20,150 200,100" style="position:relative"/>
<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>
Rect,RoundRect(矩形)对象
用VML画矩形，必须设置 style="width:50;height:50"
<v:Rect style="position:relative;width:100;height:50px"/>
RoundRect顾名思义，是圆角的矩形，这种形状在画流程图的时候很常用，还可以加上阴影
<v:RoundRect style="position:relative;width:100;height:50px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
</v:RoundRect>
在VML里面，True 和 False 可以简写成 T 和 F。Shadow 中的 offset 属性用来设置 偏移原图的 x,y 值。 on 属性用来决定是否显示阴影。
在矩形中写字，要用到 TextBox 对象。TextBox 比较关键的属性是 inset(left,top,right,bottom)，意思是隔图形边的上下左右多少范围内定位文字：
<v:RoundRect style="position:relative;width:120;height:30px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
<v:TextBox inset="5pt,5pt,5pt,5pt" style="font-size:10.2pt;">Hello Sillycat</v:TextBox>
</v:RoundRect>
当然你也可以直接插入HTML代码
<v:RoundRect style="position:relative;width:120;height:30px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
<Div style="padding-top:5px;padding-left:5px;padding-right:5px;padding-bottom:5px">Hello sillycat</Div>
</v:RoundRect>
Oval(圆)对象
top和left是圆的左上角坐标，width 和 height 是圆的宽和高，不是圆的半径。其圆心坐标是(left-width/2,top-height/2)。
<v:oval style="position:relative;left:5;top:5;width:100;height:80"/>
弧(arc) VML已经定义了弧对象，它有除了圆的基本性质外，两个特殊的属性startangle 和 endangle ，就是起始角度和结束角度，单位是度，而不是弧度：
<v:arc filled=false style="position:relative;width:100;height:100" StartAngle="0" EndAngle="270" />
Image(图像)对象
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:shadow>
</v:rect>
<v:oval style="position:relative;top:100;left:100;width:1000;height:1000;z-index:7;" fillcolor="red" strokeColor="red"></v:oval>
<v:rect style="position:relative;top:500;left:300;width:1000;height:1000;z-index:8;" fillcolor="blue" strokeColor="blue"></v:rect>
<v:line from="200,200" to="1000,1700" style="z-index:9" fillcolor="yellow" strokeColor="yellow" strokeWeight=2pt></v:line>
</v:group>
ShapeType给VML制作模板
定义模版
<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" />
例如：
<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 fillcolor=blue type="#arrowDown" style="position:relative;width:80;height:80" />
official document location:
http://www.w3.org/TR/NOTE-VML
中文教程
http://www.itlearner.com/code/vml/index.html
VML的基本概念
VML的全称是Vector Markup Language(矢量可标记语言)
第一个示例hello world，文件头：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v\:* {behavior: url(#default#VML);}
</style>
</head>
<body>
...snip
</body>
</html>
文件体内容：
<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>
Shape对象与VML坐标系
Shape是VML最基本的对象，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" />
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的对象中使用它。
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 from="0,0" to="100,0" style="position:relative;">
<v:stroke dashstyle="Dot"/>
<v:line>
Solid(默认),ShortDash,ShortDot,ShortDashDot,ShortDashDotDot,Dot,Dash,LongDash,DashDot,LongDashDot,
LongDashDotDot;
在画坐标的时候，需要箭头，VML已经定义好了箭头，在Stroke体现:EndArrow 和 StartArrow 属性，一个是线开始的时候有箭头，另一个是线结束的时候有箭头。箭头的样式也有不少(Block,Classic,Diamond,Oval,Open)：
<v:line from="0,0" to="100,0" style="position:relative;">
<v:stroke dashstyle="Solid" endarrow="classic"//>
<v:line>
PolyLine是 Line 的变形，是不规则的连续的线。它有个特殊的属性 Points ,用来设置每个点的坐标。例如：
<v:PolyLine filled="false" Points="0,0 0,100 20,150 200,100" style="position:relative"/>
<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>
Rect,RoundRect(矩形)对象
用VML画矩形，必须设置 style="width:50;height:50"
<v:Rect style="position:relative;width:100;height:50px"/>
RoundRect顾名思义，是圆角的矩形，这种形状在画流程图的时候很常用，还可以加上阴影
<v:RoundRect style="position:relative;width:100;height:50px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
</v:RoundRect>
在VML里面，True 和 False 可以简写成 T 和 F。Shadow 中的 offset 属性用来设置 偏移原图的 x,y 值。 on 属性用来决定是否显示阴影。
在矩形中写字，要用到 TextBox 对象。TextBox 比较关键的属性是 inset(left,top,right,bottom)，意思是隔图形边的上下左右多少范围内定位文字：
<v:RoundRect style="position:relative;width:120;height:30px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
<v:TextBox inset="5pt,5pt,5pt,5pt" style="font-size:10.2pt;">Hello Sillycat</v:TextBox>
</v:RoundRect>
当然你也可以直接插入HTML代码
<v:RoundRect style="position:relative;width:120;height:30px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
<Div style="padding-top:5px;padding-left:5px;padding-right:5px;padding-bottom:5px">Hello sillycat</Div>
</v:RoundRect>
Oval(圆)对象
top和left是圆的左上角坐标，width 和 height 是圆的宽和高，不是圆的半径。其圆心坐标是(left-width/2,top-height/2)。
<v:oval style="position:relative;left:5;top:5;width:100;height:80"/>
弧(arc) VML已经定义了弧对象，它有除了圆的基本性质外，两个特殊的属性startangle 和 endangle ，就是起始角度和结束角度，单位是度，而不是弧度：
<v:arc filled=false style="position:relative;width:100;height:100" StartAngle="0" EndAngle="270" />
Image(图像)对象
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:shadow>
</v:rect>
<v:oval style="position:relative;top:100;left:100;width:1000;height:1000;z-index:7;" fillcolor="red" strokeColor="red"></v:oval>
<v:rect style="position:relative;top:500;left:300;width:1000;height:1000;z-index:8;" fillcolor="blue" strokeColor="blue"></v:rect>
<v:line from="200,200" to="1000,1700" style="z-index:9" fillcolor="yellow" strokeColor="yellow" strokeWeight=2pt></v:line>
</v:group>
ShapeType给VML制作模板
定义模版
<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" />
例如：
<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 fillcolor=blue type="#arrowDown" style="position:relative;width:80;height:80" />