專利名稱：一種矢量圖形動態(tài)渲染方法及其裝置的制作方法
技術(shù)領(lǐng)域：
本發(fā)明涉及一種矢量圖形動態(tài)渲染技術(shù)。
背景技術(shù)：
矢量圖形，也稱為面向?qū)ο蟮膱D像或繪像，在數(shù)學(xué)上定義為一系列由線連接的點(diǎn)。矢量文件中的圖形元素稱為對象。每個對象都是一個自成一體的實(shí)體，它具有顏色、形狀、輪廓、大小和屏幕位置等屬性?？蓴U(kuò)展標(biāo)記語言(Extensible Markup Language,簡稱“XML”)，用于標(biāo)記電子文件使其具有結(jié)構(gòu)性的標(biāo)記語言，可以用來標(biāo)記數(shù)據(jù)、定義數(shù)據(jù)類型，是一種允許用戶對自己的標(biāo)記語言進(jìn)行定義的源語言。許多矢量圖形如可縮放矢量圖形(Scalable Vector Graphics,簡稱“SVG”)，是基于XML的圖形格式標(biāo)準(zhǔn)，因此SVG文檔和XML文檔具有相似的文檔結(jié)構(gòu)?；谶@一點(diǎn),可以采用XML的解析樹模式來將包括SVG在內(nèi)的矢量圖形圖片解析成文檔對象模型(DocumentObject Model，簡稱“DOM”)樹，圖片中每個圖形元素或?qū)傩詫?yīng)DOM樹中的一個節(jié)點(diǎn)。在現(xiàn)有技術(shù)中，要將矢量圖形繪制到屏幕，系統(tǒng)先將矢量圖形解析成一 DOM樹，并根據(jù)該DOM樹中各圖形元素的屬性值，在屏幕上將該DOM樹渲染成一靜態(tài)圖片。然而，該現(xiàn)有技術(shù)中只能在屏幕上渲染靜態(tài)圖片，無法滿足在現(xiàn)有的用戶界面中，經(jīng)常需要進(jìn)行動態(tài)渲染的需求。舉例而言，在屏幕上顯示的圖片需要隨著動態(tài)變量的改變而發(fā)生變化，并進(jìn)行實(shí)時更新。

發(fā)明內(nèi)容
本發(fā)明主要解決的技術(shù)問題是提供一種矢量圖形動態(tài)渲染方法及其裝置，使得顯示在屏幕上的矢量圖形能夠隨著相關(guān)變量的改變而產(chǎn)生實(shí)時的動態(tài)變化。為了解決上述技術(shù)問題，本發(fā)明提供了一種矢量圖形動態(tài)渲染方法，將矢量圖形如SVG圖形解析成一文檔對象模型DOM樹，根據(jù)該DOM樹中各圖形元素的屬性值將該DOM樹渲染成圖片，該方法包含以下步驟:將DOM樹中各圖形元素的屬性值與各物理設(shè)備上的量測點(diǎn)數(shù)據(jù)進(jìn)行綁定；分別定義各量測點(diǎn)數(shù)據(jù)變化時，該量測點(diǎn)數(shù)據(jù)所綁定的圖形元素屬性值的變化規(guī)則；在量測點(diǎn)數(shù)據(jù)變化后，根據(jù)所定義的規(guī)則，改變DOM樹中該量測點(diǎn)綁定的圖形元素的屬性值；根據(jù)變化后的DOM樹中各圖形元素的屬性值，重新將該DOM樹渲染成圖片。作為進(jìn)一步改進(jìn)，在將DOM樹中各圖形元素的屬性值與各物理設(shè)備上的量測點(diǎn)數(shù)據(jù)進(jìn)行綁定的步驟中，還可以包含以下步驟:物理設(shè)備上的一量測點(diǎn)數(shù)據(jù)與DOM樹中一圖形元素的多個屬性值綁定。作為進(jìn)一步改進(jìn)，各量測點(diǎn)數(shù)據(jù)變化時，該量測點(diǎn)數(shù)據(jù)所綁定的圖形元素屬性值的變化規(guī)則可以包含:進(jìn)度條的可變長度隨著量測點(diǎn)數(shù)據(jù)的變化而變化；和/或柱狀圖的高度隨著量測點(diǎn)的數(shù)據(jù)變化而變化；和/或儀表盤的指針角度隨著量測點(diǎn)數(shù)據(jù)的變化而變化。本發(fā)明還提供了一種矢量圖形動態(tài)渲染裝置，包含:解析模塊，用于將矢量圖形解析成一 DOM樹；圖片渲染模塊，用于根據(jù)該DOM樹中各圖形元素的屬性值將該DOM樹渲染成圖片，該裝置還包含:綁定模塊，用于將DOM樹中各圖形元素的屬性值與各物理設(shè)備上的量測點(diǎn)數(shù)據(jù)進(jìn)行綁定；規(guī)則定義模塊，用于分別定義各量測點(diǎn)數(shù)據(jù)變化時，該量測點(diǎn)數(shù)據(jù)所綁定的圖形元素屬性值的變化規(guī)則；屬性值更改模塊，用于在量測點(diǎn)數(shù)據(jù)變化后，根據(jù)所定義的規(guī)則，改變DOM樹中該量測點(diǎn)綁定的圖像元素的屬性值；圖片渲染模塊還用于根據(jù)變化后的DOM樹中各圖形元素的屬性值，重新將該DOM樹渲染成圖片。作為進(jìn)一步改進(jìn)，綁定模塊中進(jìn)一步包含以下子模塊:將物理設(shè)備上的一量測點(diǎn)數(shù)據(jù)與DOM樹中一圖形元素的多個屬性值進(jìn)行綁定的子模塊。作為進(jìn)一步改進(jìn)，規(guī)則定義模塊定義的規(guī)則可以包含:進(jìn)度條的可變長度隨著量測點(diǎn)數(shù)據(jù)的變化而變化；和/或柱狀圖的高度隨著量測點(diǎn)的數(shù)據(jù)變化而變化；和/或儀表盤的指針角度隨著量測點(diǎn)數(shù)據(jù)的變化而變化。本發(fā)明實(shí)施方式與現(xiàn)有技術(shù)相比，主要區(qū)別及其效果在于:將DOM樹中各圖形元素的屬性值與各物理設(shè)備上的量測點(diǎn)數(shù)據(jù)進(jìn)行綁定；分別定義各量測點(diǎn)數(shù)據(jù)變化時，該量測點(diǎn)數(shù)據(jù)所綁定的圖形元素屬性值的變化規(guī)則；在量測點(diǎn)數(shù)據(jù)變化后，根據(jù)所定義的規(guī)則，改變DOM樹中該量測點(diǎn)綁定的圖像元素的屬性值；根據(jù)變化后的DOM樹中各圖形元素的屬性值，重新將該DOM樹渲染成圖片。從而使得顯示在屏幕上的矢量圖形能夠隨著相關(guān)變量的改變而產(chǎn)生實(shí)時的動態(tài)變化。


