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

核心提示： SVG 是由 W3C 制定的同样基于 XML 的矢量图形描述语言，SVG 元素是指示如何绘制图像的一些指令，结合 GFX，DnD 与 Dijit 创建基于 Dojo 的 Web 图形类应用(2)，由图形引擎解释这些指令，把 SVG 图像在浏览器上显示出来，不妨先确认一下 Dojo 是否很好的兼顾

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 是否很好的兼顾了这个问题，如果没有，那就需要我们针对不同的浏览器编写相应的代码来屏蔽这些差异。