一種基于網(wǎng)頁的電力模擬圖的繪制與顯示方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及一種電力模擬圖的繪制與顯示方法，特別是一種基于網(wǎng)頁的電力模擬圖的繪制與顯示方法。
【背景技術(shù)】
[0002]目前基于Web的電力模擬圖顯示，普遍采用單一的Flash技術(shù)、SVG技術(shù)或者VML技術(shù)實(shí)現(xiàn)。Flash技術(shù)形成的SWF文件是經(jīng)過封裝的二進(jìn)制代碼文件，他人無法進(jìn)行編輯和修改，并且客戶端需要安裝專有的插件才能進(jìn)行瀏覽；SVG技術(shù)的由W3C制定的基于XML來描述二維矢量圖型的一個(gè)開放標(biāo)準(zhǔn)，它用文本格式的描述性語言來描述圖像內(nèi)容，是一種和圖像分辨率無關(guān)的矢量圖形格式。但SVG圖像在IE8及其早期版本同樣需要安裝特定的插件才能進(jìn)行瀏覽。VML是The Vector Markup Language (矢量可標(biāo)記語言)的縮寫。VML支持廣泛的矢量圖形特征，它們基于由相連接的直線和曲線描述路徑。但基于VML形成的矢量圖只支持IE瀏覽器，無法支持其它主流瀏覽器。

【發(fā)明內(nèi)容】

