基于多比图形控件的电力图形系统的实现



引言

        在各种电力系统应用软件中, 电力图形化表达的重要组成部分。鉴于目前各种电力系统大多数为B/S结构, 而基于浏览器的矢量图编辑和展示技术已成为当下的热门课题。电力系统的发展迫切需要推出一种图形标准来避免重复的劳动和不同厂商图形格式之间的不兼容。

        文献中阐述了多比图形控件在电力系统软件领域的应用及其关键问题,并且指出多比图形控件可以提升基于 Web的电力系统软件图形化的特性,不过对于基于多比图形控件的图形系统如何构建以及如何有效的将多比图形控件应用到电力系统软件中在文中并没有深入探讨。本文将集中探讨如何使用Java/多比图形控件技术实现电力图形系统,在系统设计、多比图形控件的绘制、关联配置数据库的设计以及图形同步刷新和图形事件处理等方面进行了深入的探讨。

多比图形控件简介

    作为新的富客户端互联网技术, Flex这种技术已经在越来越多的电力图形化应用中采用。 使用Flex的富客户端应用,解决了异步调用,界面无刷新,浏览器兼容性等多项难题。用任何你熟悉的WEB编程语言,如.net,php,jsp,webservice等等,作为后台数据访问层,可以使用。

    然而,对于企业级应用开发来说,缺乏有经验的Flex程序员是不争的实事。大多数的软件开发企业并没有专门的Flex程序员, 这使得原生的Flex程序开发变得困难重重。和Flex原生程序编程相比较,多比控件采用Flex+Javascript的方式。 它一方面利用

    了Flex的强大图形表现力;在另外一方面,采用100%的纯Javascript API接口的方式,降低了学习的难度曲线。Javascript程序员很多,即使不会, java/.net程序员学习起来也很容易。Javascript异常和错误,非常容易调试,并且可以利用浏览器的内部调试工具在线调试。

    多比图形控件是一款基于Web(VML和SVG技术)的矢量图形控件, 类似于网页上的Visio控件。多比图形控件具有类似Visio那样的设计界面,允许用户非常方便地制作自己的图形符号,绘制漂亮的矢量图形。同时,多比控件也对位图支持的非常好,对jpg、gif和png全面支持。 多比控件可以容易的访问web上的图片,这使得应用的集成和更新都更加的容易。多比控件图形的基本属性繁多,基本能涵盖了目前电力图形化应用的各种需求。控件中的图元有非常严格的继承关系, 利用继承、多态、和覆盖技术, 用户可以轻易的修改图元的行为,定制自己的专属的矢量图形应用,而不需要修改一行多比的核心代码。这种机制保证了每一次多比控件的更新,程序员都可以透明的更新。

        基于多比控件的电力图形系统的实现

图形同步刷新和事件处理的实现

             图形的同步刷新和图形事件处理是图形系统运作的核心。图形同步刷新指的是实时图元必须与实时数据对象相关联,以不同的样式显示不同的实时 状态,满足同步速度足够快使图形的显示与实时数 据的刷新同步。图形事件处理指多比图形控件画面中某些 图元能够响应鼠标事件或其它事件,这样才能在触 发图元

    自定义电力矢量图元

    电力图形系统中,往往包含有多种图元, 电力CIM标准也对此有详细的说明。 为了保障电力图形系统中的图元表达的灵活性, 图形控件一定要具备自定义图元的能力。 矢量图元是根据几何特性来绘制图形,矢量可以是一个点、一条线、圆等等的几何形状。它的特点是放大后图像不会失真,和分辨率无关,文件占用空间较小。

    那么如何定义一个下面类似的变压器图元呢? 注意图中的图形,都是由同一个图元,设置不同的长宽得来的。

    矢量图是根据几何特性来绘制图形,矢量可以是一个点、一条线、圆等等的几何形状。它的特点是放大后图像不会失真,和分辨率无关,文件占用空间较小。

    那么如何定义一个下面类似的变压器的图形呢? 注意图中的图形,都是由同一个图元,设置不同的长宽得来的。

     

    每一个图元,都有一个draw函数,我们只需要覆盖这个draw函数就可以了。具体的代码见下面。

    //定义一个电阻的矢量图元

    DianluShapes.Dianzhu = StandardShapes.Rectangle.extend({

        //重载draw函数,让

        draw: function () {

            this.logDebug("draw(), r=%s", this.r);

            this.setupGraphics();

            var changdu = 20;

            //画左边的接线点

            this.canvas.drawLine(this.id, -this.width / 2, 0, -changdu / 2, 0);

            //画中间的电阻

            this.canvas.drawRect(this.id, -changdu / 2, -this.height / 2, changdu, this.height);

            //画右边边的接线点

            this.canvas.drawLine(this.id, changdu / 2, 0, this.width / 2, 0);

        }

    });

         多比图形控件直接使用Javasript语言对多比图形控件文档及图元操纵的方法,可以在Javasript语言中直接对多比图形控件文档添加、删除和修改图元属性。多比图形控件采用面向对象和松耦合的方式, 使得程序存取数据和更新图形界面成为两个互不干扰的过程。 程序员可以通过AJAX,HTTP长连接,甚至是HTML5中Websocket的方式存取数据, 成功获取数据后, 才利用多比提供的API, 刷新Web的Flex界面。实时数据刷新的同时,画面也会同步刷新。

    参考文献:

    [1] 石东源,卢炎生,王星华,等.SVG及其在电力系统软件图形化中的应用初探[J].继电器,2004,32(16):37—40.

    [2] 王仲,董欣,陈晓鸥.SVG——一种支持可缩放矢量图形的Web语言浏览规范[J].中国图形图像学报, 2000,5A(12):1039—1043.

    [3] 陈芳,徐学军.XML/Java技术在Web GIS中的应用与实现[J].电力系统及其自动化学报,2003,15(1):47—52.

    [4] 多比软件开发指南 http://www.duobee.com.

    [5] W3C.Scalable Vector Graphics (SVG) 1.1 Specification

    http://www.w3.Org/TR/SVG/

上一篇 下一篇

评论



分享