基于Canvas 的巖性符號管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

陳 杰， 何小海， 卿粼波， 張 琪， 羅彬彬

（1 四川大學(xué) 電子信息學(xué)院， 成都 610065； 2 成都西圖科技有限公司， 成都 610065）

0 引 言

巖性符號是表現(xiàn)地質(zhì)特性的圖形化語言。 巖性符號對于地質(zhì)研究人員正確地理解地質(zhì)特性，交流地質(zhì)觀念有著重要的作用［1］。 作為反映地質(zhì)特性的重要載體，巖性符號是石油地質(zhì)管理系統(tǒng)中不可或缺的一部分，尤其是在綜合柱狀圖中，根據(jù)探井深度來展示巖性符號為研究人員分析不同深度的地層提供了很大幫助［2］。

隨著HTML5 的普及，作為HTML5 新增技術(shù)的Canvas 瀏覽器繪圖技術(shù)得到了廣泛應(yīng)用，如彭寧葉子等人［3］利用HTML5 的Canvas 技術(shù)實(shí)現(xiàn)了態(tài)勢符號標(biāo)繪系統(tǒng)。 目前，大量以C／S 架構(gòu)或B／S 架構(gòu)為基礎(chǔ)的石油地質(zhì)管理系統(tǒng)和應(yīng)用程序也得到廣泛的應(yīng)用，如劉如奎等人［1］實(shí)現(xiàn)了C／S 架構(gòu)下的巖性符號繪制與管理系統(tǒng)，但在傳統(tǒng)的石油地質(zhì)管理系統(tǒng)中，缺少對巖性符號的統(tǒng)一管理，以C／S 架構(gòu)為基礎(chǔ)的應(yīng)用程序在繪制巖性符號時(shí)的靈活性低、交互性較差，只能繪制出有限種類的符號。

針對現(xiàn)有巖性符號管理系統(tǒng)的不足，本文運(yùn)用B／S 架構(gòu)體系開發(fā)了基于HTML5 Canvas 技術(shù)的巖性符號管理系統(tǒng)，利用Canvas 強(qiáng)大的繪圖技術(shù)，提高了系統(tǒng)的靈活性和可操作性，設(shè)計(jì)了繪制指令抽取方案來壓縮繪制的原始圖形的數(shù)據(jù)量，這樣在重現(xiàn)和傳輸指令時(shí)能節(jié)省網(wǎng)絡(luò)傳輸時(shí)間。 同時(shí)由于采用Canvas 繪圖技術(shù)，繪制的巖性符號在應(yīng)用于綜合柱狀圖的處理中能方便地進(jìn)行動態(tài)重繪。

1 系統(tǒng)需求分析與總體設(shè)計(jì)

1.1 需求分析

一套完善的巖性符號管理系統(tǒng)應(yīng)該具備的基本功能包括生成新的符號、對已存在的符號進(jìn)行修改以及對符號信息進(jìn)行有效的管理。 除了保證基本的功能需求，還要求設(shè)計(jì)的系統(tǒng)界面美觀、易操作、性能穩(wěn)定、可維護(hù)性和可擴(kuò)展性強(qiáng)。

傳統(tǒng)的巖性符號管理系統(tǒng)的功能是不完善的，沒有將符號的繪制和符號的管理集成起來，影響了符號管理的效率，對于已生成的巖性符號指令無法方便地進(jìn)行效果查看。 此外，傳統(tǒng)的巖性符號在新增巖性符號時(shí)靈活性低，用戶只能通過組合基本圖形來繪制巖性符號，對于一些復(fù)雜巖性符號的繪制有些束手無策。 現(xiàn)有的巖性符號繪制系統(tǒng)多是基于C／S 系統(tǒng)，采用C／S 架構(gòu)設(shè)計(jì)的巖性符號繪制系統(tǒng)需要安裝額外的程序和插件才能使用，而且和客戶端的操作系統(tǒng)也存在兼容性問題［4］。 基于上述分析，本項(xiàng)目設(shè)計(jì)研發(fā)了一種B／S 架構(gòu)下，基于HTML Canvas 繪制技術(shù)的巖性符號管理系統(tǒng)。

1.2 總體設(shè)計(jì)

