结合GFX，DnD与Dijit创建基于Dojo的Web图形类应用

结合GFX，DnD与Dijit创建基于Dojo的Web图形类应用2011-02-08 IBM 林林杨扬GFX（dojox.gfx）作为 Dojo 扩展组件之一，封装了底层浏览器中实际的图形引擎，使开发人员具备了 Web 绘图的基本能力，是此类应用的基础。同时，作为 Dojo 核心组件的 DnD（dojo.dnd），则实现了基于浏览器的鼠标拖拽操作，从而为图形组件选择，组件间连线等高级绘图操作提供了技术支持。再者，通过引入自定义 Dojo 小部件（dijit），开发人员可以对已有应用进行合理的扩展，使用户可以通过更为灵活的方式去操作图形。本文首先将对基于浏览器的绘图原理做一介绍，而后以层进的方式向读者展示如何将 GFX，DnD 以及 dijit 进行紧密的结合，在浏览器中完成绘图类应用常见的各种操作，最后将通过一个实际的 Web 绘图应用来让读者对本文所述内容有更进一步的体会。

浏览器绘图的基本原理

基于 HTML 和 JavaScript 的浏览器绘图方式，依赖于各个浏览器内部所提供的图形引擎。但由于不同浏览器所支持的网络图形标准不尽相同，给软件的兼容性造成了很大的困难。Dojo 作为目前流行的 JavaScript 框架之一，虽然在一定程度上为开发人员屏蔽了这些差异，但当遇到某些特殊的绘图需求时，仍显得力不从心，因而也就有必要对浏览器绘图的基本原理有所了解，这样才会写出性能更稳、效率能高的优秀代码。目前几个主流的网络图形标准包括 IE 支持的 VML，Firefox，Safari 和 Opera 支持的 SVG 以及 HTML5 支持的 Canvas。

VML 是微软开发并在 IE 5.0 以上版本提供支持的基于 XML 的一种标记语言，使用 VML 描述的矢量图形，由 shape 和 group 两个基本元素定义，shape 描述了一个矢量图形元素，而 shape 则将这些图形元素集合在一起，从而使其可以作为一个整体被处理。由于使用简单的文本来表示图像，因而 VML 可用很少的字节来表示相对复杂的图像。

SVG 是由 W3C 制定的同样基于 XML 的矢量图形描述语言，SVG 元素是指示如何绘制图像的一些指令，由图形引擎解释这些指令，把 SVG 图像在浏览器上显示出来。使用 SVG 可以在网页上显示出各种各样的高质量的矢量图形，其最明显的特征是灵活的文件格式，矢量图形、位图和文字三部分共同组成一个 SVG 图形，并具备对运行中的 Web 页面图像进行实时修改的能力。

Canvas 是指 HTML 5 中新加入的 canvas 元素，最初由 Apple 的 Safari 浏览器引入，而后受到 Firefox 和 Opera 的广泛支持。Canvas 元素相对 VML 和 SVG 的一个重要不同在于，canvas 提供了通过 JavaScript 绘制图形的方法，每一个 canvas 元素都有一个上下文，在其中可以绘制任意图形；而 SVG 和 VML 都使用 XML 文档来描述图形，开发人员通常通过修改其中的 XML 标记来完成对图像的修改。

明确了不同标准之间的差异，便更体会到 JavaScript 框架给开发人员所带来的便捷，下面这样一段 Dojo 代码，可以在 IE 和 Firefox 下渲染出相同效果的的图形。但透过现象来发

现本质，我们使用 Firebug 不难看出同一图形在不同浏览器背后的不同实现。

var surface = dojox.gfx.createSurface（gTestContainer, 300, 300）;
  var line = surface.createLine（{ x1: 20, y1: 20, x2: 100, y2: 100 }）
  .setFill（[255, 0, 0, 0.5]）.setStroke（{color: "red", width: 5}）
  .setTransform（{ dx:70, dy: 100 }）;
  var circle = surface.createCircle（{ cx: 170, cy: 200, r: 50 }）
  .setFill（[0, 255, 0, 0.5]）;

图 1 是 IE 下 VML 图形 DOM 结构， Firefox 下 SVG 图形的 DOM 结构则如图 2 所示。所以，应该了解的是，Dojo 所提供的上层绘图 API，是能够根据不同的浏览器选择生成相应标准的绘图元素，这种封装的方式自然也就无法顾及各个绘图标准的独特之处，因而当我们在进行某项较为复杂的绘图操作或者调试一个跨浏览器的代码缺陷时，不妨先确认一下 Dojo 是否很好的兼顾了这个问题，如果没有，那就需要我们针对不同的浏览器编写相应的代码来屏蔽这些差异。

图 1. IE 下 VML 图形的 DOM 结构