在线播放网站亚洲播放

    引言

    在各種電力系統應用軟件中， 電力圖形化表達的重要組成部分。鑒于目前各種電力系統大多數為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上的圖片，這使得應用的集成和更新都更加的容易。多比控件圖形的基本屬性繁多，基本能涵蓋了目前電力圖形化應用的各種需求。控件中的圖元有非常嚴格的繼承關系， 利用繼承、多態、和覆蓋技術， 用戶可以輕易的修改圖元的行為，定制自己的專屬的矢量圖形應用，而不需要修改一行多比的核心代碼。這種機制保證了每一次多比控件的更新，程序員都可以透明的更新。

    圖形同步刷新和事件處理的實現

           圖形的同步刷新和圖形事件處理是圖形系統運作的核心。圖形同步刷新指的是實時圖元必須與實時數據對象相關聯，以不同的樣式顯示不同的實時 狀態，滿足同步速度足夠快使圖形的顯示與實時數 據的刷新同步。圖形事件處理指多比圖形控件畫面中某些 圖元能夠響應鼠標事件或其它事件，這樣才能在觸 發圖元的某些事件(比如鼠標點擊)的時候，系統可以執行相應操作。

           多比圖形控件直接使用Javasript語言對多比圖形控件文檔及圖元操縱的方法，可以在Javasript語言中直接對多比圖形控件文檔添加、刪除和修改圖元屬性。多比圖形控件采用面向對象和松耦合的方式， 使得程序存取數據和更新圖形界面成為兩個互不干擾的過程。 程序員可以通過AJAX，HTTP長連接，甚至是HTML5中Websocket的方式存取數據， 成功獲取數據后， 才利用多比提供的API， 刷新Web的Flex界面。實時數據刷新的同時，畫面也會同步刷新。

    自定義電力矢量圖元

    電力圖形系統中，往往包含有多種圖元， 電力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);

        }

在线播放网站亚洲播放    });

    自定義電力圖元屬性

在线播放网站亚洲播放    多比圖形數據本身只包含用來實現矢量圖形顯示的信息，如坐標點、顯示樣式等信息，而不包含和業務相關的數據。為了滿足電力系統的需要，多比圖形控件采取了基于XML/JSON格式的數據存儲方式，除了使用其內置的屬性外，可以對其屬性進行任意擴充，以實現自定義的功能。 自定義數據對象是頂點或連線表示的后臺數據。它可以是圖形和形狀相關的數據，也可以是元素對應的后臺業務數據。 例如，一個節點，代表發電機，而發電機的資產標號， 設備技術參數等業務邏輯數據就可存儲在自定義數據對象中。自定義數據對象可以是字符串，也可以是更復雜的javascript對象。

    自定義數據非常簡單， 例如

在线播放网站亚洲播放    sa.onready = function(){

                    var cld = sa.getShapeByPath("Cloud-0");

在线播放网站亚洲播放                    cld.yourdata = "資產編號";

    }

在线播放网站亚洲播放    定義了數據以后，我們就可以使用cld.yourdata來取得。一個比較有意思的需求是，我們如何在屬性編輯器中看到我們自定義的數據，并且讓他持久化下來。（保存到數據庫，XML中等等）

    這就需要我們覆蓋getUserProperties函數，變成以下的樣子：

    getUserProperties: function() {

        return [{

在线播放网站亚洲播放                        title: "我的數據",

                        name: "yourdata",

                        type: "string"

        }];

    },

在线播放网站亚洲播放    如果還需要用戶定義寬度，高度，顏色等， 我們可以先獲得基類的屬性，再把我們的數據添加上去。

在线播放网站亚洲播放    getUserProperties: function() {

        //將基類的數據，和我們的數據合并在一起

        return jQuery.merge(

            //調用基類的方法，獲取基類的用戶數據

                this.base(),

                [{

                        title: "我的數據",

                        name: "yourdata",

                        type: "string"

在线播放网站亚洲播放                }]

在线播放网站亚洲播放        );

在线播放网站亚洲播放    },

     結束語 

在线播放网站亚洲播放    本文從實時刷新、自定義電力矢量圖元、自定義電力圖元屬性等方面，進行了Web應用B/S應用中圖形表達方式的研究，確立了以多比控件為基礎的電力系統圖形系統的基礎構架，并在Java平臺的基礎上進行了實現，在實際中得到了應用，效果良好。