结合 GFX，DnD 与 Dijit 创建基于 Dojo 的 Web 图形类应用

核心提示： 图 3. 实现 Web 绘图类应用的基本组织结构图使用 GFX，实现基本绘图GFX (dojox.gfx) 是 Dojo 提供的一套跨平台的图形生成包，结合 GFX，DnD 与 Dijit 创建基于 Dojo 的 Web 图形类应用(4)，用于生成基于 Web 的矢量图，能够做到动态生成以及和用

图 3. 实现 Web 绘图类应用的基本组织结构图
　

使用 GFX，实现基本绘图

GFX (dojox.gfx) 是 Dojo 提供的一套跨平台的图形生成包，用于生成基于 Web 的矢量图，能够做到动态生成以及和用户发生交互。使用 GFX 并非一件难事，其概念模型非常简单，由绘图画面（surface）、图形（shape）以及组（group）构成。开发人员只需首先创建一个绘图画面，而后调用 GFX 中提供了图形创建 API，即可完成相应图形的绘制。对于一些常见的绘图操作，都可以通过设置图形对象相应的属性来实现，例如图像的边框以及颜色填充，可以通过 Stroke 和 Fill 属性进行设定，而图形之间的叠放层次则可以使用 z-order 来控制，z-index 值最大的图形位于整个画面的最上方。清单 1 是使用 GFX 绘制一条简单的直线，虽然简单但完整展示了 GFX 绘图的基本步骤。

清单 1. GFX 绘图基本步骤

　<script　type="text/javascript"　src="dojo/dojo.js"　djConfig="parseOnLoad:true,　
　gfxRenderer:'svg,silverlight,vml'　"></script>　
　//1.　加载　gfx　包　
　dojo.require("dojox.gfx");　
　
　dojo.addOnLoad(function(){　
　//2.　获取　DOM　节点，用于创建　surface　
　gTestContainer　=　dojo.byId('testcontainer');　
　
　//3.　创建　300*300　的绘图画面　
　var　surface　=　dojox.gfx.createSurface(gTestContainer,　300,　300);　
　　
　//4.　在画面上绘制直线，并设置相应填充色、线条以及位移等属性　
　surface.whenLoaded(dojo.hitch(this,　function()　{　
　var　line　=　surface.createLine({x1:　20,　y1:　20,　x2:　100,　y2:　120})　
　.setFill([255,　0,　0,　0.5]).setStroke({color:　"red",　width:　5});　}));　
　});　
　</script>