考慮到系統(tǒng)的可移植性，本系統(tǒng)采用B／S 三層架構(gòu)，在B／S 架構(gòu)下，用戶無需安裝多余的插件，只需要通過瀏覽器訪問網(wǎng)站即可［5］，增強(qiáng)了系統(tǒng)的可維護(hù)性和可擴(kuò)展性。 本系統(tǒng)選用Spring Boot 框架來搭建后臺項(xiàng)目，選用Vue.js 來搭建前端框架。 此次項(xiàng)目的前端繪制研發(fā)中采用了HTML5 的Canvas技術(shù)，Canvas 技術(shù)具有強(qiáng)大且高效的繪圖特性，能實(shí)現(xiàn)對圖像的像素級操作［6］。 利用Canvas 技術(shù)實(shí)現(xiàn)巖性符號的繪制有易操作、靈活性和可交互性強(qiáng)的特點(diǎn)。

考慮到傳統(tǒng)巖性符號管理系統(tǒng)的不足，本文設(shè)計(jì)的巖性符號管理系統(tǒng)包括巖性符號在線繪制、巖性符號繪制指令抽取和巖性符號數(shù)據(jù)管理三個(gè)模塊，如圖1 所示。 其中，巖性符號在線繪制模塊實(shí)現(xiàn)新增符號的功能，巖性符號繪制指令抽取模塊實(shí)現(xiàn)對巖性符號的指令抽取功能，巖性符號數(shù)據(jù)管理模塊實(shí)現(xiàn)對數(shù)據(jù)庫中的符號信息進(jìn)行在線瀏覽和管理的功能。

圖1 系統(tǒng)主要功能模塊組成Fig.1 Main function modules of the system

2 系統(tǒng)功能模塊設(shè)計(jì)

2.1 巖性符號在線繪制

2.1.1 巖性符號在線繪制功能設(shè)計(jì)

隨著HTML5 的普及，HTML5 中新增的Canvas技術(shù)也得到了廣泛應(yīng)用。 Canvas 技術(shù)中集成了一系列與繪制相關(guān)的API，包括圓、矩形、路徑、文本等圖形的繪制以及強(qiáng)大的樣式設(shè)置功能［7］。

通過對巖性符號規(guī)范進(jìn)行分析發(fā)現(xiàn)，常用圖例和符號的種類繁多，如果只允許用戶添加基本圖形將無法滿足繪制復(fù)雜巖性符號的要求，為此就需要設(shè)計(jì)一種方式使操作者能進(jìn)行自定義繪制。 由于Canvas 繪圖的靈活性，用戶可以利用鼠標(biāo)繪制自定義的圖形和路徑，這使得用戶自定義繪制圖形成為可能。

前端繪制的處理流程如圖2 所示。 為實(shí)現(xiàn)自定義圖形的繪制，首先設(shè)計(jì)了2 種繪制狀態(tài)。 一種是自由畫筆狀態(tài)，當(dāng)處于這個(gè)狀態(tài)時(shí)，用戶能在Canvas 畫布上進(jìn)行自由繪制；另一種是基本圖形繪制狀態(tài)，當(dāng)用戶繪制基本圖形時(shí)，可以從基本圖形工具欄直接拖拽預(yù)設(shè)圖形到畫布的合適位置。 當(dāng)用戶開始繪制時(shí)，首先判斷當(dāng)前的狀態(tài)，如果處于基本圖形繪制狀態(tài)，將只允許用戶進(jìn)行拖拽操作，如果處于畫筆狀態(tài)，用戶則可以進(jìn)行自由繪制。 基本圖形都是通過對Canvas 原生的API 進(jìn)行封裝得到的圖形類，基于圖形元素類生成的圖形對象上包括有圖形類型、尺寸和位置等信息［8］，而自定義圖形的信息主要記錄的是關(guān)鍵點(diǎn)的位置信息。 每次進(jìn)行繪制或修改時(shí)都會將這些基本信息提取出來形成JSON 對象保存到歷史操作棧中，通過這種形式，可以很方便地進(jìn)行撤銷、前進(jìn)、刪除和修改操作，系統(tǒng)的可用性和用戶友好性得到了很大提高。

圖2 前端繪制流程圖Fig.2 Front end drawing flow chart

2.1.2 自定義圖形的數(shù)據(jù)處理

對于自定義的路徑需要進(jìn)行額外的處理，因?yàn)橛脩糇远x繪制的路徑含有的點(diǎn)信息豐富，如果直接保存下來，將會浪費(fèi)大量的存儲空間，不僅如此，用戶自定義繪制的路徑一般平滑度差，如果直接使用用戶繪制的路徑作為符號是不美觀的。

