使用 DojoX GFX 进行绘图

核心提示： 清单 5. 创建图片varimage=surface.createImage({width:48,height:48,src:"imagePath/imageName.jpg"});创建图片和创建一个矩形的方式类似，直接调用 surface.createImage方法，使用

清单 5. 创建图片
　var　image　=　surface.createImage({　
　　　　　　width:　48,　
　　　　　　height:　48,　
　　　　　　src:　"imagePath/imageName.jpg"　
　　　　});　

创建图片和创建一个矩形的方式类似，直接调用 surface.createImage方法，然后传入图片的宽度，高度和图片路径。

在 DojoX GFX 当中创建一个路径的方式如下：

清单 6. 创建路径
　surface.createPath()　
　.moveTo(0,　1)　
　.curveTo(1,　0,　2,　1)　
　.setStroke({　color:　"blue",　width:　1　});　

清单 6 中首先使用创建了一个路径，之后使用 moveTo方法将起点移动到 （0,1）处，然后绘制曲线到 （1, 0）和 （2,1）处，之后再为整个路径设置颜色和宽度。

由于 DojoX 在实现路径（Path）的绘制是试用了 SVG 的模型，所以我们可以使用路径字符串创建路径：

清单 7. 使用字符串来创建路径
　surface.createPath(M0　1　C1　0　2　1)　
　.setStroke({　color:　"blue",　width:　1　});　

清单 7 中的代码的运行效果和清单 6 中的一样。

程序运行的结果如图 5 所示：

图 5. 组织结构图示例代码的运行效果

点击增加经理或者增加员工的按钮，会增加经理或者员工的数量，然后根据当前的数据，重新绘制组织结构图，绘制组织结构图的代码 清单 8 所示：

清单 8. 结构图的绘制
　function　drawGraph(){　
　dojox.data.dom.removeChildren(dojo.byId("container"));　
　surface　=　dojox.gfx.createSurface("container",　surfaceWidth,　surfaceHeight);　
　drawIcons();　
　drawLinks();　
　}