使用 DojoX GFX 进行绘图

核心提示： 对于首先我们定义了一个矩形，描述了矩形的位置和长宽，使用 DojoX GFX 进行绘图(4)，之后我们调用 surface.createRect()方法来创建这个矩形，之后我们分别设置了这个矩形的填充（Fill）和边（Stroke），以及当前用户，这些信息我们使用图片（Image）来显示：另外就

对于首先我们定义了一个矩形，描述了矩形的位置和长宽，之后我们调用 surface.createRect()方法来创建这个矩形。之后我们分别设置了这个矩形的填充（Fill）和边（Stroke），这是两个在 GFX 模型中的概念，分别表示一个形状的内部区域和外部轮廓。

在这个例子当中，我们将矩形的内部区域设置成红色（255,0,0），并且设置透明度为 0.5（透明度的取值在 0 到 1 之间，0 表示完全不透明，1 表示完全透明）。然后我们设置这个矩形的边为 10 个像素宽的蓝色，转角处为圆角（不设的话是默认的方角）。接着我们将我们创建出来的形状向 surface 的 x 和 y 方向分别移动 100 像素。在这个例子当中，我们还为这个长方形增加了一个事件响应函数，在点击到长方形的时候，会弹出一个提示框。程序运行的结果如图 3 所示，点击长方形之后的效果如图 4 所示：

图 3. 示例 1 代码的运行效果


图 4. 点击长方形后出现提示框

动态创建组织结构图

下面我们使用一个例子来介绍如何在我们的页面中加入动态的组织结构图。同时介绍如何使用 DojoX GFX 来画线和使用已有的图片。

在一个组织当中，由于经常会出现人事上的变化，所以很难使用静态的图片来描述相关的组织结构，这里我们使用 DojoX GFX 来绘制一个可以动态变化的结构图。

为了绘制出结构图，我们需要绘制两种类型的元素。首先是组织中的人物，比如领导，下属，以及当前用户，这些信息我们使用图片（Image）来显示：另外就是人物之间的关系，这些信息我们使用路径（Path）来描述。在 DojoX GFX 当中创建一个图片的方式如下：