將用戶自定義繪制的路徑都看作是曲線，就可以利用垂距限值算法來進(jìn)行處理了。 使用垂距限值算法進(jìn)行點(diǎn)抽取后，還需要將這些點(diǎn)擬合起來，形成一條平滑的曲線，用戶可以通過擬合出來的曲線查看路徑繪制是否符合要求。 自定義圖形的處理流程如圖3 所示。

圖3 自定義圖形的數(shù)據(jù)處理流程圖Fig.3 Data processing flow chart of user defined graphics

垂距限值算法的基本思路是按照垂距的限制，選取垂距小于限值的點(diǎn)，舍去垂距大于限值的點(diǎn)［9］。 垂距限值法的優(yōu)點(diǎn)是能快速有效地對點(diǎn)進(jìn)行抽稀。 其基本的過程是： 在原始數(shù)據(jù)中選擇點(diǎn)（xi，yi）和點(diǎn)（xi+2，yi+2），連接以上2 點(diǎn)形成線段，計(jì)算點(diǎn)（xi+1，yi+1） 到線段的垂距，如果該垂距小于限值，則保留點(diǎn)（xi+1，yi+1），否則舍棄該點(diǎn)，再將i加1，繼續(xù)計(jì)算接下來的3 個(gè)點(diǎn)，對整條曲線進(jìn)行處理后就得到了抽稀后的結(jié)果。

計(jì)算垂距的步驟如下：

（1）利用公式（1）計(jì)算出點(diǎn)（xi，yi） 到點(diǎn)（xi+1，yi+1） 的距離，記作a。 用同樣的方法計(jì)算點(diǎn)（xi+2，yi+2） 到點(diǎn)（xi+1，yi+1） 以及點(diǎn)（xi，yi） 到點(diǎn)（xi+2，yi+2） 的距離，分別記作b和c。

（2）利用公式（2）計(jì)算變量p的值。

（3）利用公式（3）計(jì)算出點(diǎn)（xi+1，yi+1） 到點(diǎn)（xi，yi） 和點(diǎn)（xi+2，yi+2） 的連線的垂距，記作h。

這里，給出公式（1）～（3）的數(shù)學(xué)表達(dá)為：

對于垂距限值法的閾值的選擇很重要，閾值過小，不能達(dá)到好的抽稀效果，閾值過大，抽稀點(diǎn)不能代表原始的曲線，而閾值往往需要反復(fù)測試才能確定，所以為用戶提供了動態(tài)修改閾值的選項(xiàng)。

使用垂距限值算法對用戶繪制的連續(xù)路徑進(jìn)行抽稀后，需要將這些處理后的點(diǎn)擬合成一條平滑的曲線。 為了保證擬合曲線的平滑性以及計(jì)算的速度，這里采用三次樣條插值算法。 該插值算法能通過一系列離散的點(diǎn)形成一條光滑曲線。 三次樣條插值思路簡單，而且繪制的曲線平滑流暢，在計(jì)算機(jī)圖形學(xué)有著廣泛的應(yīng)用［10］。

三次樣條插值需要滿足三次函數(shù)的曲線，即：

其中，x表示曲線參數(shù)，a、b、c、d為待計(jì)算的曲線參數(shù)。

使用三次樣條插值算法的基本過程是：在抽取的n個(gè)離散的點(diǎn)中，每2 個(gè)點(diǎn)之間擬合出一條滿足三次樣條函數(shù)的曲線，一共需要擬合出n -1 條曲線，并求出每條曲線上的4 個(gè)參數(shù)。 要求解的n -1條曲線需要滿足以下3 個(gè)條件：

（1）每2 個(gè)點(diǎn)之間需要擬合一條三次函數(shù)曲線，三次函數(shù)曲線需要經(jīng)過這2 個(gè)點(diǎn)。

（2）在2 條曲線的連接點(diǎn)處，為了獲得足夠的平滑度，需要保證在連接點(diǎn)左右兩邊的一階導(dǎo)數(shù)和二階導(dǎo)數(shù)相等。

（3）在整條曲線的兩端的端點(diǎn)處，三次函數(shù)曲線的三階導(dǎo)數(shù)需要進(jìn)行自定義的限制，這里限制整條曲線兩端的三階導(dǎo)數(shù)為0。

