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

核心提示： 在上面，我们不难发现，结合 GFX，DnD 与 Dijit 创建基于 Dojo 的 Web 图形类应用(9)，在图形的整个拖放的过程中，使用 creator() 方法生成的拖放对象如图 4 左侧所示，清单 4 自定义 Avatar 的实现代码，清单 4. 实现自定义 Avatardojo.dec

在上面，我们不难发现，在图形的整个拖放的过程中，使用 creator() 方法生成的拖放对象如图 4 左侧所示，这是 DnD 默认移动过程中的对象呈现形式。如果开发人员希望能够使用相应图形的缩略图来表示当前选择的图形，则需要 DnD 中另外一个重要的概念 Avatar，dojo.dnd.avatar 是源区域中的实体在拖放过程中的“化身”，如果我们需要更个性化的“化身”，就需要重写 dojo.dnd.Manager 中的 makeAvatar() 方法。图 4 右侧则是实现了缩略图形式的 Avatar，清单 4 自定义 Avatar 的实现代码。

清单 4. 实现自定义 Avatar

　dojo.declare("demo.MyAvatar",　dojo.dnd.Avatar,　{　
　construct:　function(){　
　　//　使用　GFX　创建一个　r=20px　的绿色圆形　avatar　
　var　avatarNode　=　dojo.doc.createElement("div");　
　dojo.style(avatarNode,　{　
　position:　"absolute"　
　});　
　var　surface　=　dojox.gfx.createSurface(avatarNode,　40,　40);　
　surface.whenLoaded(dojo.hitch(this,　function()　{　
　　surface.createCircle({cx:　20,　cy:　20,　r:20})　
　　　　.setFill([0,　255,　0,　0.5])　
　　　　.setStroke({color:　"green",　width:　1});　
　　}));　
　//　由于在　dojo.dnd.Avatar　的　destroy　方法中会销毁　this.node，所以需要将创建的　avatar　赋给　//this.node　
　this.node　=　avatarNode;　
　},　
　update:　function(){　
　　//override　as　empty,　do　nothing　
　}　
　});　

　//　重写　makeAvatar　方法，其中使用　demo.MyAvatar　
　dojo.dnd.manager().makeAvatar　=　function(){　
　return　new　demo.MyAvatar(this);　
　};