VML简介
1 VML概述
在VML里面,标记使用的是XML扩张,需要一个namespace(命名空间),你可以使用惯用的“v”作为命名空间,使用IE5.0到IE6.0通用的定义如下:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<STYLE>
v/:* { Behavior: url(#default#VML) }
</STYLE>
xmlns 全称就是XML NameSpace 也就是命名空间。Behavior(行为)也是IE5.0新推出的东西,它的功能非常强大,结合样式表,可以给任何HTML对象增加行为(新的属性、方法、事件),而在这里,它的用处是把命名空间“v”和系统预定义的行为VML连接。这样定义以后,你就可以使用下面的标记了,和普通的HTML标记有所区别,每个标记都增加了一个命名空间:
<v:shape></v:shape>
和其他HTML元素一样,VML标记里面可以定义DHTML大部分属性和事件,比如说id,name,title,onmouseover等等。在写法上VML比较灵活,很多属性既可以写在标记里面,又可以独立出一个新的标记来表示:
<v:shape id=shape1 name=shape1 οnmοuseοver="alert(this.id)" StrokeColor=red Path="m 0,0 l 10,10 x e">
</v:shape>
等同于下面的写法:
<v:shape id=shape1 name=shape1 οnmοuseοver="alert(this.id)">
<v:Stroke StrokeColor=red/>
<v:Path v="m 0,0 l 10,10 x e"/>
</v:shape>
当然不是所有的属性都可以写成独立的标记,常用的比如说上面的 Stroke(按我的理解可以翻译成线性),Path,Shadow,Fill(填充)等,VML这样的方式可以理解为 shape 的属性分类,使属性更直观。
Shape 对象派生出来的一些对象,更加直接的图象,比如说 Rect(矩形),RoundRect(圆边的矩形),Oval(圆),Line(线),PolyLine(不规则折线),Image(图形文件)等等,以后将对这些对象细细描述。
2语法
VML标记是从XML衍生出来,因而采用的都是符合XML规范的标签。在标签中,属性和元素不区分大小写。True和False可以简写为t和f。
2.1 shape图形
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) ,这样的坐标就像数学里面的坐标了,把画版分成了四个块。
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的对象中使用它。
2.2 ShapeType
定义shape的模版,在应用中可以重复使用。
<v:shapetype id="arrowDown" coordsize="6 6">
<v:path v="m 0,0 l 3,6,6,0,0,0 x e" />
</v:shapetype>
定义ShapeType时需要指定id,在后面使用ShapeType需要指定对应shape的type为#arrowDown就可以使用ShapeType模版。
注意:
Adj属性的用法,需要与v:formulas结合起来使用。Adj中的参数顺序为#1,#2,…#n,formulas中的顺序为@1,@2,…@n。
2.3 Line线段
用法:
<v:line style="position:relative" from="0,0" to="100,0" >
<v:stroke dashstyle="Dot"/> <!—线风格-->
</v:line>
线颜色、风格定义可以通过v:stroke来设定。
2.4 PolyLine不规则折线
用法:
<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>
IE5.0不支持箭头,如果设置填充为true那么对应的多边形必须是闭合才能显示填充颜色。
2.5 Rect矩形
用法:
<v:Rect style="position:relative;width:100;height:50px"/>
2.6 RoundRect圆角矩形
用法:
<v:RoundRect style="position:relative;width:100;height:50px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
</v:RoundRect>
Arcsize 圆角的大小默认为0.2。
2.7 Oval椭圆
用法:
<v:oval style="position:relative;left:5;top:5;width:100;height:80"/>
需要注意的是,top和left是圆的左上角坐标,width 和 height 是圆的宽和高,不是圆的半径。其圆心坐标是(left-width/2,top-height/2)。
2.8 Arc弧
用法:
<v:arc filled=false style="position:relative;width:100;height:100" StartAngle="0" EndAngle="270" />
注意:
0角度是从平常的90度开始的。
2.9 Fill填充
相关属性及说明:
属性名称 | 说明 |
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.10 Stroke
相关属性及说明:
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" – rounded join, "bevel" – beveled join, "miter" – miter join,默认为“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.11 Path
在path中既包含了点坐标的信息也包含对应的命令信息常用的有以下命令:
m 移动到指定位置。
l 从前面一点画一条线到指定的坐标位置。
c 从当前点画弧线到指定坐标位置。
x 线段闭合,即从当前点与起始点建立线段连接形成闭合图形。
e 画线结束。
如path=“m 3,0 l 0,6 6,6 3,0 x e”表示的是从(3,0)点出发先画一条线到(0,6),然后再画一条线段到(3,0),x表示闭合即从(3,0)到起点再画一条线段,最后e表示画线结束。