使用 DojoX GFX 进行绘图

核心提示： GFX 是一套跨平台的图形生成包，底层模型大致参照了 SVG，使用 DojoX GFX 进行绘图(2)，展现层同时支持 SVG 和 VML，GFX 可以帮助用户生成基于网页的矢量图，每一个容器都有一个本地的坐标系统，X 轴水平指向右侧，能够做到动态生成以及和用户发生交互，能够支持的图形包括矩形（

GFX 是一套跨平台的图形生成包，底层模型大致参照了 SVG，展现层同时支持 SVG 和 VML。GFX 可以帮助用户生成基于网页的矢量图，能够做到动态生成以及和用户发生交互。能够支持的图形包括矩形（Rectangle），圆弧（Circle），椭圆（Ellipse），多边形（polygon），线（Line），路径（polygon），图片（Image），文本（Text），文本路径（TextPath）。

如果下载 Dojo 源代码的话，可以在其中找到全部的演示和测试文件，可以发现使用 GFX 可以创建出来非常漂亮的图形和交互效果。比如这个虎头：

图 2.Dojo GFX 示例

用户可以再 Dojo 的网站上下载相关的 源代码，来查看里面的演示和测试文件。

一个简单的例子

使用 GFX 绘图的时候，首先要保证在需要的页面当中加入 dojo.js 文件，并且加载 GFX 包，代码如下：

清单 1. 准备工作
　<script　type="text/javascript"　src="dojopath/dojo.js"　djConfig="isDebug:　true"></script>　
　<script　type="text/javascript">　
　dojo.require("dojox.gfx");　
　</script>　

之后需要创建一个 surface。surface 是 GFX 模型中的一个概念，表示了一个所有形状的矩形虚拟容器，每一个页面都可以有多个这样的容器，每一个容器都有一个本地的坐标系统，X 轴水平指向右侧，Y 周垂直指向下。

创建一个 surface 的代码如下：

清单 2. 创建 surface
　var　surfaceHolder　=　dojo.byId('container');　
　var　surface　=　dojox.gfx.createSurface(surfaceHolder,　300,　300);