圖1是本發(fā)明第一實(shí)施方式的矢量圖形動態(tài)渲染方法流程圖；圖2是本發(fā)明第二實(shí)施方式的矢量圖形動態(tài)渲染裝置結(jié)構(gòu)圖。
具體實(shí)施例方式為使本發(fā)明的目的、技術(shù)方案和優(yōu)點(diǎn)更加清楚，下面將結(jié)合附圖對本發(fā)明的實(shí)施方式作進(jìn)一步地詳細(xì)描述。本發(fā)明第一實(shí)施方式涉及一種矢量圖形動態(tài)渲染方法，在本實(shí)施方式中，具體的矢量圖形動態(tài)渲染方法如圖1所示。在步驟101中，將矢量圖形解析成一文檔對象模型DOM樹。在步驟102中，將DOM樹中各圖形元素的屬性值與各物理設(shè)備上的量測點(diǎn)數(shù)據(jù)進(jìn)行綁定。需要說明的是，物理設(shè)備上的一量測點(diǎn)數(shù)據(jù)可以與DOM樹中一圖形元素的多個屬性值綁定。舉例而言，物理設(shè)備北門2號電機(jī)的量測點(diǎn)溫度的數(shù)值可以與DOM樹中圖形元素進(jìn)度條的可變長度及顏色兩個屬性值進(jìn)行綁定。在步驟103中，分別定義各量測點(diǎn)數(shù)據(jù)變化時，該量測點(diǎn)數(shù)據(jù)所綁定的圖形元素屬性值的變化規(guī)則。其中，該量測點(diǎn)數(shù)據(jù)所綁定的圖形元素屬性值的變化規(guī)則可以包含以下之一或其任意組合:進(jìn)度條的可變長度隨著所述量測點(diǎn)數(shù)據(jù)的變化而變化；和/或柱狀圖的高度隨著所述量測點(diǎn)的數(shù)據(jù)變化而變化；和/或儀表盤的指針角度隨著所述量測點(diǎn)數(shù)據(jù)的變化而變化。例如，隨著北門2號電機(jī)溫度每增加I度，進(jìn)度條的可變長度相應(yīng)的增加I厘米；當(dāng)北門2號電機(jī)的電壓數(shù)值每增大I伏，柱狀圖的高度相應(yīng)的增加0.2厘米；當(dāng)北門2號電機(jī)的壓強(qiáng)每增大I帕?xí)r，儀表盤的指針角度相應(yīng)的向右轉(zhuǎn)動5度。在步驟104中，根據(jù)該DOM樹中各圖形元素的屬性值將該DOM樹渲染成圖片。在步驟105中，在量測點(diǎn)數(shù)據(jù)變化后，根據(jù)所定義的規(guī)則，改變DOM樹中該量測點(diǎn)綁定的圖形元素的屬性值。針對上述例子，當(dāng)北門2號電機(jī)溫度數(shù)值每增加I度時，則將DOM樹中進(jìn)度條的可變長度相應(yīng)的增加I厘米；當(dāng)北門2號電機(jī)的電壓數(shù)值每增加I伏時，則將DOM樹中柱狀圖的高度相應(yīng)的增高0.2厘米；當(dāng)北門2號電機(jī)的壓強(qiáng)數(shù)值每增加I帕?xí)r，則將DOM樹中儀表盤的指針角度相應(yīng)的增加5度。在步驟106中，根據(jù)變化后的DOM樹中各圖形元素的屬性值，重新將該DOM樹渲染成圖片，并返回步驟105中。由此可見，通過本實(shí)施方式使得顯示在屏幕上的矢量圖形能夠隨著相關(guān)變量的改變而產(chǎn)生實(shí)時的動態(tài)變化。本發(fā)明第二實(shí)施方式涉及一種矢量圖形動態(tài)渲染裝置，如圖2所示，該裝置包含:解析模塊，用于將矢量圖形解析成一 DOM樹。圖片渲染模塊，用于根據(jù)該DOM樹中各圖形元素的屬性值將該DOM樹渲染成圖片。綁定模塊，用于將DOM樹中各圖形元素的屬性值與各物理設(shè)備上的量測點(diǎn)數(shù)據(jù)進(jìn)行綁定。規(guī)則定義模塊，用于分別定義各量測點(diǎn)數(shù)據(jù)變化時，該量測點(diǎn)數(shù)據(jù)所綁定的圖形元素屬性值的變化規(guī)則。屬性值更改模塊，用于在量測點(diǎn)數(shù)據(jù)變化后，根據(jù)所定義的規(guī)則，改變DOM樹中該量測點(diǎn)綁定的圖像元素的屬性值。圖片渲染模塊還用于根據(jù)變化后的DOM樹中各圖形元素的屬性值，重新將該DOM樹渲染成圖片。作為進(jìn)一步改進(jìn)，綁定模塊中進(jìn)一步包含以下子模塊:將物理設(shè)備上的一量測點(diǎn)數(shù)據(jù)與DOM樹中一圖形元素的多個屬性值進(jìn)行綁定的子模塊。規(guī)則定義模塊定義的規(guī)則可以包含:進(jìn)度條的可變長度隨著量測點(diǎn)數(shù)據(jù)的變化而變化；和/或柱狀圖的高度隨著量測點(diǎn)的數(shù)據(jù)變化而變化；和/或儀表盤的指針角度隨著量測點(diǎn)數(shù)據(jù)的變化而變化。綜上所述，將DOM樹中各圖形元素的屬性值與各物理設(shè)備上的量測點(diǎn)數(shù)據(jù)進(jìn)行綁定；分別定義各量測點(diǎn)數(shù)據(jù)變化時，該量測點(diǎn)數(shù)據(jù)所綁定的圖形元素屬性值的變化規(guī)則；在量測點(diǎn)數(shù)據(jù)變化后，根據(jù)所定義的規(guī)則，改變DOM樹中該量測點(diǎn)綁定的圖像元素的屬性值；根據(jù)變化后的DOM樹中各圖形元素的屬性值，重新將該DOM樹渲染成圖片。從而使得顯示在屏幕上的矢量圖形能夠隨著相關(guān)變量的改變而產(chǎn)生實(shí)時的動態(tài)變化。雖然通過參照本發(fā)明的某些優(yōu)選實(shí)施方式，已經(jīng)對本發(fā)明進(jìn)行了圖示和描述，但本領(lǐng)域的普通技術(shù)人員應(yīng)該明白，可以在形式上和細(xì)節(jié)上對其作各種改變，而不偏離本發(fā)明的精神和范圍。
權(quán)利要求
1.一種矢量圖形動態(tài)渲染方法，將所述矢量圖形解析成一文檔對象模型DOM樹，根據(jù)該DOM樹中各圖形元素的屬性值將該DOM樹渲染成圖片，其特征在于，該方法還包含以下步驟: 將所述DOM樹中各圖形元素的屬性值與各物理設(shè)備上的量測點(diǎn)數(shù)據(jù)進(jìn)行綁定； 分別定義所述各量測點(diǎn)數(shù)據(jù)變化時，該量測點(diǎn)數(shù)據(jù)所綁定的圖形元素屬性值的變化規(guī)則； 在所述量測點(diǎn)數(shù)據(jù)變化后，根據(jù)所定義的規(guī)則，改變所述DOM樹中該量測點(diǎn)綁定的圖形元素的屬性值； 根據(jù)所述變化后的DOM樹中各圖形元素的屬性值，重新將該DOM樹渲染成圖片。
2.根據(jù)權(quán)利要求1所述的矢量圖形動態(tài)渲染方法，其特征在于，在所述將DOM樹中各圖形元素的屬性值與各物理設(shè)備上的量測點(diǎn)數(shù)據(jù)進(jìn)行綁定的步驟中， 所述物理設(shè)備上的一量測點(diǎn)數(shù)據(jù)與所述DOM樹中一圖形元素的至少一個屬性值綁定。
3.根據(jù)權(quán)利要求1所述的矢量圖形動態(tài)渲染方法，其特征在于，所述各量測點(diǎn)數(shù)據(jù)變化時，該量測點(diǎn)數(shù)據(jù)所綁定的圖形元素屬性值的變化規(guī)則至少包含以下之一或其任意組合: 進(jìn)度條的可變長度隨著所述量測點(diǎn)數(shù)據(jù)的變化而變化；和/或 柱狀圖的高度隨著所述量測點(diǎn)的數(shù)據(jù)變化而變化；和/或 儀表盤的指針角度隨著所述量測點(diǎn)數(shù)據(jù)的變化而變化。
4.一種矢量圖形動態(tài)渲染裝置，包含:解析模塊，用于將所述矢量圖形解析成一 DOM樹；圖片渲染模塊，用于根據(jù)該DOM樹中各圖形元素的屬性值將該DOM樹渲染成圖片，其特征在于，該裝置還包含: 綁定模塊，用于將所述DOM樹中各圖形元素的屬性值與各物理設(shè)備上的量測點(diǎn)數(shù)據(jù)進(jìn)行綁定； 規(guī)則定義模塊，用于分別定義所述各量測點(diǎn)數(shù)據(jù)變化時，該量測點(diǎn)數(shù)據(jù)所綁定的圖形元素屬性值的變化規(guī)則； 屬性值更改模塊，用于在所述量測點(diǎn)數(shù)據(jù)變化后，根據(jù)所定義的規(guī)則，改變所述DOM樹中該量測點(diǎn)綁定的圖像元素的屬性值； 所述圖片渲染模塊還用于根據(jù)所述變化后的DOM樹中各圖形元素的屬性值，重新將該DOM樹渲染成圖片。
5.根據(jù)權(quán)利要求4所述的矢量圖形動態(tài)渲染裝置，其特征在于，所述綁定模塊中進(jìn)一步包含以下子模塊: 將所述物理設(shè)備上的一量測點(diǎn)數(shù)據(jù)與所述DOM樹中一圖形元素的至少一個屬性值進(jìn)行綁定的子模塊。
6.根據(jù)權(quán)利要求4所述的矢量圖形動態(tài)渲染裝置，其特征在于，所述規(guī)則定義模塊定義的規(guī)則至少包含以下之一或其任意組合: 進(jìn)度條的可變長度隨著所述量測點(diǎn)數(shù)據(jù)的變化而變化；和/或 柱狀圖的高度隨著所述量測點(diǎn)的數(shù)據(jù)變化而變化；和/或 儀表盤的指針角度隨著所述量測點(diǎn)數(shù)據(jù)的變化而變化。
全文摘要
本發(fā)明公開了一種矢量圖形動態(tài)渲染方法及其裝置，將DOM樹中各圖形元素的屬性值與各物理設(shè)備上的量測點(diǎn)數(shù)據(jù)進(jìn)行綁定；分別定義各量測點(diǎn)數(shù)據(jù)變化時，該量測點(diǎn)數(shù)據(jù)所綁定的圖形元素屬性值的變化規(guī)則；在量測點(diǎn)數(shù)據(jù)變化后，根據(jù)所定義的規(guī)則，改變DOM樹中該量測點(diǎn)綁定的圖像元素的屬性值；根據(jù)變化后的DOM樹中各圖形元素的屬性值，重新將該DOM樹渲染成圖片。從而使得顯示在屏幕上的矢量圖形能夠隨著相關(guān)變量的改變而產(chǎn)生實(shí)時的動態(tài)變化。
文檔編號G06T11/00GK103150742SQ201110401309
公開日2013年6月12日 申請日期2011年12月6日 優(yōu)先權(quán)日2011年12月6日
發(fā)明者何小波, 梁俊, 錢靖 申請人:上?？婶斚到y(tǒng)軟件有限公司