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

核心提示：GFX（dojox.gfx）作为 Dojo 扩展组件之一，封装了底层浏览器中实际的图形引擎，结合 GFX，DnD 与 Dijit 创建基于 Dojo 的 Web 图形类应用，使开发人员具备了 Web 绘图的基本能力，是此类应用的基础，从而使其可以作为一个整体被处理，由于使用简单的文本来表示图像，同时，作为 Dojo 核

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 可用很少的字节来表示相对复杂的图像。