【原创】一个简单的SVG在线图形编辑器
需求
根据现在监控项目需要,对应用维护的资源组件(主机、数据库和中间件服务器)可有用户按照自己的业务系统,将相关的资源组件放到一个视图里面查看监控数据,资源在一个视图里如何放置,是星型辐射还是树形组织结构很难把握,所以想做一个在线的图形编辑器,类似微软VISIO的画图工具,选取组件连线即可完成。
实现技术
SVG、EXT 2.0
方法
我在写这个模块的时候尚未找到可以很好支持SVG图形拖拽等复杂操作的JS库,所以,很笨的,对SVG图形的创建图形、删除图形、拖拽、画连接线、删除连接线等都是一个个鼠标事件句柄函数,为了将零散的JS代码块尽量结构话,遵循面向对象的原理,控制EXT布局的功能在layoutController.js定义的全局静态对象LayoutController完成,控制SVG图形创建、退拽的动作的功能在svgController.js定义的全局静态对象SVGController完成,这两个主要的对象使用了JS闭包,模拟高级编程语言的权限控制,使得拥有类似public和private类似的权限访问,所以在后面涉及相互应用对象和对象中的局部变量时,需要使用相应的getter方法,为了减少getters和setters,使用了handle和localVariant两个变量封装。
尚未完成的部分
1 资源组件冒泡明细
冒泡提示框已经做完,具体内容可以从数组对象中获取,将明细等填充进去
2 存储图形
思路已经想好,SVG图形在SVGController对象中以componentArray保存在数组中,连线以lineArray保存在数组中,而且这些数据都是JS对象,可以使用JSON数据格式编码保存于服务器端,从新读取数据库保存的该图形的JSON数据,前台可以还原。
界面
PS
由于本身不是做美工的,所以SVG图片所代表的资源组件显得很拙劣,请勿见笑。
代码和界面请在附件下载,需要使用AJAX从后台获取的数据改为从本地JSON文件中读取,实际使用过程中为url,将源码包放置于TOMCAT应用下,url地址设置为http://localhost:8080/BusinessTopology/carrier.jsp即可访问
注:本博客文章均已注明原创和转载,如转载本博客文章,需注明原文出处或征求原作者同意。
上一篇: Shiro基于Spring的实现
下一篇: 老年人注意睡眠 睡前禁忌保证质量