多位客户提到编辑器的需求，譬如拖拽创建节点，文本编辑，连线编辑，尺寸编辑等等，编辑是一个系列话题，将陆续作介绍，本章介绍拖拽创建节点与简单的连线编辑交互
拖拽创建节点
拖拽创建节点，以前要实现拖拽，需要监听全局mousemove事件，复制拖拽元素，实现drop效果，现在HTML5提供了新的拖拽事件，处理起来变得很容易
Qunee for HTML5 v1.2版本正式发布了，此次更新增加了染色、分组图元、导出预览等重要新功能，增加了四个示例，敬请升级，在线演示：http://demo.qunee.com
传统的HTML事件监听方式
通常使用on***对HTML元素添加事件监听，比如
button.onclick = function(evt){
console.log(evt);
}
很自然的，用户在使用Qunee组件时也会想到这种用法，试图直接在Node上添加onclick监听，结果出现问题，正确的写法应该是这样
graph.onclick = function(evt){
var element = evt.getData();
Q.log(element);
}
什么是网络拓扑
网络拓扑，指构成网络的成员间特定的排列方式。分为物理的，即真实的、或者逻辑的，即虚拟的两种。如果两个网络的连接结构相同，我们就説它们的网络拓扑相同，尽管它们各自内部的物理接线、节点间距离可能会有不同。 – 维基百科
网络拓扑图的绘制
很多人用visio绘制网络拓扑图，非常精美，但只能静态示意，也有些传统的拓扑图中间件，基于Java、flex或者Silverlight技术，能够动态显示，只是界面略显沉重，于是有人尝试纯Web技术的图形组件，其中有不少佼佼者如：mxgraph, yfiles…… 都是老外开发的产品，类库巨大，售价昂贵，技术支持是个问题，那么有没有一种轻巧、干净、国产的纯Web拓扑图组件呢？于是就有了Qunee – 开发清新、高效的图形组件
Qunee是一套基于HTML5的网络图组件，提供Web图形解决方案，借助Qunee，可以轻松完成 地图，拓扑图，组织图等等，官方网站：qunee.com, 在线演示：demo.qunee.com
原文：http://www.sw-engineering-candies.com/snippets/webgl/hello-world
这不是一个平常看到的Hello World示例，因为他不只是简单的打印”Hello World”，这个WebGL示例包含了很多引用代码，但这对于WebGL来说是很典型的，写一个最简单的WebGL应用无法体现WebGL的价值
你会注意到很多代码需要本地WebGL，如果你使用three.js这样的类库，引用代码会减少到最少，在这些文章中你会看到three.js示例：Experimental Visualization of Artificial Neural Network with WebGL or Extremely Fast and Simple WebGL Motion Detector to Rotate 3D Graphic
前提条件&预期结果
目前支持WebGL得浏览器还很少（参见：Can I use WebGL? ），下面的例子在Chrome 16 – 23 for win32以及firefox for android 17下做了测试，如果你的浏览器不支持webGL，你会看到下面的警告
Your browser doesn’t appear to support the HTML5 <canvas>element.
运行效果：
图形组件的基础是图形，图形的基础是2D，如形状，路径片段，渐变填充，边框等，SVG中每个图形要素都有对应的标签元素，Canvas中则提供了一些绘制函数，路径和形状的管理需要自己实现，Qunee组件中提供了丰富的基本图形
Qunee默认图形的效果
客户常常提到思维导图，喜欢它的结构展示方式，和交互的友好，从图论的角度看，思维导图本质上是一种树，有一个根节点（主题）出发，联想到其他话题，于是分支开花，再分支，有时候也会构成网络结构，由子分支联想到另一个已有分支，但通常不破坏原有结构
