在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.moveToCenter() |
注:如果页面是通过iframe引入的话,最好在画完之后引入一个一次性定时器,以防画布在页面高度没有改变钱就把组件都画完,导致画布内组件都很小。
setTimeout(function(){ graph.scale = 1; graph.moveToCenter(); },100) |