[發明專利]一種用能信息采集系統配電接線圖的繪制方法

有效

• 申請號: 201710437525.5
• 申請日: 2017-06-12
• 公開（公告）號: CN107450906B
• 公開（公告）日: 2020-07-31
• 發明（設計）人: 徐軍;孔維亭;豆燕蕊;周興杰
• 申請（專利權）人: 積成電子股份有限公司
• 主分類號: G06F9/451
• 分類號: G06F9/451;G06F16/80;G06T11/20
• 代理公司: 濟南舜源專利事務所有限公司 37205
• 代理人: 苗峻

本發明涉及一種用能信息采集系統配電接線圖的繪制方法，1、解析XML文檔，得到各個圖元的原始數據以及記錄其縮放或旋轉操作的圖形數據，通過對圖元原始數據和圖形數據的比較計算得到圖元的縮放系數，利用幾何計算得到圖元的繪圖中心點坐標；2、基于canvas API，若圖元旋轉角度為0，則計算圖元的絕對坐標；若圖元旋轉角度不為0，則計算圖元的相對坐標；并將計算得到的新的圖元輸入參數存入對象數組；3、遍歷對象數組，逐一繪制圖元對象元素。本發明避免了現有繪圖方法存在的修改圖形易出錯、頁面載入速度慢等弊端，提高了頁面的載入速度，為系統維護人員繪制以及修改圖形帶來便利。

技術領域

本發明涉及用能信息采集系統技術領域，特別涉及一種基于canvas API的用能信息采集系統配電接線圖的繪制方法。

背景技術

配電接線圖是進行電力系統分析和電網管理的基礎，它可以直觀地展示電力系統的運行狀態。在用能信息采集系統中，配電接線圖要被繪制在Web頁面上，使得系統維護人員在了解用能信息時，可以對電力系統的接線情況和運行狀況有直觀的了解。目前，在用能信息采集系統的Web頁面上繪制配電接線圖的方法，主要是基于SVG、使用XML格式定義圖形，在繪制圖形時，SVG元素直接嵌入到頁面程序中。

上述方法存在如下缺點：由于SVG元素直接嵌入到頁面程序中，一旦需要修改圖形、就必須修改頁面程序，容易造成頁面程序錯誤，增大系統的安全風險；在SVG中，每個被繪制的圖形均被視為對象，由于SVG要加載到DOM中，一旦繪制的圖形對象過多，SVG便會降級，頁面的載入速度和渲染速度將會減慢，影響采集系統操作人員的用戶體驗。

發明內容

為解決現有技術中存在的上述缺陷，本發明提出了一種基于canvas API的用能信息采集系統配電接線圖的繪制方法，采集系統主站對載入的配電接線圖XML文檔進行數據解析，基于canvas API工具在瀏覽器Web頁面上繪制配電接線圖，直觀地展示電力系統的運行狀況。

本發明所采用的技術方案如下：

步驟1、在瀏覽器Web頁面上載入并解析配電接線圖XML文檔，得到各個圖元的原始數據以及記錄其縮放或旋轉操作的圖形數據，通過對圖元原始數據和圖形數據的比較計算得到圖元的縮放系數，利用幾何計算得到圖元的繪圖中心點坐標；

步驟2、基于canvas API，若圖元旋轉角度為0，則計算圖元的絕對坐標；若圖元旋轉角度不為0，則計算圖元的相對坐標；并將計算得到的新的圖元輸入參數存入對象數組；

步驟3、遍歷對象數組，逐一繪制圖元對象元素。

每個圖元都是由基礎圖元組合而成，基礎圖元類型包括四種：線line、圓circle、矩形rect和文本text，每個圖元都以其外接矩形的中心點為基準點。絕對坐標指相對于canvas畫布左上角坐標原點的坐標，相對坐標指相對于組合圖元外接矩形中心點的坐標。

進一步，步驟1所采用的具體方案如下：

1.1、解析XML文檔，得到各個圖元的原始數據以及記錄其縮放或旋轉操作的圖形數據，包括：圖形寬度component.width和圖形高度component.height，圖元寬度object.width和圖元高度object.height；圖形外接矩形左上角端點的絕對坐標component.posx/component.posy，圖元旋轉角度component.rotate，以及各基礎圖元的寬度childs[j].width、高度childs[j].height、半徑值childs[j].r、相對坐標childs[j].posxr/childs[j].posyr和絕對坐標childs[j].posxa/childs[j].posya。

1.2、通過圖元數據和圖形數據的比較分析，計算得到各個圖元的縮放系數，縮放系數的計算公式為：