vml简介

  VML(Vector Markup Language)

  是一个最初由Microsoft开发的XML词表,现在也只有IE5.0以上版本对VML提供支持。使用VML可以在IE中绘制矢量图形,所以有人认为VML就是在IE中实现了画笔的功能。下面介绍一下VML的优点:

  基于XML标准

  XML是公认拥有无穷生命力的下一代网络标记语言, VML具有先天的优势,它的表示方法简单,易于扩展等等。

  支持高质量的矢量图形显示

  VML支持广泛的矢量图形特征,它们基于由相连接的直线和曲线描述路径。在VML中使用两个基本的元素:shape和group。这两个元素定义了VML的全部结构;shape描述一个矢量图形元素,而group用来将这些图形结合起来,这样它们可以作为一个整体进行处理。

  VML规范包括大量的支持多种不同矢量图形特征的元素。下面是VML的预定义图形元素:

  l Shape

  l Path

  l Line

  l Polyline

  l Curve

  l Rect

  l Roundrect

  l Oval

  l Arc

  l Group

  由文本构成的图像,并可集成到HTML

  由于VML使用简单的文本来表示图像,这样就可用很少的字节来表示比较复杂的图像。VML与HTML兼容,通过在HTML中声明VML命名空间并声明处理函数,就可以和其他HTML元素一样使用VML元素,在客户端浏览器显示图像。VML标记里面可以定义DHTML大部分属性和事件,比如说id, name, title, onmouseover 等等。

  支持交互与动画

  但VML的功能不只是绘图,他还可以在图形中嵌入文本,并可实现超链,还可通过脚本语言实现一定的动画功能。

 

  VML是The Vector Markup Language的缩写。

  参考网站

  MSDN:http://msdn.microsoft.com/workshop/author/vml/shape/introduction.asp

  W3C:http://www.w3.org/TR/NOTE-VML

  首先需要在<HTML> 标签中加上如下引用

  

<HTML xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

  ...

  </HTML>

  如果没有您没有用到OFFICE的扩展功能的话,您可以忽略第二个schema。

  同时,您需要在STYLE元素中注册VML和Microsoft Office Extensions

  

v\:* { behavior: url(#default#VML); }

  o\:* { behavior: url(#default#VML); }

  如果没有您没有用到OFFICE的扩展功能的话,您可以忽略第二个样式的定义。

  下面说说常用的几个元素

  1.Shape元素

  用法:<v:shape ...></v:shape>

  它的常用属性:

  FillColor:图象填充色。

  标签语法:

  <v:element fillcolor="expression">

  脚本语法:

  element.fillcolor="expression"

  expression=element.fillcolor

  Path:指定绘画的路径

  脚本用法:

  <v:shape id="rect01"

  fillcolor="red" strokecolor="red"

  coordorigin="0 0" coordsize="200 200"

  style="position:relative;top:1;left:1;width:20;height:20"

  path="m 1,1 l 1,200, 200,200, 200,1 x e">

  </v: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:在图象中定义一个文本框

  用法:

  <v:shape>

  <v:textbox>VML</v:textbox>

  </v:shape>

  TextPath:设置文字路径,要使用该属性,path属性的TextPathOK一定要为true;并且TextPath的on属性要为true

  详细说明文挡请上参考网站查阅!!!

  简单的例子:

  

<HTML xmlns:v="urn:schemas-microsoft-com:vml"

  xmlns:o="urn:schemas-microsoft-com:office:office">

  <HEAD>

  <STYLE>

  v\:* { behavior: url(#default#VML);}

  o\:* { behavior: url(#default#VML);}

  </STYLE>

  <TITLE>VML Sample</TITLE>

  </HEAD>

  <BODY>

  <v:shape

  fillcolor="green"

  style="position:relative;top:1;left:1;width:200;height:200"

  path = "m 1,1 l 1,250, 250,500, 500,500, 500,250, 250, 1 x e"

  title="test"

  strokeColor="yellow">

  <v:fill type='gradient' id='fill1' color='red'/>

  <v:textbox>VML</v:textbox>

  </v:shape>

  </BODY>

  </HTML>