一種web組件的高效實(shí)現(xiàn)方法
【技術(shù)領(lǐng)域】
[0001] 本發(fā)明涉及WEB組件的一種實(shí)現(xiàn)方法，屬于計(jì)算機(jī)WEB軟件領(lǐng)域。
【背景技術(shù)】
[0002] 信息是人類文明和社會(huì)交流的重要載體，文字是描述信息的主要手段，絕大多數(shù) 的信息使用文字來(lái)描述保存，比如常見(jiàn)的書(shū)籍典籍。信息展示的歷史伴隨人類文明發(fā)展的 歷史，在計(jì)算機(jī)互聯(lián)網(wǎng)時(shí)代，信息的展示尤其重要。但隨著社會(huì)發(fā)展，用傳統(tǒng)的文字形式來(lái) 表現(xiàn)信息，遠(yuǎn)遠(yuǎn)不能滿足大家的要求，原因是文字形式表現(xiàn)信息不夠直觀形象、不夠方便快 捷。于是可視化技術(shù)越來(lái)越受到人們的關(guān)注，它提供給人們更快鍵方便更直觀生動(dòng)的信息 界面，使人們能夠快速的獲得信息。
[0003] 本發(fā)明涉及的可視化技術(shù)是WEB的可視化技術(shù)，WEB技術(shù)相比于桌面應(yīng)用是較新 的技術(shù)，盡管WEB展示技術(shù)相比桌面技術(shù)有其特有的優(yōu)勢(shì)（HTML的模型化界面構(gòu)建以及 JavaScript的快捷性)，但桌面應(yīng)用的技術(shù)積累及成熟度是當(dāng)前WEB應(yīng)用所不能比擬的。比 如，實(shí)時(shí)監(jiān)控系統(tǒng)的監(jiān)控界面與繪圖包軟件，在其監(jiān)控界面展示的豐富生動(dòng)的接線圖、控制 圖，都是由其提供的繪圖包繪制出的。WEB系統(tǒng)需要類似的軟件，但很少有廠家提供，因?yàn)檫@ 樣的工作過(guò)于復(fù)雜。
[0004] 以 JAVA 平臺(tái)的 JFreeChart 組件、· NET 平臺(tái)的 CHART 組件（Microsoft Chart Controls for Microsoft .NET Framework)為典型，GUI組件都是由組件自身來(lái)負(fù)責(zé)組件 的繪制植染，在其paintComponent/OnPaint方法里實(shí)現(xiàn)復(fù)雜的繪制處理。軟件公司或組織 提供的Gn組件，其外觀效果比較美觀，而個(gè)人實(shí)現(xiàn)的CTI組件的繪制效果很難做到美觀絢 麗，與Photoshop、AI、CorelDRAW等繪圖工具生成的圖形相比有很大的差距。WEB領(lǐng)域的 Gn組件延續(xù)了桌面系統(tǒng)的設(shè)計(jì)方法，存在同樣的問(wèn)題。

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

