Web 开发中的矢量绘图处理和应用_H5之家 - 中国HTML5教程资源分享第一站

前言

1991 年物理学家 Tim Berners-Lee 首次在因特网上发布了 HTML 的第一版描述规范文档。经过了 20 多年的发展，HTML 语言成为如今编程最为广泛的语言和互联网上采用最广的文档格式。虽然 HTML 发展十分迅速并具有诸多优点，但其始终不能提供一个良好的矢量绘图解决方案。很多应用为获得绚丽的动画和绘图效果，不得已在页面中嵌入大量的 Flash。这不仅降低了页面元素的交互性，大量的 Flash 同时严重影像了页面性能，更加头疼的是 Flash 内容不能被搜索引擎搜索。虽然有良好的跨浏览器特性，但是用户不得不安装一个浏览器插件。

本文首先针对不同浏览器详细阐述不同的矢量绘图解决方案，其中包括 HTML5 Canvas、SVG 以及 VML 等技术；之后针对每种不同的技术介绍其实现和使用方法；最后本文将介绍如何创建一个跨浏览器的矢量绘图应用，并对当前的一些快浏览器矢量绘图框架进行简单介绍。

VML

VML ( Vector Markup Language ) 矢量可标记语言是一种基于 XML 语法的矢量绘图语言。1998 年由 Autodesk ，Hewlett-Packard ，Macromedia ，Microsoft 几家公司共同向 W3C 提交，并希望能够成为矢量绘图的国际化标准。虽然 VML 最终没有成为 W3C 推荐的矢量绘图标准，但其还是被大量应用于 MS Office、Visio 等软件和 IE 浏览器中。由于 Office 和 IE 的成功和其广阔的市场占有率，VML 已经成为在 IE 中首选的矢量绘图语言。

由于 VML 基于 XML 标准的矢量绘图语言，VML 先天性的具有表示方法简单、易于扩展等优势。简单的一行标记代码就可以使开发人员快速绘制输出线段、圆形、矩形、圆矩形、曲线、多边形、弧型等矢量图形。并且可以通过修饰这些原色的边框、阴影、填充、背景、渐变、箭头等等来增强和提升其外观效果。同时由于 VML 与 HTML 兼容，可以将 VML 与 HTML 混合在一起使用。VML 所绘制的每一个图形，都跟 HTML 元素一样是一个图形对象，同样支持 DHTML 对象编程模型、DHTML 事件编程模型。因此开发人员可以利用 JavaScript 等脚本轻松的读取、更改 VML 图形对象的各种属性，响应用户触发的鼠标、键盘等事件，实现与用户交互。如果有机的配合定时器和一些其他模型，则能实现类似 Flash 般复杂的动画，输出高质量质量动画效果。

VML 的使用非常简单，它采用 HTML 的标签方式来定义和绘制图像。例如下面的代码所示：

清单 1.VML 代码示例

<html xmlns:v="urn:schemas-microsoft-com:vml"> <style>v\:*{behavior:url(#default#VML);position:absolute}</style> <body> <v:oval fillcolor="blue"/> </body> </html>

如清单 1 所示，上面代码是一段简单的 VML 示例代码，绘制出一个蓝色的椭圆形。其中 xmlns 标记的全称是 XML NameSpace，用来指定该文档的命名空间。 Behavior 是 IE5.0 版本以后推出的一个非常强大功能。通常情况下 Behavior 与样式表结合一起使用，给任何 HTML 对象增加新的行为，例如新的属性、方法、事件等等。在上面的示例代码中，Behavior 的用处是把命名空间“v”和系统预定义的行为 VML 连接起来，提供系统默认的 VML 功能。v:oval 标签则定义一个椭圆形的 VML 图形，fillcolor 属性指定该图形用蓝色来填充。

图 1. 清单 1 示例代码效果图

VML 默认定义了许多图形元素，包括：Shape 基本抽象形状，它在 VML 中代表任何形状；Line 直线或者线段；Polyline 代表特殊的线段，它将 Points 属性所指定的一系列的点连接起来；Rect 代表矩形对象，它在流程图的绘制中非常常用；Roundrect 顾名思义为圆角矩形，它的功能和矩形对象基本上同；Oval 是 VML 中的圆形对象，你可以定义它的宽度和高度来得到不同的椭圆形状，还可以通过指定 arc 弧属性来绘制一个圆上一段弧度，利用 Oval 对象我们可以绘制出各种我们想要的曲线；Group 是 VML 中的一个容器标签，它的使用很简单，但功能很强大。它能让一系列的 VML 对象使用共同的坐标系和缩放尺度，这样改变 CoordSize 值可以使得这一组图形的坐标和缩放尺度一起改变。Group 经常被用来实现一组适量图形的动态放大和缩小。

VML 看似简单的标签和属性却定义了很多功能强大的组件。将这些图形标签组合在一起使用可以绘制出很多漂亮、复杂甚至是令人难以想象的画面，例如下图就是一个利用 VML 绘制出的《蒙娜丽莎》画像。如果在于 JavaScript 等脚本混合使用，可以绘制出和 Flash 一样绚丽的动画和游戏效果。

图 2. VML 在 IE 浏览器中绘制出的《蒙娜丽莎》画像

SVG

SVG 是可扩展矢量图（Scalable Vector Graphics）的简称，它是 W3C 组织为适应因特网的飞速发展而制定的一套基于 XML 语言的二维矢量图形的语言描述规范。W3C 中的 SVG 开发工作组的的成员包括了 IBM、Adobe、Apple、Microsoft、AutoDesk 等一批知名厂商，使其成为了通用的标准。而且随着移动通讯的迅猛发展，W3C 又推出了 SVG 的移动版本，并被多个移动设备厂商的多个型号的手机所支持，并成为 3G 时代的一个重要的技术标准。在 PC 平台上，由于 SVG 常用于丰富 Web 页面内容，一部分浏览器已经提供了对 SVG 格式的一些支持，如 Firefox、Safari 等，而 IE 系列浏览器中的 IE6,、IE7 和 IE8 都没有对 SVG 提供支持。但微软显然已经意识到 SVG 标准的已经变得越来越普及，所以不但加入了 W3C 下面的 SVG 工作小组，更是在已经发布的 IE9 的 Beta 版中提供了对 SVG 基本特性的支持。值得注意的是，虽然很多浏览器甚至微软的 IE9 都已经对 SVG 提供一定的支持，但是其中不少只是支持 SVG 标准的部分功能，如果想让这些浏览器全面支持 SVG 标准，需要安装一些 SVG 的浏览插件，比如 Adobe SVG Viewer。借助这些 SVG 插件，浏览器上可支持绝大部分现有 SVG 规范中的内容，这里说“绝大部分”是因为 SVG 至今仍然是一个发展的标准，现在和将来的都会有一些新的变化，这些 SVG 浏览插件只会支持在某个稳定版本下的确定的功能。当前 SVG 的稳定版本是 W3C 于 2003 年 1 月份发布的 SVG1.1，后续版本 SVG1.2 正在研究制定的过程中。