Qunee for HTML5的学习与使用笔记（一）

        在CSDN中的第一篇博文就献给我学习了一段时间，仍然在研究使用的Qunee吧。

        因为是在公司里面后接手的这个插件，上一个使用的同事再简单交接了一下之后，就离开公司了，所以一切的依靠就只有官网啦。所幸在github上面看到了一个叫Graph.Editor的拓扑图编辑器的开源项目，它是一款基于HTML5技术的拓补图编辑器，采用jquery插件的形式，是Qunee图形组件的扩展项目，结合着官网的文档对qunee的使用与学习有很好的帮助。

         附上地址：https://github.com/samsha/graph.editor

        关于编辑器，一些必要引用的js文件说明：

app/             --src/                 --common/  编辑器扩展插件                     --Exportpane.js 图片导出模块                     --i18n.js    语言模块                     --JSONSerializer.js  数据序列化模块                     --PopupMenu.js  右键菜单模块                     --Toolbar.js  工具栏模块                     --PropertyPane.js  属性面板模块                     --ToolBox.js  左侧工具箱模块                     --GridBackground.js  网格背景模块                     --DomSupport.js                     --DragSupport.js                     --FileSupport.js                     --JSONSerializer.js                 --graph.editor.js  拓扑图编辑器插件                 --css/    编辑器样式及需要的图片                     --graph.editor.css             --libs/  第三方类库             --scripts/  示例脚本

        编辑之处，该编辑器采用的是jq的方式：

$('#editor').graphEditor({             callback: 回调函数,             data: json数据地址,（选填）             images: 左侧可拖拽图标信息         })

        回调函数的编写方式：

callback:function (editor){             var graph = editor.graph;//画布对象         }

        如果在画图过程中需要给画布某一个元素设置统一的属性，则可以直接将属性赋值给graph

例：             设置画布内所有连线皆没有箭头，即可写为：                 graph.styles["arrow.to"] = false;

        默认画布的初始坐标原点在组件中心点，这意味着(0, 0)坐标的节点将呈现在组件的中心，如希望初始坐标原点位于组件左上角，可以设置下面的参数

graph.originAtCenter = false;

        将整个画布移动到组件中心

graph.moveToCenter()

        注：如果页面是通过iframe引入的话，最好在画完之后引入一个一次性定时器，以防画布在页面高度没有改变钱就把组件都画完,导致画布内组件都很小。

setTimeout(function(){         graph.scale = 1;         graph.moveToCenter();     },100)