基于云端的PCB版圖在Web上的加速顯示

高曄 王美辰

（西安科技大學(xué) 陜西省西安市 710054）

1 引言

在PCB設(shè)計(jì)仿真中，需要建模、材料參數(shù)及激勵(lì)源的設(shè)置，也需要設(shè)置頻率范圍，最后根據(jù)設(shè)置的參數(shù)得到仿真結(jié)果，這種方法方便、快速、準(zhǔn)確，而且由于參數(shù)可調(diào)，可對(duì)各種情況進(jìn)行比較，降低了設(shè)計(jì)成本，提高了設(shè)計(jì)準(zhǔn)確度。但是本地的設(shè)計(jì)仿真軟件必須有高端的計(jì)算服務(wù)器，也需要具有專業(yè)知識(shí)的設(shè)計(jì)人員對(duì)軟件進(jìn)行操作，否則無(wú)法保證仿真對(duì)設(shè)計(jì)優(yōu)化的及時(shí)性和有效性。而且目前使用的大部分設(shè)計(jì)仿真軟件遷移性差，使用前必須要在本地安裝、部署軟件，并需要為仿真軟件和高端的運(yùn)算服務(wù)器支付昂貴的費(fèi)用。而將仿真系統(tǒng)遷徙至云端后，設(shè)計(jì)人員就可以在接入互聯(lián)網(wǎng)的環(huán)境下隨時(shí)隨地進(jìn)行PCB的設(shè)計(jì)仿真，不再受到必須要在本地安裝部署才可以進(jìn)行仿真、優(yōu)化設(shè)計(jì)的限制。遷徙至云端后只需將PCB設(shè)計(jì)數(shù)據(jù)通過(guò)互聯(lián)網(wǎng)HTTP通訊協(xié)議上傳至云端儲(chǔ)存，并在Web上進(jìn)行數(shù)據(jù)分析、數(shù)據(jù)處理，就可以得到仿真分析報(bào)告。

使用基于云端PCB設(shè)計(jì)軟件，第一步也是最重要的一步就是將PCB設(shè)計(jì)數(shù)據(jù)上傳至云端。設(shè)計(jì)數(shù)據(jù)包括PCB設(shè)計(jì)文件（版圖設(shè)計(jì)文檔和元器件模型庫(kù)）及相關(guān)的PCB生產(chǎn)信息（疊層信息、導(dǎo)體的電阻率以及介質(zhì)的電容率）。如何將包含大量設(shè)計(jì)信息及生產(chǎn)信息的PCB版圖顯示在Web瀏覽器中讓人們更加迅速方便地進(jìn)入的設(shè)計(jì)、仿真、優(yōu)化環(huán)節(jié)呢？

傳統(tǒng)的顯示方式主要分為兩種：一是將版圖渲染成矢量圖形。這種顯示方式優(yōu)點(diǎn)是可以無(wú)損的將整個(gè)版圖中所有的信息顯示出來(lái)，但是當(dāng)顯示大型電路板（元器件數(shù)量大于2000個(gè)）時(shí)，所耗費(fèi)的渲染時(shí)間也在指數(shù)型增加，嚴(yán)重影響了設(shè)計(jì)人員的工作效率；二是將版圖渲染成像素圖形。這種顯示方式優(yōu)點(diǎn)是可以快速將版圖渲染出來(lái)，但是缺點(diǎn)是當(dāng)設(shè)計(jì)人員進(jìn)行放大操作時(shí)，圖形會(huì)失真，版圖信息會(huì)丟失。

本文借鑒地圖顯示技術(shù)將瓦片技術(shù)引入云端設(shè)計(jì)仿真系統(tǒng)以達(dá)到保真加速顯示的目的。

圖1：地圖瓦片切割示意圖

圖2：瓦片地圖金字塔模型[8]

2 瓦片技術(shù)

2.1 瓦片地圖

