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

核心提示： 图 4. 默认 Avatar 与自定义 Avatar默认 Avatar 自定义 Avatar引入自定义 Dijit，扩展画图应用从图形操作的完整性而言，结合 GFX，DnD 与 Dijit 创建基于 Dojo 的 Web 图形类应用(10)，到目前为止我们具备了对图形的增加以及移动能力，那么如何

图 4. 默认 Avatar 与自定义 Avatar

默认 Avatar 自定义 Avatar

引入自定义 Dijit，扩展画图应用

从图形操作的完整性而言，到目前为止我们具备了对图形的增加以及移动能力，那么如何实现针对图形本身的修改和删除等操作呢？从 Web 2.0 应用所应为用户带来的全新用户体验的角度出发，我们引入自定义 Dijit，实现一个针对单个图形对象的操作工具栏，工具栏提供各种针对当前的图形的功能选项，从而实现图形的删除，修改等操作。

Dijit 是 Dojo 为开发人员提供的具有高可复用性的小部件，其本质是一组相对独立的 HTML/CSS/JavaScript 代码片段，常见的如日历，Combobox，Tree 等常用 UI 小部件都可以直接使用 Dojo 预置的 Dijit 来实现，但通常我们为了满足特定应用的需求，更常编写自定义的 Dijit 来完成。

为了能将 GFX 图形与自定义 Dijit 加以结合，首先需要编写好一个图形操作工具栏 dijit，代码如 清单 5所示。这个 Dijit 包含三个功能选项，即删除图形和放大 / 缩小图形。

清单 5. 图形对象操作工具栏 dijit

　MyToolbar.html:　
　<div　class="toolbar">　
　<button　dojoAttachPoint="enlargeNode">+</button>　
　<button　dojoAttachPoint="lessenNode">-</button>　
　<button　dojoAttachPoint="removeNode">X</button>　
　</div>　
　
　MyToolbar.css:　
　.toolbar　{　
　position:absolute;　
　background:#666666;　
　}　
　.toolbar　button　{　
　margin:0;　
　padding:0;　
　}　
　
　MyToolbar.js:　
　dojo.provide("demo.MyToolbar");　
　dojo.require("dijit._Widget");　
　dojo.require("dijit._Templated");　
　
　dojo.declare("demo.MyToolbar",　[dijit._Widget,　dijit._Templated],　{　
　templatePath:　dojo.moduleUrl("demo",　"MyToolbar.html"),　
　
　enlargeNode:　null,　
　lessenNode:　null,　
　removeNode:　null,　
　
　shape:　null,　
　
　postCreate:　function()　{　
　dojo.connect(this.enlargeNode,　"onclick",　this,　"onClickEnlarge");　
　dojo.connect(this.lessenNode,　"onclick",　this,　"onClickLessen");　
　dojo.connect(this.removeNode,　"onclick",　this,　"onClickRemove");　
　},　
　
　setPosition:　function(pos)　{　
　dojo.style(this.domNode,　{　
　　left:pos.x　+　"px",　
　　top:　pos.y　+　"px"　
　　});　
　},　
　
　onClickEnlarge:　function()　{　
　console.info("Enlarging　a　shape.")　
　},　
　
　onClickLessen:　function()　{　
　console.info("Lessening　a　shape.")　
　},　
　
　onClickRemove:　function()　{　
　this.shape.removeShape();　
　}　
　});