[0005] 本發(fā)明所要解決的技術(shù)問(wèn)題是，提供一種WEB組件的高效實(shí)現(xiàn)方法。采用 AI+SVG+JS技術(shù)來(lái)實(shí)現(xiàn)WB組件，以滿足WEB領(lǐng)域日益繁重的信息綜合展示及工業(yè)監(jiān)控的需 要。
[0006] 本發(fā)明的技術(shù)方案如下： 一種WEB組件的高效實(shí)現(xiàn)方法，其特征在于：用Adobe Illustrator繪制組件的外 觀，保存成組件的SVG文件；用JavaScript編寫組件的處理代碼，通過(guò)設(shè)置組件SVG中 有關(guān)圖元的包括填充色、邊框、位置坐標(biāo)、寬高和變換矩陣在內(nèi)的屬性，達(dá)到組件圖形動(dòng)態(tài) 變化的目的，從而實(shí)現(xiàn)一個(gè)WEB組件。
[0007] 借助apache的Batik包，在JAVA平臺(tái)上實(shí)現(xiàn)桌面的⑶I組件。
[0008] 具體實(shí)現(xiàn)步驟如下：用Adobe Illustrator繪制組件的外觀，并為需要操作的圖 形圖元綁定ID屬性，輸出保存為SVG文件；用JavaScript編寫組件的代碼，在導(dǎo)入SVG控 件的OBJECT標(biāo)簽里直接設(shè)置SRC屬性或通過(guò)控件對(duì)象的setSrc方法設(shè)置組件的SVG文件 名；組件的操作方法主要是用JavaScript獲取SVG圖形中的有關(guān)圖元，通過(guò)設(shè)置組件圖元 包括填充色、邊框、位置坐標(biāo)、寬高和變換矩陣等在內(nèi)的屬性，達(dá)到圖形動(dòng)態(tài)變化的目的，從 而實(shí)現(xiàn)一個(gè)WEB組件。
[0009] 本發(fā)明地積極效果在于：用Al (Adobe Illustrator)工具繪制的組件外觀可以 做到非常美觀絢麗，而用于負(fù)責(zé)設(shè)置SVG圖元屬性的代碼則非常短小簡(jiǎn)單。當(dāng)然本發(fā)明實(shí) 現(xiàn)的組件不可能完全替代傳統(tǒng)組件，存在一些局限，如不能像傳統(tǒng)曲線CHART組件那樣方 便的增加曲線條數(shù)，但諸如修改刻度等功能，本發(fā)明的組件可以通過(guò)某些技巧來(lái)達(dá)到相似 的效果。由于本發(fā)明把組件的渲染繪制工作和編程進(jìn)行了有機(jī)地分離，組件開(kāi)發(fā)可由不同 角色的人員各司其職，從而把⑶I組件實(shí)現(xiàn)得更美觀、更可靠、更專業(yè)。在諸如監(jiān)控系統(tǒng)大 屏幕、駕駛艙等對(duì)顯示效果非常關(guān)注、地位重要的應(yīng)用場(chǎng)景以及需要眾多特制仿真圖形的 應(yīng)用場(chǎng)景，尤其適合采用本發(fā)明。本發(fā)明突破了傳統(tǒng)組件的設(shè)計(jì)思想，將繪圖工具引入到組 件實(shí)現(xiàn)中與編程結(jié)合起來(lái)，為GUI組件設(shè)計(jì)帶來(lái)了一個(gè)非常重要的設(shè)計(jì)思路。本發(fā)明不僅 可以應(yīng)用于WEB組件設(shè)計(jì)，也可以用于JAVA/C#做桌面⑶I組件的設(shè)計(jì)。
【附圖說(shuō)明】
[0010] 圖1是采用SVG+JS實(shí)現(xiàn)的基于WEB的CHART組件效果圖，采用傳統(tǒng)⑶I組件實(shí)現(xiàn) 方法。盡管比JAVA/C#等高級(jí)語(yǔ)言實(shí)現(xiàn)的CTI組件的代碼量降低不少，但每個(gè)組件仍有兩 千多行。
[0011] 圖2是本發(fā)明實(shí)現(xiàn)的時(shí)鐘組件效果圖。
[0012] 圖3是本發(fā)明實(shí)現(xiàn)的表盤組件效果圖。
[0013] 從圖2、圖3看出，本發(fā)明采用AI+SVG+JS實(shí)現(xiàn)的組件，渲染非常美觀絢麗，而大多 數(shù)這類組件的代碼則只有100多行，專用代碼不過(guò)20幾行。
[0014] 圖4是本發(fā)明實(shí)現(xiàn)的椎體組件效果圖。從圖4看出，采用本發(fā)明的方法，不僅可以 實(shí)現(xiàn)如時(shí)鐘那樣單一的旋轉(zhuǎn)，還可以實(shí)現(xiàn)由多種SVG屬性組成的動(dòng)態(tài)變化效果。
[0015] 圖5是本發(fā)明實(shí)現(xiàn)的盾構(gòu)的輸送機(jī)監(jiān)控組件效果圖。輸送機(jī)監(jiān)控組件這類組件是 傳統(tǒng)組件思路很難實(shí)現(xiàn)的，瑣碎繁雜的繪制工作非常不適合直接用編程產(chǎn)生。
[0016] 圖6是本發(fā)明采用AI工具繪制的表盤的SVG文件，通過(guò)圖6這個(gè)文件可以更好地 的理解本發(fā)明的方法。
[0017] 附圖7是在組態(tài)軟件中常見(jiàn)的儲(chǔ)液罐效果圖。
[0018] 附圖8是水電站水位監(jiān)視效果圖。
[0019] 附圖9是將本發(fā)明的思想應(yīng)用到JAVA平臺(tái)上，實(shí)現(xiàn)的桌面⑶I組件的測(cè)試界面。
【具體實(shí)施方式】
[0020] 下面結(jié)合【具體實(shí)施方式】和附圖對(duì)本發(fā)明作更進(jìn)一步的說(shuō)明。
[0021] 本發(fā)明WEB組件的高效實(shí)現(xiàn)方法是，用Adobe Illustrator繪制組件的外觀，保存 成組件的SVG文件；用JavaScript編寫組件的處理代碼，通過(guò)設(shè)置組件SVG中有關(guān)圖 元的包括填充色、邊框、位置坐標(biāo)、寬高和變換矩陣在內(nèi)的屬性，達(dá)到組件圖形動(dòng)態(tài)變化的 目的，從而實(shí)現(xiàn)一個(gè)WEB組件。
[0022] 借助apache的Batik包，本發(fā)明的方法可以應(yīng)用到JAVA平臺(tái)上，實(shí)現(xiàn)桌面的⑶I 組件。
[0023] 本發(fā)明WEB組件的實(shí)現(xiàn)步驟是：用Adobe Illustrator繪制組件的外觀，并為需要 操作的圖形圖元綁定ID屬性，輸出保存為SVG文件；用JavaScript編寫組件的代碼，在導(dǎo) 入SVG控件的OBJECT標(biāo)簽里直接設(shè)置SRC屬性或通過(guò)控件對(duì)象的setSrc方法設(shè)置組件的 SVG文件名；組件的操作方法主要是用JavaScript獲取SVG圖形中的有關(guān)圖元，通過(guò)設(shè)置 組件圖元包括填充色、邊框、位置坐標(biāo)、寬高和變換矩陣等在內(nèi)的屬性，達(dá)到圖形動(dòng)態(tài)變化 的目的，從而實(shí)現(xiàn)一個(gè)WEB組件。
[0024] 本發(fā)明在本文列出的實(shí)現(xiàn)代碼全部在IE瀏覽器上測(cè)試通過(guò)，由于采用SVG技術(shù)， 所以需要在IE瀏覽器上安裝ADOBE的SVG插件（svgviewer. exe)。
[0025] (1)、圖2所示時(shí)鐘組件的處理。
[0026] 代碼只要處理指針旋轉(zhuǎn)就可以，下面的代碼通過(guò)設(shè)置每個(gè)指針圖元的Transform 屬性來(lái)達(dá)到旋轉(zhuǎn)指針的目的。參數(shù)angle是指定旋轉(zhuǎn)的角度，xl/yl是圓心的坐標(biāo)。
[0027] 坐標(biāo)旋轉(zhuǎn)比較容易理解，用三角函數(shù)很容易導(dǎo)出點(diǎn)（X，y)以原點(diǎn)為圓心逆時(shí)針旋 轉(zhuǎn)a角度的坐標(biāo)是（cos(a)*x+sin(a)*y，_sin(a)*x+cos(a)*y )，于是其變換矩陣如下：
【主權(quán)項(xiàng)】
1. 一種WEB組件的高效實(shí)現(xiàn)方法，其特征在于：用Adobe Illustrator繪制組件的外 觀，保存成組件的SVG文件；用JavaScript編寫組件的處理代碼，通過(guò)設(shè)置組件SVG中 有關(guān)圖元的包括填充色、邊框、位置坐標(biāo)、寬高和變換矩陣在內(nèi)的屬性，達(dá)到組件圖形動(dòng)態(tài) 變化的目的，從而實(shí)現(xiàn)一個(gè)WEB組件。
2. 如權(quán)利要求1所述的WEB組件的高效實(shí)現(xiàn)方法，其特征在于：借助apache的Batik 包，在JAVA平臺(tái)上實(shí)現(xiàn)桌面的⑶I組件。
3. 如權(quán)利要求1或所述的WEB組件的高效實(shí)現(xiàn)方法，其特征在于具體實(shí)現(xiàn)步驟如下： 用Adobe Illustrator繪制組件的外觀，并為需要操作的圖形圖元綁定ID屬性，輸出保存 為SVG文件；用JavaScript編寫組件的代碼，在導(dǎo)入SVG控件的OBJECT標(biāo)簽里直接設(shè)置 SRC屬性或通過(guò)控件對(duì)象的setSrc方法設(shè)置組件的SVG文件名；組件的操作方法主要是用 JavaScript獲取SVG圖形中的有關(guān)圖元，通過(guò)設(shè)置組件圖元包括填充色、邊框、位置坐標(biāo)、 寬高和變換矩陣等在內(nèi)的屬性，達(dá)到圖形動(dòng)態(tài)變化的目的，從而實(shí)現(xiàn)一個(gè)WEB組件。
【專利摘要】本發(fā)明提出了一種WEB組件的高效實(shí)現(xiàn)方法。采用Adobe Illustrator繪制組件的外觀，保存為SVG文件，用JavaScript獲取SVG圖形里的有關(guān)圖元，通過(guò)設(shè)置圖元的填充色、邊框色、位置坐標(biāo)、寬高、變換矩陣等屬性，達(dá)到圖形動(dòng)態(tài)變化的目的，從而實(shí)現(xiàn)一個(gè)WEB組件。用AI工具繪制的組件外觀可以做到非常的美觀絢麗，而用于負(fù)責(zé)設(shè)置SVG圖元屬性的JS代碼則非常短小簡(jiǎn)單。本發(fā)明突破了傳統(tǒng)GUI組件的設(shè)計(jì)思想，將繪圖工具與編程結(jié)合起來(lái)，為GUI組件設(shè)計(jì)帶來(lái)了一個(gè)非常重要的設(shè)計(jì)思想。本發(fā)明不僅可以應(yīng)用于WEB組件設(shè)計(jì)，也可以用于JAVA/C#做桌面GUI組件的設(shè)計(jì)。
【IPC分類】G06F9-44
【公開(kāi)號(hào)】CN104699483
【申請(qǐng)?zhí)枴緾N201510114116
【發(fā)明人】林玉東, 劉海林, 王志強(qiáng), 李盼盼, 黃明輝, 鄒全喜, 單婧婧
【申請(qǐng)人】東方電子股份有限公司
【公開(kāi)日】2015年6月10日
【申請(qǐng)日】2015年3月16日