项目中，我们尝试了VML矢量标记语言，满足了需求。如图1，展示了页面模板间的关系。
图1 页面模板关系图
一、 VML概述
VML全称Vector Markup Language（矢量标记语言），是微软1999年9月附带IE5.0发布的。它相当于IE里面的画笔，来绘制矢量图形。结合CSS，可以给任何HTML 对象增加新的方法、事件和属性；结合脚本语言，可以让图形产生动态的效果。这种用文本方式描述矢量图形的语言，目标是在Web 上建立高效、灵活和简洁的矢量图形。图2是通过VML绘出的曲线图，可以和客户端实时交互。
图2 VML绘制的曲线图
1.1 VML的优缺点
1、优点1）基于XML标准
它是基于XML的可用来描述矢量图形的标记语言，因此表示简单，而且易扩展。
2）支持高质量的矢量图形显示
它基于相连接的直线和曲线描述路径。在VML中使用两个基本元素：shape和group。这两个元素定义了VML的全部结构：shape描述一个矢量图形元素，而group用来将这些图形结合起来，使得各图形可以作为一个整体进行处理。
3）由文本构成的图像，并可集成到HTML中
它使用简单的文本来表示图像，这样就可以用很少的字节来表示比较复杂的图像。VML与HTML兼容，通过在HTML中声明VML命名空间和处理函数，就可以和其他HTML元素一样使用VML元素，并在客户端浏览器显示图像。更为方便的是，VML标记里可以定义DHTML大部分属性和事件。
4）可以实现任意想要的形状，轻松实现阴影等效果
它有很多种一级标记和二级标记，可以实现任何想要的形状以及美观效果。只有想不到，没有做不到。
5）支持交互与动画
VML的功能不只是绘图，还可以在图形中嵌入文本，实现超链接，通过脚本实现一定的动画功能。
6）性能
有人将VML和开源的jsgraphics框架进行过比较，得出VML的性能比JavaScript开源框架实现要高30到60倍。JavaScript开源框架实现平均绘制一条线段需要花费8ms，而VML绘制一条线段只需要0.13ms。
2、缺点
1）浏览器局限于IE5.0+。
2）VML是用于客户端的标记语言，所以服务器端代码操作VML元素比较困难。
3）对于如图3这样的不规则图形，需要人工去获得边界的坐标。
4）微软不再更新VML。
图3 VML绘制的中国地图
1.2 VML与GML、SVG的比较
用来描述矢量图形的标记语言除了VML外，还有GML、SVG等，它们都是基于XML的可用来描述矢量图形的标记语言，而且都与矢量图形有着密切的关系。
GML(Geography Markup Language)，是基于XML的空间信息编码标准，封装了地理信息及其属性。它在表示实体的空间信息的同时加入了实体的其他属性信息，是表示实体的空间信息和属性的编码标准，但它不支持直接显示图形。
SVG(Scalable Vector Graphics)，是基于XML的开放的矢量图形描述语言，是一种专门为网络而设计的基于文本的图像格式。与VML相比，SVG是综合了VML的优点后推出的，是国际标准，它比VML具有更多的优点，也有更广阔的前景。但由于VML有IE的支持，而SVG要想在浏览器中显示就需要安装插件（Adobe SVG Viewer），正是由于这点，SVG才没有快速的发展起来。
二、 VML的使用
2.1 VML使用三步曲
1）加入VML命名空间2）CSS中加入behavior
3）使用VML标记
2.2 标记
1、基本标记
1）shape（任意形状）
示例：创建任意曲线
2）line（直线）
示例：创建一条从(0,0)到(200,200)的红色的边框为2px的直线
3）polyline（多边形）
示例：创建不规则的连续线
4）rect（矩形）、roundrect（圆角矩形）
示例：创建一个宽100高100的矩形
5）oval（圆）、arc（圆弧）
示例：创建一个宽400高400边框为红色填充为绿色的圆
6）curve（曲线）
示例：创建一条曲线
7）background（背景）
8）image（图像）
值得注意到是，显示从外部调用的图形文件并没有将之矢量化。
9）shapetype（模板）
为减少代码的书写量和可读性。用shapetype定义好形状，然后用shape的type属性调用。
示例：定义一个向上的三角形，然后调用它
10）group（集合容器）
让一些对象成为一个组，拥有共同的坐标系。这样可以动态改变CoordSize的值，来放大或缩小整个Group里面的VML对象。
2、二级标记
二级标记可以看作是对有限的属性进行扩展，利用它我们可以做出更漂亮的图画出来。
1）fill（填充）
2）stroke（边框）
3）shadow（阴影）
示例：创建一个偏离5像素的阴影
4）extrusion（立体3D）
5）textbox（文本）
6）imagedata（背景图片）
7）textpath（文本路径）
2.3 属性
1）VML特有的通用属性（HTML、CSS不具有）属性名
默认值
值类型/范围
用途
strokeweight
0.75pt=1px
number
描述图形的边框粗度
strokecolor
black
color
描述图形的边框颜色
stroked
true
boolean
描述图形是否使用边框
fillcolor
white
color
描述图形的背景颜色
filled
true
boolean
描述图形是否使用背景
true
boolean
描述图形是否允许被打印机打印
coordsize
1000,1000
Vector2D
暗示图形与容器空间的大小比例
coordorigin
0, 0
Vector2D
元素的左上角坐标
2）VML标记支持的HTML通用属性
属性名
默认值
值类型/范围
用途
id
null
string
定义元素的标识索引
class
null
classname
定义元素使用的CSS样式类
style
null
CSS string
描述图形的CSS样式表
title
null
string
定义图形的提示标题
href
null
string
定义图形链接的URL地址
target
_self
_self/_blank/_top
定义图形以何种形式打开链接
contentEditable
false
boolean
描述图形内容是否允许用户编辑
dir
ltr
ltr/rtl
描述图形内容以哪种方向输出
disabled
false
boolean
描述图形能够响应用户事件触发
3）VML标记支持的CSS通用属性
属性名
可用值/可用值范围
用途
width
0-9999
描述宽度
height
0-9999
描述高度
position
static/absolute/fixed/relative
描述如何定位输出
left
0-9999
描述距离页面位置左
top
0-9999
描述距离页面位置上
z-index
0-9999
描述3D位置
cursor
auto/crosshair/hand/move/help/wait/ text/…
描述鼠标形状
zoom
0-99
描述缩放比例
clip
rect(上 右 下 左)
描述裁剪对象
border
0-99
描述边框
display
block/none/inline/list-item
描述显示或隐藏
overflow
visible/auto/hidden/scroll
描述滚动条
color
colorstring
描述文本内容颜色
font-size
0-999
描述文本内容字号
filter
xray/flipv/fliph/invert/alpha(opacity=num)
描述滤镜效果
rotation
(0-9999)%360
描述旋转度
flip
x y
描述反转或颠倒图形
三、 更多参考
1、http://www.w3.org/TR/NOTE-VML2、http://msdn.microsoft.com/en-us/library/bb263898(VS.85).aspx
3、http://www.w3.org/Graphics/SVG/
ps：本篇文章写于2009年12月，目前VML基本要淘汰了，HTML5的canvas可以代替之
最新评论