VML资料.docx
《VML资料.docx》由会员分享，可在线阅读，更多相关《VML资料.docx（12页珍藏版）》请在冰豆网上搜索。
VML资料
1VML概述
在VML里面，标记使用的是XML扩张，需要一个namespace（命名空间），你可以使用惯用的“v”作为命名空间，使用IE5.0到IE6.0通用的定义如下:
v="urn:
schemas-microsoft-com:
vml">
xmlns全称就是XMLNameSpace也就是命名空间。
Behavior（行为）也是IE5.0新推出的东西，它的功能非常强大，结合样式表，可以给任何HTML对象增加行为（新的属性、方法、事件），而在这里，它的用处是把命名空间“v”和系统预定义的行为VML连接。
这样定义以后，你就可以使用下面的标记了，和普通的HTML标记有所区别，每个标记都增加了一个命名空间：
shape>
shape>
和其他HTML元素一样，VML标记里面可以定义DHTML大部分属性和事件，比如说id，name，title，onmouseover等等。
在写法上VML比较灵活，很多属性既可以写在标记里面，又可以独立出一个新的标记来表示:
shapeid=shape1name=shape1onmouseover="alert（this.id）"StrokeColor=redPath="m0,0l10,10xe">
shape>
等同于下面的写法:
shapeid=shape1name=shape1onmouseover="alert（this.id）">
StrokeStrokeColor=red/>
Pathv="m0,0l10,10xe"/>
shape>
当然不是所有的属性都可以写成独立的标记，常用的比如说上面的Stroke（按我的理解可以翻译成线性），Path，Shadow，Fill（填充）等，VML这样的方式可以理解为shape的属性分类，使属性更直观。
Shape对象派生出来的一些对象，更加直接的图象，比如说Rect（矩形），RoundRect（圆边的矩形），Oval（圆），Line（线），PolyLine（不规则折线），Image（图形文件）等等，以后将对这些对象细细描述。
2语法
VML标记是从XML衍生出来，因而采用的都是符合XML规范的标签。
在标签中，属性和元素不区分大小写。
True和False可以简写为t和f。
2.1shape图形
Shape是VML最基本的对象，利用它可以画出所有想要的图形。
在VML中，使用的坐标并不是Document的坐标，它有自己的坐标系，这样一来，动态改变它的坐标，就可以实现放大、缩小、旋转等功能了。
shape的CoordSize属性就是用来定义坐标的，它有两个参数，shapeCoordSize="2800,2800"/>，这里的2800,2800是横纵坐标被分成了2800个点，并不是HTML里面默认像素。
如果没有设置圆点，VML默认是0,0（左上角），当然你也可以使用CoordOrig属性设置VML的圆点坐标。
shapeCoordOrig="-1400,-1400"CoordSize="2800,2800"style="width:
500;height:
500"/>
注意：
定义的坐标只是相对的，真正显示的图形大小还需要style="width:
500;height:
500"来定义！
上面的定义后，你可用的坐标是x（-1400到1400）y（-1400到1400），这样的坐标就像数学里面的坐标了，把画版分成了四个块。
shape中最主要的属性是Path，它是个功能强大的画笔，语法很简单，由几个字母组成，下面详细讲述：
mx,y：
MoveTo把画笔移动到（x,y）；
lx,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可以在Fill/>中使用，StrokeColor、StrokeWeight可以在Stroke/>中使用。
也可以在Shape或者继承Shape的对象中使用它。
2.2ShapeType
定义shape的模版，在应用中可以重复使用。
shapetypeid="arrowDown"coordsize="66">
pathv="m0,0l3,6,6,0,0,0xe"/>
shapetype>
定义ShapeType时需要指定id，在后面使用ShapeType需要指定对应shape的type为#arrowDown就可以使用ShapeType模版。
注意：
Adj属性的用法，需要与v:
formulas结合起来使用。
Adj中的参数顺序为#1，#2，…#n，formulas中的顺序为@1，@2，…@n。
2.3Line线段
用法：
linestyle="position:
relative"from="0,0"to="100,0">
strokedashstyle="Dot"/>
—线风格-->
line>
线颜色、风格定义可以通过v:
stroke来设定。
2.4PolyLine不规则折线
用法：
PolyLinefilled="false"Points="0,00,10020,150200,100"style="position:
relative"/>
strokeStartArrow="Oval"EndArrow="Classic"dashstyle="Dot"/>
PolyLine>
IE5.0不支持箭头，如果设置填充为true那么对应的多边形必须是闭合才能显示填充颜色。
2.5Rect矩形
用法：
Rectstyle="position:
relative;width:
100;height:
50px"/>
2.6RoundRect圆角矩形
用法：
RoundRectstyle="position:
relative;width:
100;height:
50px">
shadowon="T"type="single"color="#b3b3b3"offset="5px,5px"/>
RoundRect>
Arcsize圆角的大小默认为0.2。
2.7Oval椭圆
用法：
ovalstyle="position:
relative;left:
5;top:
5;width:
100;height:
80"/>
需要注意的是，top和left是圆的左上角坐标，width和height是圆的宽和高，不是圆的半径。
其圆心坐标是（left-width/2，top-height/2）。
2.8Arc弧
用法：
arcfilled=falsestyle="position:
relative;width:
100;height:
100"StartAngle="0"EndAngle="270"/>
注意：
0角度是从平常的90度开始的。
2.9Fill填充
相关属性及说明：
属性名称
说明
id
唯一编号
type
填充类型，可以是“solid|gradient|gradientradial|tile|pattern|frame”，“Tile”，“pattern”和“frame”要求必须设置Image属性。
“Gradient”，“gradientradial”和“gradienttitle”要求gradient属性必须设置。
On
是否加载填充
color
填充颜色
Color2
渐变中的第二颜色
opacity
透明度
Image属性
Src
图片对应的url地址
Size
图片大小。
默认为自动
Origin
与左上角相对位置作为图片的左上角。
默认为图片中心点。
position
外接矩形放置图片的位置。
默认为“auto”
alignshape
与图形对齐
渐变相关属性（gradient）
colors
不同颜色在渐变中所占比例如（30%red，70%blue）
Angle
渐变起始角度
Focus
线形渐变的焦点
focussize
focusposition
method
“none”，“linear”，“sigma”或者"any"
2.10Stroke
相关属性及说明：
Id
唯一标识
On
是否加载样式默认为true
Weight
线宽度
color
颜色
Color2
用于渐变颜色中的第二颜色
Opacity
透明度
style
样式"single","thinthin"（1:
1:
1）,"thinthick",（1:
1:
2）"thickthin"（2:
1:
1）,"thickbetweenthin"（1:
1:
2:
1:
1）
miterlimit
连接点处内点和外点的最大距离
joinstyle
"round"–roundedjoin,"bevel"–beveledjoin,"miter"–miterjoin，默认为“round”
Endcap
“flat”，“square”，“round”，默认为“round”
dashstyle
线样式（“solid|dot|dash|dashdot|longdash|longdashdot|longdashdotdot”），默认为“solid”
filltype
填充类型（"solid","tile","pattern","frame"），默认为“solid”
Src
imagesize
imagealignshape
startarrow
起始箭头风格
startarrowwidth
startarrowlength
endarrow
结束箭头风格
endarrowwidth
endarrowlength
2.11Path
在path中既包含了点坐标的信息也包含对应的命令信息常用的有以下命令：
m移动到指定位置。
l从前面一点画一条线到指定的坐标位置。
c从当前点画弧线到指定坐标位置。
x线段闭合，即从当前点与起始点建立线段连接形成闭合图形。
e画线结束。
如path=“m3，0l0，66，63，0xe”表示的是从（3，0）点出发先画一条线到（0，6），然后再画一条线段到（3，0），x表示闭合即从（3，0）到起点再画一条线段，最后e表示画线结束
本文来自CSDN博客，转载请标明出处：
VML的简介
2007-07-3110:
55
VML的全称是VectorMarkupLanguage（矢量可标记语言），矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量，这在制作地图上有很大用途。
VML支持广泛的矢量图形特征，它们基于由相连接的直线和曲线描述路径。
在VML中使用两个基本的元素：
shape和group。
这两个元素定义了VML的全部结构；shape描述一个矢量图形元素，而group用来将这些图形结合起来，这样它们可以作为一个整体进行处理。
VML规范包括大量的支持多种不同矢量图形特征的元素，包括Shape、Path、Line、Polyline、Curve、Rect、Roundrect、Oval、Arc、Group。
VML常用的几个元素
1.Shape元素
用法：
shape...>
shape>
它的常用属性：
FillColor：
图象填充色。
标签语法：
elementfillcolor="expression">
脚本语法：
element.fillcolor="expression"
expression=element.fillcolor
Path:
指定绘画的路径
脚本用法：
shapeid="rect01"
fillcolor="red"strokecolor="red"
coordorigin="00"coordsize="200200"
style="position:
relative;top:
1;left:
1;width:
20;height:
20"
path="m1,1l1,200,200,200,200,1xe">
shape>
说明：
用字母m（moveto命令）定义图象初始点的坐标，例子中为（1,1）
用字母l（小写的L字母，lineto命令）开始画线，先画到（1,200），再画到（200,200），再画到（200,1）
用字母x（close命令）关闭线条
用字母e（end命令）结束
注意：
每两个数字组成一个坐标
Title:
鼠标移动到图象上时的提示文字
Style:
图象的样式
Filled:
决定闭合路径中是否需要填充（True/False）
StrokeColor:
图象路径的颜色
2.Shape元素有效的子元素
TextBox:
在图象中定义一个文本框
用法：
shape>
textbox>VML
textbox>
shape>
TextPath:
设置文字路径，要使用该属性，path属性的TextPathOK一定要为true;并且TextPath的on属性要为true
example:
v="urn:
schemas-microsoft-com:
vml"
xmlns:
o="urn:
schemas-microsoft-com:
office:
office">
VMLSample
shapefillcolor="green"
style="position:
relative;top:
100;left:
100;width:
300;height:
300"
path="m1,1l1,250,250,500,500,500,500,250,250,1xe"
title="test"strokeColor="yellow">
filltype='gradient'id='fill1'color='yellow'/>
textbox>VML
textbox>
shape>