【原创】一个简单的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即可访问

 

 注：本博客文章均已注明原创和转载，如转载本博客文章，需注明原文出处或征求原作者同意。