需求
根据现在监控项目需要,对应用维护的资源组件(主机、数据库和中间件服务器)可有用户按照自己的业务系统,将相关的资源组件放到一个视图里面查看监控数据,资源在一个视图里如何放置,是星型辐射还是树形组织结构很难把握,所以想做一个在线的图形编辑器,类似微软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即可访问
注:本博客文章均已注明原创和转载,如转载本博客文章,需注明原文出处或征求原作者同意。
分享到:
相关推荐
svg图形编辑器svg图形编辑器svg图形编辑器svg图形编辑器svg图形编辑器svg图形编辑器svg图形编辑器
SVG编辑器 Qt加C++实现,可放缩的矢量图形编辑器
一个很简单的图形编辑器,方便学习.net下的图形编辑与拖放。源码可在codeplex下载
SVG在线编辑器 在线制作SVG图像 演示地址:http://test.dmscn.net/2241450/ svg是目前十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言,使用svg格式我们可以直接用代码来描绘图像,可以用...
原生js实现简单的svg编辑器,通过工具栏生成并操作svg图像,主要实现了rect、circle、ellipse、line四个基础图形的编辑
用winform编写的简易图形编辑器,画多种图形,有移动、旋转图片等功能,可打开,保存矢量图
一个功能简单的图形编辑器
Java 简单图形编辑器 0 任意曲线 1 两点画直线段 2 两点画矩形 3 两点画椭圆 打开 保存 新建 画笔颜色 清除等功能
1.在图形编辑器中设计一个3位的十进制加法计数器,以xxxcnt3.gdf命名保存(‘xxx’为您的姓名拼音首字母)。器件设定为EPM7128LC84-6。要求能够从0计数到999。从999归零时产生一个高电平的报警信号。进行波形仿真,...
由北京金柝得安科技有限公司自主研发的SVGX矢量化图形编辑器是面向工程应用领域的矢量图形制作软件,它吸纳了目前几十款开源或商业化图形制作软件和组态工具软件的优点,图形的制作方法尽量与Adobe Illustrator等...
Delphi写的简单的画图程序,处理位图。
基于SVG矢量图形格式浏览器绘图工具的设计与实现,王春奎,文福安,近年来,网络教学平台发展迅速,其功能得到不断的加强和完善。但是由于浏览器在图形处理方面存在一些不足,这给教师在线编辑多媒
java 写的图形编辑器,类似于一个简单的photoshop。 转载!
基于vue3实现的svg可视化web组态编辑器,可无需修改代码动态添加svg组件,可直接把 svg 文件和 vue 组件作为编辑器图形库使用,赋予其缩放和旋转等功能,并支持自定义拓展参数,实时控制组件状态等,主要用于物联网...
这是一款HTML5 SVG图形变形效果。示例中展示了几种在网页上的SVG图形变形效果。包括鼠标hover指定元素时SVG图形变形效果等。
一个简单的基于matlab的gui的图形编辑器,很方便
这是一个简易图形编辑器,可实现一些绘图的简单功能,可绘矩形,直线,椭圆,随手画线,橡皮擦等功能 这是一个简易图形编辑器,可实现一些绘图的简单功能,可绘矩形,直线,椭圆,随手画线,橡皮擦等功能
利用设计模式的思想编写简易的图形编辑器,该图形编辑器具备基本的操作功能。