根據(jù)以上給出的條件，可以計(jì)算出構(gòu)成整條曲線的每一條的三次函數(shù)曲線。

通過上述的處理，對自定義路徑進(jìn)行了點(diǎn)壓縮和擬合，可以得到預(yù)期效果。 用戶繪制的原始路徑如圖4（a）所示，使用垂距限制法處理后數(shù)據(jù)點(diǎn)由95 個(gè)壓縮為了4 個(gè)，對壓縮后的點(diǎn)進(jìn)行重新擬合后得到了一條平滑的路徑，如圖4（b）所示。

圖4 自定義圖形處理效果Fig.4 Data processing effect of user defined graphics

2.2 巖性符號指令抽取

在用戶繪制的過程中，無論用戶是在新增、修改還是刪除圖形的時(shí)候，都不斷地更新現(xiàn)有的圖形數(shù)據(jù)對象，在進(jìn)行指令抽取時(shí)，先是獲取代表所有基本圖形和自定義圖形的對象，將能代表圖形類型、尺寸、位置和樣式的基本信息從對象中提取出來，導(dǎo)出為標(biāo)準(zhǔn)JSON 數(shù)據(jù)。

如果要將代表巖性符號的命令存儲在數(shù)據(jù)庫中進(jìn)行隨調(diào)隨用，還需要對JSON 數(shù)據(jù)做進(jìn)一步的處理，原始的JSON 數(shù)據(jù)雖然格式好看，但是體積過大，這里的處理可以壓縮數(shù)據(jù)大小。 指令抽取的流程圖如圖5 所示。 對JSON 數(shù)據(jù)進(jìn)行處理時(shí)先要建立規(guī)則映射表，映射表中對應(yīng)了不同圖形的處理方式。 接著遍歷JSON 數(shù)據(jù)的每一項(xiàng)，從規(guī)則映射表中查找處理函數(shù)，再進(jìn)行處理，處理后的基本命令以空格進(jìn)行分隔。

圖5 指令抽取的關(guān)鍵步驟Fig.5 Instruction extraction flow chart

2.3 巖性符號數(shù)據(jù)管理

巖性符號數(shù)據(jù)管理頁面實(shí)現(xiàn)了對巖性符號信息的管理，包括巖性符號信息在線瀏覽、新增巖性符號信息、修改巖性符號信息、刪除巖性符號、預(yù)覽巖性符號繪制效果。

本系統(tǒng)采用關(guān)系型數(shù)據(jù)庫MySQL 來對巖性符號的信息進(jìn)行存儲和管理，所有的數(shù)據(jù)均以字段的形式存于數(shù)據(jù)庫。 MySQL 數(shù)據(jù)庫具有體積小、成本低、速度快的優(yōu)點(diǎn)［11］。 數(shù)據(jù)庫設(shè)計(jì)的ER（實(shí)體關(guān)系）圖如圖6 所示。

圖6 數(shù)據(jù)庫ER 圖Fig.6 Database ER diagram

在線瀏覽頁面從數(shù)據(jù)庫中查詢所有的巖性符號信息，并以分頁的形式展示在瀏覽器上。 系統(tǒng)管理員可以對符號信息進(jìn)行增／刪／改操作，管理員進(jìn)行了增／刪／改操作后，利用Ajax（異步的JavaScript 和XML）技術(shù)局部刷新頁面，展示最新的數(shù)據(jù)。 此外，用戶可以通過選擇巖性符號分類或巖性符號名稱來快速查找符號的信息。

3 系統(tǒng)測試

3.1 巖性符號在線繪制

巖性符號在線繪制頁面如圖7 所示。 頁面左側(cè)是功能區(qū)域，中間部分是繪制巖性符號的畫板區(qū)域，右側(cè)是圖形的樣式設(shè)置區(qū)域。 左側(cè)的圖元部分是預(yù)設(shè)的一些常用的圖形，畫筆工具允許用戶直接在畫板上繪制自定義的圖形。 除了基本的繪制功能外，該頁面還包括其他輔助功能，比如撤銷、前進(jìn)和刪除操作等。 繪制完成后可以將繪制符號以圖片的形式下載下來。

圖7 巖性符號在線繪制頁面Fig.7 Online drawing page of lithologic symbols

