• 幫助中心
  • >
  • 基于多比圖形控件的電力圖形系統的實現
基于多比圖形控件的電力圖形系統的實現
  • 2000-01-01 00:00:00
  • 關鍵字: 電力圖形系統 多比圖形控件 圖形同步刷新 圖形事件處理

引言

        在各種電力系統應用軟件中, 電力圖形化表達的重要組成部分。鑒于目前各種電力系統大多數為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.juhua834467.cn.

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

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

http://m.juhua834467.cn|http://wap.juhua834467.cn|http://www.juhua834467.cn||http://juhua834467.cn