VML简介

最新推荐文章于 2019-04-27 23:49:00 发布

tjgjp

最新推荐文章于 2019-04-27 23:49:00 发布

阅读量1.9k

点赞数

文章标签：图形 path html behavior image colors

VML简介

1 VML概述

在VML里面，标记使用的是XML扩张，需要一个namespace(命名空间)，你可以使用惯用的“v”作为命名空间，使用IE5.0到IE6.0通用的定义如下:

<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