利用Canvas 畫板繪制一個(gè)叢式井符號，如圖8（a）所示。 該符號的繪制簡單，可以由基本的圖形組成。 接下來繪制一個(gè)板巖符號，如圖8 （b）所示，板巖符號除了包括基本圖形外，還包括用戶繪制的曲線。

圖8 巖性符號的繪制Fig.8 Drawing of lithologic symbols

3.2 巖性符號繪制指令抽取

分別對叢式井符號和板巖符號進(jìn)行抽取。 對叢式井符號抽取的指令如圖9（a）所示，對板巖符號抽取的指令如圖9（b）所示。 指令抽取成功后，可以直接將指令存入數(shù)據(jù)庫。

圖9 巖性符號的指令抽取Fig.9 Instruction extraction of lithologic symbols

指令抽取的過程實(shí)際上就是對數(shù)據(jù)量進(jìn)行壓縮的過程，對指令進(jìn)行抽取可以節(jié)省磁盤的空間，減小傳輸?shù)臅r(shí)間。 對繪制的多種巖性符號進(jìn)行抽取前后的數(shù)據(jù)量對比，效果見表1。

表1 指令抽取前后數(shù)據(jù)量對比Tab.1 Comparison of data volume before and after instruction extraction

3.3 巖性符號數(shù)據(jù)管理

巖性符號的數(shù)據(jù)信息以表格的形式進(jìn)行顯示，其中每一行表示一條巖性符號的記錄，每一列表示符號的一個(gè)屬性字段。 在線瀏覽的信息包括巖性符號分類、巖性符號名稱、圖標(biāo)代碼、符號指令、創(chuàng)建者等信息。 在該頁面還可以對巖性符號的基本信息進(jìn)行入庫、編輯、刪除和瀏覽等操作。

3.4 系統(tǒng)性能測試

為測試本系統(tǒng)的性能，利用Apache 開發(fā)的Jmeter 進(jìn)行系統(tǒng)壓力測試，服務(wù)器處理器為Intel（R） Core（TM） i5-3470 CPU ＠ 3.20 GHz，內(nèi)存大小為12 GB，系統(tǒng)版本為Windows10 專業(yè)版，瀏覽器為Google Chrome。 利用Jmeter 啟動1 000個(gè)線程，向數(shù)據(jù)管理頁面發(fā)起請求，測試結(jié)果見表2。 由表2可以看出單個(gè)請求的平均響應(yīng)時(shí)間為270 ms，錯誤率為0%，吞吐量為480.5／sec，通過這些指標(biāo)可以看出該管理系統(tǒng)的性能滿足應(yīng)用要求。

表2 系統(tǒng)壓力測試表格Tab.2 System pressure test form

同一個(gè)系統(tǒng)在不同的瀏覽器下可能存在兼容性問題，針對主流的瀏覽器對該系統(tǒng)進(jìn)行兼容性測試。在巖性符號管理系統(tǒng)中，前端用到的是Canvas 技術(shù)，市面上的主流瀏覽器，包括Internet Explorer 9 及以上的瀏覽器對Canvas 技術(shù)均能提供良好支持［12］。

4 結(jié)束語

結(jié)合巖性符號在線繪制的實(shí)際需要，本文針對C／S 架構(gòu)下的巖性符號繪制的不足，設(shè)計(jì)了基于B／S 架構(gòu)的巖性符號管理系統(tǒng)。 利用HTML5 的Canvas 繪圖技術(shù)和抽稀技術(shù)來處理原始繪制數(shù)據(jù)，減少繪制數(shù)據(jù)量，再利用擬合技術(shù)來平滑繪制的原始曲線，擴(kuò)展了在瀏覽器端繪制巖性符號的能力，使得用戶不但可以組合基本圖形來繪制巖性符號，還能自由繪制任意圖形的符號。 此外，用戶還可以通過在線瀏覽頁面對巖性符號信息進(jìn)行查看編輯和刪除等管理。 采用B／S 架構(gòu)，使得本研發(fā)系統(tǒng)的兼容性強(qiáng)、易擴(kuò)展，并具有良好的可維護(hù)性。 相比于傳統(tǒng)的巖性符號管理系統(tǒng)，該系統(tǒng)具有功能完善、繪制功能強(qiáng)大、輕量級、可移植性高和交互性強(qiáng)等優(yōu)勢，從而可有效助力地質(zhì)研究人員對地質(zhì)特性的分析與研究。