欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【原创】一个简单的SVG在线图形编辑器

程序员文章站 2022-06-04 15:31:13
...

需求 

      根据现在监控项目需要,对应用维护的资源组件(主机、数据库和中间件服务器)可有用户按照自己的业务系统,将相关的资源组件放到一个视图里面查看监控数据,资源在一个视图里如何放置,是星型辐射还是树形组织结构很难把握,所以想做一个在线的图形编辑器,类似微软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数据,前台可以还原。

 

界面

    【原创】一个简单的SVG在线图形编辑器
            
    
    博客分类: SVG 应用服务器jsonEXTVisio数据结构

 

 【原创】一个简单的SVG在线图形编辑器
            
    
    博客分类: SVG 应用服务器jsonEXTVisio数据结构

 

【原创】一个简单的SVG在线图形编辑器
            
    
    博客分类: SVG 应用服务器jsonEXTVisio数据结构

 

PS

     由于本身不是做美工的,所以SVG图片所代表的资源组件显得很拙劣,请勿见笑。

     代码和界面请在附件下载,需要使用AJAX从后台获取的数据改为从本地JSON文件中读取,实际使用过程中为url,将源码包放置于TOMCAT应用下,url地址设置为http://localhost:8080/BusinessTopology/carrier.jsp即可访问

 

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