1引言
目前，主流的浏览器主要有IE
、
Firefox、
Safari
、
Opera
、
Chrome
等，他们对矢量绘图的支持不尽相同，如
IE
支持如
VML
、
sliverlight
,而其他浏览器大多数支持
SVG
和
canvas,IE
的独断
专行使很多程序员都很苦恼，无法按照一个统一的标准来实现矢量绘图，往往一个矢量绘图页面要实现不同的两套方案和不同的两段代码.
GFX为开发者屏蔽了浏览器之间的区别，良好的解决了在浏览器中进行动态图形操作的兼容性问题（在
IE
中使用
VML
进行渲染，其他浏览器中使用
SVG
）。同时
GFX
借助
Dojo
中
良好的特性
，能够帮助用户快捷的创建数据可视化，
事件绑定，
图形界面操作等功能。
2、
GFX包分析
2.1、
GFX
目录结构
GFX在
dojo
库的
dojox
包下中的
gfx
目录，目录结构如下图所示：
与GFX
相关的文件大致分为两部分，
dojox
根目录下的
gfx.js
和
gfx
目录，包中大致分为图形类、渲染类、工具类。
2.2、
GFX
类分析
（1
）图形类
图形类大致为以下三个文件shape
、
path
、
vectorText
，
shape.js
是一个图形抽象基类，其中包括
surface ,group,
rect, line, ellipse, circle, polyline, image这一系列子类以及一些基本方法的接口，如
setFill
和
setStock
等方法（具体阅读源代码），
这些方法将在相应的render
中具体实现。
由于path
和
vectorText
比较特殊所以独立放在各自的类中。
（2
）渲染类
目前GFX
中渲染类主要有
svg
、
vml
、
canvas
、
sliverlight
几个主流的矢量绘图技术，我们通常称他们为
render
，判断使用哪个
render
的工作主要在
dojox
根目录下的
gfx.js
中进行，他会判断当前用户的浏览器类型以及版本然后指定相应的
render
来进行渲染，一般默认以
SVG
和
VML
为主，用户也可以指定使用相应的
render
，在这些类中都基本上对所有图形类进行了继承，对他们的方法都进行了重写来适应不同浏览器的要求来达到一致的效果。
（3
）工具类
工具类主要有以下几个功能、实现图形移动、图形矩阵变换、图形动画效果等这些分别有几个js
文件来实现，这里不做一一介绍。
3、
简单的GFX
实例
3.1准备工作
使用 GFX
绘图的时候，首先要在页面当中加入
dojo.js
文件，并且加载
GFX
包，代码如下：
<script type="text/javascript" src="dojo/dojo.js" ></script>
<script type="text/javascript">
dojo.require("dojox.gfx");
</script>
3.2创建
surface
surface 是
GFX
模型中的一个概念，表示了一个所有形状的矩形虚拟容器，每一个页面都可以有多个这样的容器，每一个容器都有一个本地的坐标系统，
X
轴水平指向右侧，
Y
周垂直指向下。
<div id="container"></div>
<script>
var gfxContainer= dojo.byId('container');
var surface = dojox.gfx.createSurface(gfxContainer, 400, 400);
<script>
这样我们就在一个dom
节点上创建了一个
surface
，尺寸为
400x400
。
gfxAPI
就会根据不同的浏览器环境将自动将这段代码转换为相应的
svg
节点或者
vml
节点。
3.3创建一个简单的圆
Gfx提供了一系列
createApi
来创建你想要的图形
：
createPath(path),
createRect(rect),
createCircle(circle),
createEllipse(ellipse),
createLine(line),
createPolyline(polyline),
createImage(image),
createText(text),
createTextPath(textpath)
所传入的属性为构造他们的shape
对象
，具体如下所示：
var circle = { cx: 100, cy: 100,r: 60};
var gfxcircle = surface .createCircle(circle).setFill("yellow").setStroke("blue");
同时可以在上述shape
对象中加入
type
再和
creatShape
（
shape
）配合来创建相应的图形
，当然在IE
上是
vml
，在
firefox
上就是
svg
了
。
小结
本文主要针对gfx
工作原理，对解析流程进行了剖析，主要着重于介绍实现原理，没有对使用细节进行具体阐述，具体用法请参见
dojocampus
。
参考文献
[1]
dojo中文技术社区
[2]
dojo文档