使用 DojoX GFX 进行绘图

核心提示： 在每一次重新绘制之前，都需要将上一次绘制的结果清空，使用 DojoX GFX 进行绘图(6)，由于 DojoX GFX 会创建对应的 SVG 或者 VML 节点来完成绘图，所以在每一次根据新的数据重绘之前，则需要进一步了解 Dojo 工具包的其他部分，例如事件，我们都需要清空当前 surface

在每一次重新绘制之前，都需要将上一次绘制的结果清空。由于 DojoX GFX 会创建对应的 SVG 或者 VML 节点来完成绘图，所以在每一次根据新的数据重绘之前，我们都需要清空当前 surface 所在的 DOM 节点（在这个例子当中，即 id 是 container 的 DIV 节点）下的所有子节点。否则，两次绘制的元素会重叠起来。在这里，我们试用了 DojoX Data 中的 dojox.data.dom.removeChildren（domNode）方法，该方法可以删除指定 DOM 节点下的所有子节点。

然后我们调用 dojox.gfx.createSurface方法创建一个 surface，这里可以看到我们可以直接传一个 DOM 节点的 id 给 dojox.gfx.createSurface方法，效果和传递一个 Dom 节点是一致的。

然后分别执行 drawIcons方法和 drawLinks方法来绘制相应的图片和路径，在每一次更改了经理和下属的数量之后，都需要重新计算所有图片和连线的位置。其中，绘制经理和当前使用者之间连线的代码如下：

清单 9. 经理和使用者之间连线的绘制
　0　　function　drawFromManagers(){　　
　1　　　var　interspace　=　surfaceWidth/(managerNum　+　1);　
　2　　　var　endx　=　surfaceWidth/2　+　iconWidth/2;　
　3　　　var　endy　=　surfaceHeight/3;　
　4　　　for(var　i=0;i<managerNum;i++){　
　5　　　　　var　startx　=　interspace　+　i*interspace　+　iconWidth/2;　
　6　　　　　var　starty　=　iconHeight;　
　7　　　　　surface.createPath()　
　8　　　　　　.moveTo(startx,　starty)　
　9　　　　　　.curveTo(startx,　(starty　+　endy)/2,　endx,　(starty　+　endy)/2,　endx,　endy)　
　10　　　　　　.setStroke({　color:　"red",　width:　1　})　
　11　　　　　　.setFill(null);　　
　12　　　}　
　13　　}　

我们首先在第 1 行根据当前绘图区域的宽度和经理的数量，计算图片之间的间距。然后在第 2，3 行确定所有连线共同的终点（就是代表使用者的图片的位置）。然后使用一个循环，根据图片间距以及图片的宽度和高度，计算出每个图片所在的位置（第 5，6 行），接着以这个位置为起点，绘制一条连线。为了使线段美观，中间还绘制了曲线（第 9 行）。绘制曲线需要的两个中间节点根据起点和终点的位置共同确定。

关于其他具体的实现细节可以参考附件中的代码。

小结

GFX 是一个跨平台的交互图形工具包，基本上基于 SVG 作为底层模型，能够为用户提供图形渲染，图形操作，图形交互等诸多功能。更重要的是，GFX 为开发者屏蔽了浏览器之间的区别，良好的解决了在浏览器中进行动态图形操作的兼容性问题（在 IE 中使用 VML 进行渲染，其他浏览器中使用 SVG）。同时 GFX 借助 Dojo 中其他功能工具，能够帮助用户快捷的创建数据可视化，图形界面操作等功能。

在创建具体图形的过程中，用户需要了解 SVG 的很多具体细节，例如绘制连线的过程中，需要熟悉 Path的各种属性，才能够做出预想效果。而更加复杂的图形一般基于多个基本图形才能够完成。如果希望在图形上附加更多的功能，则需要进一步了解 Dojo 工具包的其他部分，例如事件，数据等等。

本文示例源代码或素材下载