使用 DojoX GFX 进行绘图

核心提示： 我们首先获取了页面中一个 DOM 节点的引用，这里试用了 Dojo 的 DOM 获取函数 dojo.byId()，使用 DojoX GFX 进行绘图(3)，之后使用 dojox.gfx.createSurface()创建 surface，其中需要三个参数，我们就可以在上面绘制我们需要的形状了，s

我们首先获取了页面中一个 DOM 节点的引用，这里试用了 Dojo 的 DOM 获取函数 dojo.byId()。之后使用 dojox.gfx.createSurface()创建 surface。其中需要三个参数，第一个是需要创建 surface 的 DOM 节点，第二个是这个 surface 的宽度，第三个是 surface 的高度。dojox.gfx.createSurface()语句在执行的过程中会自动把相关的节点转换成 svg 节点或者 vml 节点（在 IE 下）。

需要指出的一点是，如果创建 surface 是基于一个使用 JavaScript 创建出来的 DOM 节点，需要在创建 surface 之前，把创建出来的 DOM 节点和现有页面的 DOM 节点绑定起来。

清单 3. 在动态创建的 DOM 节点上生成 surface
　var　surfaceHolder　=　document.createElement('div');　
　var　testHolder　=　dojo.byId('container');　
　testHolder.appendChild(surfaceHolder);　//　在　createSurface　之前执行　
　var　surface　=　dojox.gfx.createSurface(surfaceHolder,　300,　300);　

在上面的例子代码中，第三行 testHolder.appendChild(surfaceHolder)必须在 dojox.gfx.createSurface方法调用之前执行，否则程序会出错。

创建好 surface 之后，我们就可以在上面绘制我们需要的形状了，surface 对象有一系列的方法创建不同的形状。如果我们绘制一个矩形，可以参照如下步骤：

清单 4. 在动态创建的 DOM 节点上生成 surface
　var　rect　=　{　x:　0,　y:　0,　width:　100,　height:　100　};　//　定义一个矩形　
　var　red_rect　=　surface.createRect(rect);//　创建矩形　
　
　red_rect.setFill([255,　0,　0,　0.5]);//　设置填充　
　red_rect.setStroke({color:　"blue",　width:　10,　join:　"round"　});//　设置外部填充的颜色　
　red_rect.setTransform({dx:　100,　dy:　100});//　将矩形移动位置　
　
　red_rect.connect("onclick",　function(){　alert("I　am　a　red　rectangle");　});//　绑定事件