一种自定义图形展示方法.pdf

本发明公开了一种自定义图形展示方法，包括以下步骤：将实际图形分解成小图片，打开自定义图形工具，将分解好的小图片加载到图形工具中，以及拖拽小图片、矢量图、文本框等组合成客户需要的实际图形，最后保存导出、加载到jsp中，用户可自定义设置图形、字体的大小、颜色、透明度、边框，并可复制、粘贴、回退、恢复等功能。可根据业务需求的变化自定义图形，包括：增加、删除控件、等比例缩放；设置字体、图形大小颜色等。可导入历史图形，在历史图形基础上编辑生成最新图形。

权利要求书
1.  一种用于工厂实时监控的流程图的自定义图形展示方法，包括以下步骤：
步骤A：将实际图形分解成小图片；
步骤B：打开自定义图形工具；
步骤C：将分解好的小图片加载到图形工具中；
步骤D：拖拽小图片、矢量图、文本框等组合成客户需要的实际图形；
步骤E：保存导出、加载到jsp中。

2.  根据权利要求1所述的展示方法，其中，所述步骤C在XML中配置。

3.  根据权利要求1所述的展示方法，其中，所述步骤D中，每个图片矢量图和文 本框的组件通过AWT的DragGestureListener来实现自动拖拽、复制功能，在每一个组 件上加上此监听事件；并且在此基础上加入mouseListener来支持双击事件实现可以对 任何的组件设置ID。

4.  根据权利要求1所述的展示方法，其中所述步骤E中，将导出的xml采用mxgraph 技术加载到网页中，并通过Ajax异步查询数据，并展示在页面上。

说明书一种自定义图形展示方法
技术领域
本发明涉及计算机技术领域，特别涉及一种自定义图形展示方法。
背景技术
现有技术中，web应用对于工厂的实时监控和办公的流程图的需求通常采用的是硬 编码的方式，即在网页上绘制html。每个监控的数据点配置特定的ID，并根据监控的 对象的状态发生变化来实时刷新对应的图片或者数值。
然而，这种硬编码的方式仅适用于单个工厂，且存在系统中监控页面很少、分辨率 统一、无后续需求的情况。在遇到多家工厂的推广、系统监控界面较多、需要再加监控 点的情况时，将带来很大的工作量，并且维护成本也很高。此外在分辨率发生变化时， 页面会出现变形。
西门子的Wincc和一些国外致力于工控软件的公司都有自己的组态工具，但大多数 组态工具只能实现CS方面，很少在WEB上展示出客户想要的效果，本发明可在CS或 WEB上同时展示，并支持java平台。
发明内容
本发明针对上述问题，本发明所要解决的技术问题是提供一种可根据业务需求的 变化自定义图形的展示方法，为实现本发明的上述目的，采取如下技术方案：
一种自定义图形展示方法，包括以下步骤：
步骤A：将实际图形分解成小图片；
步骤B：打开自定义图形工具；
步骤C：将分解好的小图片加载到图形工具中；
步骤D：拖拽小图片、矢量图、文本框等组合成客户需要的实际图形
步骤E：保存导出、加载到jsp中
其中，所述步骤C在XML中配置。
其中，所述步骤D中，每个图片矢量图和文本框的组件通过AWT的 DragGestureListener来实现自动拖拽、复制功能，在每一个组件上加上此监听事件；并 且在此基础上加入mouseListener来支持双击事件实现可以对任何的组件设置ID。
其中，所述步骤E中，将导出的xml采用mxgraph技术加载到网页中，并通过Ajax 异步查询数据，并展示在页面上。
本发明具有如下的有益效果：
用户可自定义设置图形、字体的大小、颜色、透明度、边框，并可复制、粘贴、回 退、恢复等功能。可根据业务需求的变化自定义图形，包括：增加、删除控件、等比例 缩放；设置字体、图形大小颜色等。可导入历史图形，在历史图形基础上编辑生成最新 图形。
附图说明
图1示出本发明的自定义图形展示方法的主要步骤流程；
图2为本发明具体实施例客户所要实现的配电结构图；
图3为本发明具体实施例中美工分解的管路图片；
图4示出本发明具体实施例中运行工具后的图；
图5示出本发明具体实施例对应步骤D的工具运行图；
图6示出本发明具体实施例对应步骤E的工具运行图；
具体实施方式
下面结合具体实施方式和附图说明本发明以使本领域技术人员对发明有更为清楚 的理解。
参见附图1，本发明自定义图形展示方法采用JAVA语言实现，包括四个步骤：
步骤A:将实际图形分解成小图片；
步骤B：打开自定义图形工具；
步骤C:将分解好的小图片加载到图形工具中。此步骤只需要在xml中配置上即可， 如：<images>
<image name＝"水表"icon＝"images/network/shui.png"/>
<image name＝"bj"icon＝"images/network/gds.png"/>
<image name＝"流量计"icon＝"images/network/liuliangji.png"/>
<image name＝"粗线"icon＝"images/network/yline.png"/>
<image name＝"竖粗线"icon＝"images/network/zline.png"/>
<image name＝"粗管道"icon＝"images/network/cgd.png"/>
<image name＝"横向管道"icon＝"images/network/hx.png"/>
<image name＝"竖向管道"icon＝"images/network/sx.png"/>
<image name＝"左拐小"icon＝"images/network/zx.png"/>
</images>
然后采用jdom读取XML的方式加载到工具的左侧的JList中去。
步骤D：拖拽小图片、矢量图、文本框等组合成客户需要的实际图形,每个图片矢量 图和文本框的组件通过AWT的DragGestureListener来实现自动拖拽、复制等功能，在 每一个组件上加上此监听事件，如：DragGestureListener dragGestureListener＝new  DragGestureListener(){public void dragGestureRecognized(DragGestureEvent  e){e.startDrag(null,mxConstants.EMPTY_IMAGE,new Point(),t,null)；}}；DragSource  dragSource＝newDragSource()；
dragSource.createDefaultDragGestureRecognizer(entry,DnDConstants.ACTION_COPY, dragGestureListener)；并且在此基础上加入mouseListener来支持双击事件实现可以对任 何的组件设置ID，这样，图形在展示数据的时候可以通过设置ID的value实现实时的 数据刷新，图形画完后采用DataOutputStream写入到xml文件中；
步骤E：保存导出、加载到jsp中。将导出的xml采用mxgraph技术加载到网页中， 并通过Ajax异步查询数据，并展示在页面上
下面具体通过一个例子详细说明上面步骤。
步骤A：如客户想实现工厂内的配电结构图如图2所示，美工将该图分解成小的管 路图片截图如图3所示；
步骤B、C：将图片路径放到工具指定的包下，运行工具后如图4所示；
步骤D：拖拽左边选择区域的图片和矢量图、文本框等至右边，可按上面的工具栏 设置字体大小和要展示实时数据的控件ID，如图5所示；
步骤E：设置完成后，保存，导出图片，并加载到JSP中，jsp页面通过调用AJAX 到后台数据库查询数据后现在到指定的ID控件上；
在本发明中，用户可自定义设置图形、字体的大小、颜色、透明度、边框，并可复 制、粘贴、回退、恢复等功能。客户可根据业务需求的变化自定义图形，包括：增加、 删除控件、等比例缩放；设置字体、图形大小颜色等。可导入历史图形，在历史图形基 础上编辑生成最新图形。
对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不 背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无 论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由 所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围 内的所有变化囊括在本发明内。