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] http://dojocn.com/ dojo中文技術社區
[2] http://docs.dojocampus.org/ dojo文檔