所謂瓦片地圖，即將特定比例尺的數(shù)據(jù)源，事先按照坐標(biāo)分塊生成固定大小( 一般256像素 × 256像素) 的柵格圖片，所有的圖片將構(gòu)成一幅完整的地圖，這些柵格圖片遵循一定的組織規(guī)則存儲(chǔ)在文件系統(tǒng)中[4]。在Web中訪問(wèn)網(wǎng)絡(luò)地圖時(shí)，僅需根據(jù)該組織規(guī)則進(jìn)行讀取，拼接起來(lái)便可得到相應(yīng)的地圖視圖[5]。不同比例尺的數(shù)據(jù)可生成不同級(jí)別的地圖，因此瓦片地圖具有一定的縮放功能，并且用戶交互性良好。常用的 ArcGIS、谷歌等瓦片組織形式均是以 XYZ 索引的形式為基礎(chǔ)[6]。

2.2 分辨率

圖片經(jīng)過(guò)縮放后，其分辨率會(huì)發(fā)生改變，設(shè)初始圖片面積為 A0，像素點(diǎn)個(gè)數(shù)為 C0，當(dāng)它被縮放至級(jí)別K 時(shí)圖片分辨率為 ：

式中，g0 =C0 /A0 為圖片初始分辨率，單位：像素/ cm2。

電子地圖由若干正方形的圖片組成，這些正方形的圖片即地圖瓦片[4]。一般情況下，縮放級(jí)別為N1時(shí)，整個(gè)地圖由2N1×2N1個(gè)瓦片組成，每個(gè)瓦片的大小為D0個(gè)像素，則此時(shí)地圖上某一點(diǎn)的地圖分辨率為：

式中，S0為地球表面積，單位：m2。

由式（1）（2）可知，地球分辨率與圖片分辨率的不同點(diǎn)是，當(dāng)電子地圖被放大時(shí)，它的分辨率是增加的。

2.3 瓦片技術(shù)

使用網(wǎng)絡(luò)地圖時(shí)，我們看到的是一張鋪滿整個(gè)屏幕的大的地圖圖片。實(shí)際上，這張大的圖片是多個(gè)尺寸相同的小圖片按照既定規(guī)則無(wú)縫拼接而成的，這些小圖片就是瓦片。在瓦片金字塔結(jié)構(gòu)組織下，每張瓦片都可通過(guò)級(jí)別、行列號(hào)唯一標(biāo)記。在平移地圖、縮放地圖時(shí)，瀏覽器只需要根據(jù)金字塔規(guī)則，計(jì)算出所需的瓦片，從瓦片服務(wù)器獲取并拼接[7]，就可以顯示出所需要的瓦片，為地圖的顯示節(jié)約了大量的時(shí)間。如圖1所示。

層次模型：瓦片金字塔模型是一種多分辨率層次模型，從瓦片金字塔的底層到頂層，分辨率越來(lái)越低，但表示的范圍不變。如圖2所示。

這樣的多分辨率層次模型[9]，從瓦片金字塔的底層到頂層，分辨率越來(lái)越低，但表示的地理范圍不變。首先確定所要提供的縮放級(jí)別的數(shù)量N，把縮放級(jí)別最高、地圖比例尺最大的地圖圖片作為金字塔的底層，即第0層，并對(duì)其進(jìn)行分塊，從地圖圖片的左上角開(kāi)始，從左至右、從上到下進(jìn)行切割，分割成相同大小(比如256x256像素)的正方形地圖瓦片，形成第0層瓦片矩陣;在第0層地圖圖片的基礎(chǔ)上，按每2x2像素合成為一個(gè)像素的方法生成第1層地圖圖片，并對(duì)其進(jìn)行分塊，分割成與下一層相同大小的正方形地圖瓦片，形成第1層瓦片矩陣；采用同樣的方法生成第2層瓦片矩陣;…;如此下去，直到第N一1層，構(gòu)成整個(gè)瓦片金字塔。

對(duì)于地圖使用者來(lái)說(shuō)，他們關(guān)注的是由矢量數(shù)據(jù)渲染出來(lái)的地圖圖片，但一張包含世界地物信息的地圖何其之大，若用戶每次使用瀏覽地圖時(shí)都要下載和顯示這張地圖明顯是不現(xiàn)實(shí)的。瓦片技術(shù)就是將已經(jīng)渲染好的不同縮放等級(jí)的地圖圖片按固定大小切片，并順序命名（比如“2,0,0”，代表第二個(gè)圖層x軸第1張，y軸第一張圖片）。這樣當(dāng)用戶查看地圖時(shí)，只需要請(qǐng)求目前瀏覽部分的圖片即可。