[0003]本發(fā)明的目的在于，提供一種基于網(wǎng)頁的電力模擬圖的繪制與顯示方法。本發(fā)明的方法無需在客戶端安裝任何插件，且對(duì)瀏覽器具有更大的兼容性，可大大提高了用戶的使用便捷性。
[0004]本發(fā)明的技術(shù)方案:一種基于網(wǎng)頁的電力模擬圖的繪制與顯示方法，其特點(diǎn)是，包括以下步驟:
[0005]定義基本圖元類型庫和電力圖元類型庫；
[0006]設(shè)定要繪制的電力模擬圖中每個(gè)圖元的屬性參數(shù)，圖元包括電力圖元和基本圖元的；
[0007]調(diào)用RaphaelJS (—種用于在網(wǎng)頁中繪制矢量圖形的Javascript庫)的Paper方法，初始化畫布引擎；
[0008]RaphaelJS 自動(dòng)讀取當(dāng)前頁面的 window.SVGAngle 屬性和 document,implementat1n.hasFeature來判斷瀏覽器是否支持SVG引擎，否則采用VML引擎；
[0009]RaphaelJS根據(jù)電力模擬圖的ID從服務(wù)器獲取所有該電力模擬圖的各個(gè)電力圖元和基本圖元的圖元屬性參數(shù)，并通過JSON傳輸給前端頁面，前端頁面遍歷所有圖元屬性參數(shù)，在判斷圖元類型后以調(diào)取基本圖元類型庫和電力圖元類型庫的方式生成不同的圖元對(duì)象。
[0010]RaphaelJS根據(jù)圖元屬性參數(shù)在畫布上繪制圖元對(duì)象，調(diào)用attr方法(即用于設(shè)置圖元的屬性的方法，包括坐標(biāo)位置、填充顏色、寬高度、線條屬性、路徑、字體、轉(zhuǎn)換信息等)設(shè)置圖元的樣式，并根據(jù)圖元屬性參數(shù)繪制對(duì)應(yīng)的控制點(diǎn)，最后調(diào)用圖元的render方法在畫布上呈現(xiàn)元素。
[0011]上述的基于網(wǎng)頁的電力模擬圖的繪制與顯示方法中，所述基本圖元的屬性參數(shù)包括了元素名稱、元素類型、元素坐標(biāo)、寬度、高度、半徑、線條顏色、線條類型、線條頭部類型、線條透明度、線條寬度、線條結(jié)束箭頭、填充顏色、填充透明度、文字內(nèi)容、字體大小、字體和字體粗細(xì)；所述電力圖元的屬性參數(shù)在基本圖元的屬性參數(shù)基礎(chǔ)上還包括元素狀態(tài)、元素偏移量、縮放比例、旋轉(zhuǎn)角度、關(guān)聯(lián)組名和元素描述屬性。
[0012]前述的基于網(wǎng)頁的電力模擬圖的繪制與顯示方法中，所述基本圖元和電力圖元的類型分別來自于基本圖元類型庫和電力圖元類型庫，且每個(gè)電力圖元類型都包含了名稱和狀態(tài)，每個(gè)狀態(tài)又包括了狀態(tài)名稱、路徑、線條顏色、填充顏色和動(dòng)畫。
[0013]前述的基于網(wǎng)頁的電力模擬圖的繪制與顯示方法中，所述圖元均由RaphealJS的基本形狀通過path方法擴(kuò)展生成，并添加了用于控制與顯示的控制點(diǎn)、方法、事件來實(shí)現(xiàn)圖元的屬性變化、移動(dòng)、綻放和狀態(tài)改變功能。
[0014]與現(xiàn)有技術(shù)相比，本發(fā)明通過將RaphaelJS應(yīng)用結(jié)合到力模擬圖的繪制與顯示中，解決了電力模擬圖在網(wǎng)頁上顯示時(shí)的瀏覽器兼容問題，而且還利用了 RaphaelJS的基本形狀，以定義屬性參數(shù)的方法，方便地實(shí)現(xiàn)了電力模擬圖中各個(gè)圖元的繪制以及其它功能擴(kuò)展。
【具體實(shí)施方式】
[0015]下面結(jié)合實(shí)施例對(duì)本發(fā)明作進(jìn)一步的說明，但并不作為對(duì)本發(fā)明限制的依據(jù)。
[0016]實(shí)施例。一種基于網(wǎng)頁的電力模擬圖的繪制與顯示方法，包括以下步驟:
[0017]定義基本圖元類型庫和電力圖元類型庫；
[0018]設(shè)定要繪制的電力模擬圖中每個(gè)圖元的屬性參數(shù)，圖元包括電力圖元和基本圖元的；
[0019]調(diào)用RaphaelJS的Paper方法，初始化畫布引擎；
[0020]RaphaelJS自動(dòng)讀取當(dāng)前頁面的window.SVGAngle屬性和document, implementat1n.hasFeature(〃http://www.w3.0rg/TR/S VGl I/feature#BasicStructure〃，〃1.1〃)來判斷瀏覽器是否支持SVG引擎，否則采用VML引擎；
[0021]RaphaelJS根據(jù)電力模擬圖的ID從服務(wù)器獲取所有該電力模擬圖的各個(gè)電力圖元和基本圖元的圖元屬性參數(shù)，并通過JSON傳輸給前端頁面，前端頁面遍歷所有圖元屬性參數(shù)，在判斷圖元類型后以調(diào)取基本圖元類型庫和電力圖元類型庫的方式生成不同的圖元對(duì)象。
[0022]RaphaelJS根據(jù)圖元屬性參數(shù)在畫布上繪制圖元對(duì)象，調(diào)用attr方法設(shè)置圖元的樣式，并根據(jù)圖元屬性參數(shù)繪制對(duì)應(yīng)的控制點(diǎn)，最后調(diào)用圖元的render方法在畫布上呈現(xiàn)元素。
[0023]所述基本圖元的屬性參數(shù)包括了元素名稱、元素類型、元素坐標(biāo)、寬度、高度、半徑、線條顏色、線條類型、線條頭部類型、線條透明度、線條寬度、線條結(jié)束箭頭、填充顏色、填充透明度、文字內(nèi)容、字體大小、字體和字體粗細(xì)；所述電力圖元的屬性參數(shù)在基本圖元的屬性參數(shù)基礎(chǔ)上還包括元素狀態(tài)、元素偏移量、縮放比例、旋轉(zhuǎn)角度、關(guān)聯(lián)組名和元素描述屬性。
[0024]所述基本圖元和電力圖元的類型分別來自于基本圖元類型庫和電力圖元類型庫，且每個(gè)電力圖元類型都包含了名稱和狀態(tài)，每個(gè)狀態(tài)又包括了狀態(tài)名稱、路徑、線條顏色、填充顏色和動(dòng)畫。
[0025]所述圖元均由RaphealJS的基本形狀通過path方法擴(kuò)展生成，并添加了用于控制與顯示的控制點(diǎn)、方法、事件來實(shí)現(xiàn)圖元的屬性變化、移動(dòng)、綻放和狀態(tài)改變功能。
[0026]其中包括的主要方法說明:
[0027]render:呈現(xiàn)元素，通過啟用RaphealJS的呈現(xiàn)方法將圖形顯示在界面中；
[0028]select:選中元素；
[0029]unselect:取消選中元素；
[0030]getdata:獲取元素對(duì)應(yīng)的所有屬性；
[0031]geteditdata:獲取元素可編輯的屬性，并顯示在編輯框中；
[0032]seteditdata:設(shè)置元素編輯后的屬性。
[0033]本發(fā)明中電力圖元庫的圖形控制主要通過path來生成復(fù)雜的圖像。
[0034]path包括M (移動(dòng))、L (直線)、H (水平直線)、V (垂直直接)、A (弧紅)、C (三次貝塞爾曲線)、S(特殊三次貝塞爾曲線)、Q(二次貝塞爾曲線)、T(特殊二次貝塞爾曲線)、Z(閉合)命令，通過這些命令的組合，可形成任意復(fù)雜的矢量圖形。
[0035]由此，本方案適用于諸如化工控制、供水系統(tǒng)控制、計(jì)算機(jī)網(wǎng)絡(luò)等各行業(yè)的模擬圖顯不O
【主權(quán)項(xiàng)】
1.一種基于網(wǎng)頁的電力模擬圖的繪制與顯示方法，其特征在于，包括以下步驟: 定義基本圖元類型庫和電力圖元類型庫； 設(shè)定要繪制的電力模擬圖中每個(gè)圖元的屬性參數(shù)，圖元包括電力圖元和基本圖元的； 調(diào)用RaphaelJS的Paper方法，初始化畫布引擎； RaphaelJS 自動(dòng)讀取當(dāng)前頁面的 window.SVGAngle 屬性和 document, implementat1n.hasFeature來判斷瀏覽器是否支持SVG引擎，否則采用VML引擎； RaphaelJS根據(jù)電力模擬圖的ID從服務(wù)器獲取所有該電力模擬圖的各個(gè)電力圖元和基本圖元的圖元屬性參數(shù)，并通過JSON傳輸給前端頁面，前端頁面遍歷所有圖元屬性參數(shù)，在判斷圖元類型后以調(diào)取基本圖元類型庫和電力圖元類型庫的方式生成不同的圖元對(duì)象。 RaphaelJS根據(jù)圖元屬性參數(shù)在畫布上繪制圖元對(duì)象，調(diào)用attr方法設(shè)置圖元的樣式，并根據(jù)圖元屬性參數(shù)繪制對(duì)應(yīng)的控制點(diǎn)，最后調(diào)用圖元的render方法在畫布上呈現(xiàn)元素。
2.根據(jù)權(quán)利要求1所述的基于網(wǎng)頁的電力模擬圖的繪制與顯示方法，其特征在于:所述基本圖元的屬性參數(shù)包括了元素名稱、元素類型、元素坐標(biāo)、寬度、高度、半徑、線條顏色、線條類型、線條頭部類型、線條透明度、線條寬度、線條結(jié)束箭頭、填充顏色、填充透明度、文字內(nèi)容、字體大小、字體和字體粗細(xì)；所述電力圖元的屬性參數(shù)在基本圖元的屬性參數(shù)基礎(chǔ)上還包括元素狀態(tài)、元素偏移量、縮放比例、旋轉(zhuǎn)角度、關(guān)聯(lián)組名和元素描述屬性。
3.根據(jù)權(quán)利要求2所述的基于網(wǎng)頁的電力模擬圖的繪制與顯示方法，其特征在于:所述基本圖元和電力圖元的類型分別來自于基本圖元類型庫和電力圖元類型庫，且每個(gè)電力圖元類型都包含了名稱和狀態(tài)，每個(gè)狀態(tài)又包括了狀態(tài)名稱、路徑、線條顏色、填充顏色和動(dòng)畫。
4.根據(jù)權(quán)利要求1所述的基于網(wǎng)頁的電力模擬圖的繪制與顯示方法，其特征在于:所述圖元均由RaphealJS的基本形狀通過path方法擴(kuò)展生成，并添加了用于控制與顯示的控制點(diǎn)、方法、事件來實(shí)現(xiàn)圖元的屬性變化、移動(dòng)、綻放和狀態(tài)改變功能。
【專利摘要】本發(fā)明公開了一種基于網(wǎng)頁的電力模擬圖的繪制與顯示方法，它是結(jié)合了RaphaelJS對(duì)電力模擬圖進(jìn)行繪制和顯示的方法。本發(fā)明的方法無需在客戶端安裝任何插件，且對(duì)瀏覽器具有更大的兼容性，可大大提高了用戶的使用便捷性。
【IPC分類】G06T11-20
【公開號(hào)】CN104778733
【申請(qǐng)?zhí)枴緾N201510185678
【發(fā)明人】姜岷, 錢國春, 解俊峰, 屠偉東, 傅嘉輝, 潘毅, 李鴻, 呂小鋒, 王徐山, 周淳暉, 金哲超
【申請(qǐng)人】國家電網(wǎng)公司, 國網(wǎng)新源控股有限公司, 國網(wǎng)新源水電有限公司富春江水力發(fā)電廠
【公開日】2015年7月15日
【申請(qǐng)日】2015年4月20日