3 基于云端的PCB版圖在Web上的加速顯示

將瓦片技術(shù)引入PCB版圖在Web上的加速顯示,核心點(diǎn)即如何使用“瓦片數(shù)據(jù)”來(lái)進(jìn)行“PCB版圖的加速顯示”，最主要的技術(shù)手段即為瓦片技術(shù)，整個(gè)“加速顯示”的過(guò)程需要經(jīng)過(guò)上傳PCB數(shù)據(jù)、翻譯（格式轉(zhuǎn)換）、版圖顯示文件預(yù)處理、前端的顯示幾個(gè)階段。原始PCB版圖為用戶需要進(jìn)行設(shè)計(jì)仿真的版圖（即為用戶提供的數(shù)據(jù)），將版圖的設(shè)計(jì)文件翻譯為云端仿真系統(tǒng)可以讀取的文件后在對(duì)版圖進(jìn)行預(yù)處理及顯示。技術(shù)路線圖如圖3所示。

圖3：技術(shù)路線圖

版圖顯示文件的預(yù)處理主要有讀取、處理、保存三個(gè)步驟，當(dāng)用戶上傳版圖文件后，我們得到了PCB版圖的設(shè)計(jì)信息，將格式進(jìn)行轉(zhuǎn)換之后，會(huì)得到原始的PCB版圖，這時(shí)的版圖是由SVG繪制而成的。為了達(dá)到加速的顯示的目的，我們將原始的版圖進(jìn)行切分，并設(shè)計(jì)根據(jù)金字塔原理設(shè)計(jì)了命名規(guī)范，以便于存儲(chǔ)及拼接。

3.1 版圖顯示文件預(yù)處理

（1）讀取從后端獲得每一層SVG原版版圖。如圖4所示。

（2）計(jì)算出每一層、每個(gè)放大倍數(shù)下版圖最小的外接矩形，根據(jù)外接矩形的大小，對(duì)版圖進(jìn)行補(bǔ)全。計(jì)算出每個(gè)縮放等級(jí)中每行、每列的瓦片個(gè)數(shù)。如圖5所示。

（3）切片：將得到每個(gè)縮放等級(jí)的SVG版圖轉(zhuǎn)為PNG圖片格式，使用Python PIL（Python Imaging Library） 庫(kù)對(duì)圖片進(jìn)行切片處理。將切片后的文件存在對(duì)應(yīng)的文件夾中。如圖6所示。

（4）存儲(chǔ)：將版圖進(jìn)行切片后會(huì)產(chǎn)生瓦片數(shù)據(jù)，完整的版圖被切分成固定大小的瓦片，每一個(gè)瓦片都有自己的編號(hào)，當(dāng)版圖需要在前端進(jìn)行顯示時(shí)，根據(jù)瀏覽器窗口的大小請(qǐng)求對(duì)應(yīng)位置的瓦片，并將png格式的瓦片渲染出來(lái)。文件目錄組織結(jié)圖和切片文件目錄結(jié)構(gòu)與編號(hào)如圖7圖8所示。

3.2 前端的顯示

前端的顯示是要根據(jù)用戶的操作，進(jìn)行放大、縮小、拖動(dòng)和分層顯示，當(dāng)我們對(duì)原始版圖進(jìn)行切片后，從后端請(qǐng)求瓦片數(shù)據(jù)進(jìn)行拼接，為了更進(jìn)一步達(dá)到加速顯示的目的。在前端應(yīng)實(shí)現(xiàn)按需加載。當(dāng)我們進(jìn)行切片后直接進(jìn)行拼接和顯示，仍然有一部分時(shí)間浪費(fèi)在沒(méi)有出現(xiàn)在瀏覽器視窗中圖片的加載上。按需加載時(shí)，每次只加載顯示在瀏覽器視窗中的瓦片，而其他的瓦片，當(dāng)滾動(dòng)條拉動(dòng)到某個(gè)即將進(jìn)入瀏覽器窗口可視范圍（比如瓦片距離窗口100px 時(shí)），再進(jìn)行加載。

3.3 實(shí)驗(yàn)結(jié)果

通過(guò)development tool中的performance可得到頁(yè)面性能的分析，將原始SVG格式的PCB版圖直接在Web上進(jìn)行顯示的時(shí)間與切片后顯示的時(shí)間進(jìn)行對(duì)比，可以得出結(jié)論：

隨著版圖文件大小的增加和放大倍數(shù)的增加，使用瓦片數(shù)據(jù)渲染相較直接渲染SVG圖像，渲染時(shí)間減少的百分比在增加，由此可以得出一個(gè)結(jié)論，面對(duì)PCB layout中所蘊(yùn)含龐雜的數(shù)據(jù)，使用瓦片技術(shù)來(lái)進(jìn)行存儲(chǔ)和渲染，可以有效的節(jié)省時(shí)間，并且數(shù)據(jù)量和放大倍數(shù)越大這樣的效果越明顯。

分析PCB版圖顯示的運(yùn)行流程可知影響瓦片渲染效率的因素很多。主要有以下四個(gè)方面：

（1）傳輸時(shí)間：云端與服務(wù)器之間的通信時(shí)間，主要決定的通信時(shí)間長(zhǎng)短的因素是帶寬；

（2）排隊(duì)時(shí)間：當(dāng)有大量用戶同時(shí)訪問(wèn)服務(wù)器時(shí)，會(huì)出現(xiàn)擁堵現(xiàn)象，嚴(yán)重影響服務(wù)性能。

圖4：原始版圖文件

圖5：版圖最小外界矩形示意圖

圖6：瓦片文件

（3）渲染版圖時(shí)間：后端服務(wù)器產(chǎn)生版圖瓦片的時(shí)間，這一過(guò)程主要包括幾個(gè)步驟，分別是服務(wù)器與數(shù)據(jù)庫(kù)交互PCB版圖設(shè)計(jì)數(shù)據(jù)，將得到的版圖設(shè)計(jì)數(shù)據(jù)進(jìn)行渲染得到原始SVG版圖，將SVG版圖生成版圖瓦片。版圖數(shù)據(jù)量，瓦片大小，圖片質(zhì)量等因素直接影響渲染PCB版圖的時(shí)間。

表1：渲染時(shí)間比較

圖7：文件目錄組織結(jié)圖

圖8：切片文件目錄結(jié)構(gòu)與編號(hào)

（4）進(jìn)行放大、縮小操作的響應(yīng)時(shí)間：主要包括瓦片數(shù)據(jù)量大小、索引機(jī)制等。

從這幾個(gè)方面可以看出可控的影響因素都與版圖數(shù)據(jù)有關(guān)，因此通過(guò)版圖數(shù)據(jù)性能進(jìn)行調(diào)優(yōu)（例如尋找最佳瓦片大?。瑫r(shí)對(duì)Web顯示效率的優(yōu)化（懶加載）都可以達(dá)到提升版圖顯示性能的目的。

4 結(jié)束語(yǔ)

PCB版圖顯示作為PCB設(shè)計(jì)優(yōu)化中最為重要，最為直觀的步驟，對(duì)整個(gè)PCB的設(shè)計(jì)、優(yōu)化、仿真、分析及最終的生產(chǎn)，都起到了至關(guān)重要的作用。而現(xiàn)今大部分的版圖都采用了直接渲染SVG的方式進(jìn)行渲染，這種方式雖然交互性強(qiáng)，且不會(huì)因?yàn)橛脩舻目s放操作而失真，但卻因?yàn)橛脩裘恳淮芜M(jìn)行操作都需要重新渲染SVG而耗費(fèi)了大量的時(shí)間。瓦片地圖作為一種新興的互聯(lián)網(wǎng)電子地圖服務(wù)方式，有其自身的優(yōu)點(diǎn)，很多領(lǐng)域都開(kāi)始采用瓦片技術(shù)對(duì)含有大量信息的矢量圖形進(jìn)行處理，但直接應(yīng)用在PCB版圖的顯示渲染上也存在很多問(wèn)題，鑒于此，本文介紹了一種適用于PCB版圖的切片技術(shù)并將其應(yīng)用于云端PCB信號(hào)完整性仿真系統(tǒng)中，不僅提升了PCB版圖的顯示速度，也將極大地提升了基于云端的EDA仿真軟件的效率。