基于Canvas 的巖性符號管理系統的設計與實現

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

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

0 引 言

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

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

針對現有巖性符號管理系統的不足，本文運用B／S 架構體系開發了基于HTML5 Canvas 技術的巖性符號管理系統，利用Canvas 強大的繪圖技術，提高了系統的靈活性和可操作性，設計了繪制指令抽取方案來壓縮繪制的原始圖形的數據量，這樣在重現和傳輸指令時能節省網絡傳輸時間。 同時由于采用Canvas 繪圖技術，繪制的巖性符號在應用于綜合柱狀圖的處理中能方便地進行動態重繪。

1 系統需求分析與總體設計

1.1 需求分析

一套完善的巖性符號管理系統應該具備的基本功能包括生成新的符號、對已存在的符號進行修改以及對符號信息進行有效的管理。 除了保證基本的功能需求，還要求設計的系統界面美觀、易操作、性能穩定、可維護性和可擴展性強。

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

1.2 總體設計

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

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

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

2 系統功能模塊設計

2.1 巖性符號在線繪制

2.1.1 巖性符號在線繪制功能設計

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

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

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

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

2.1.2 自定義圖形的數據處理

對于自定義的路徑需要進行額外的處理，因為用戶自定義繪制的路徑含有的點信息豐富，如果直接保存下來，將會浪費大量的存儲空間，不僅如此，用戶自定義繪制的路徑一般平滑度差，如果直接使用用戶繪制的路徑作為符號是不美觀的。

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

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

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

計算垂距的步驟如下：

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

（2）利用公式（2）計算變量p的值。

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

這里，給出公式（1）～（3）的數學表達為：

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

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

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

其中，x表示曲線參數，a、b、c、d為待計算的曲線參數。

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

（1）每2 個點之間需要擬合一條三次函數曲線，三次函數曲線需要經過這2 個點。

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

（3）在整條曲線的兩端的端點處，三次函數曲線的三階導數需要進行自定義的限制，這里限制整條曲線兩端的三階導數為0。

根據以上給出的條件，可以計算出構成整條曲線的每一條的三次函數曲線。

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

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

2.2 巖性符號指令抽取

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

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

圖5 指令抽取的關鍵步驟Fig.5 Instruction extraction flow chart

2.3 巖性符號數據管理

巖性符號數據管理頁面實現了對巖性符號信息的管理，包括巖性符號信息在線瀏覽、新增巖性符號信息、修改巖性符號信息、刪除巖性符號、預覽巖性符號繪制效果。

本系統采用關系型數據庫MySQL 來對巖性符號的信息進行存儲和管理，所有的數據均以字段的形式存于數據庫。 MySQL 數據庫具有體積小、成本低、速度快的優點［11］。 數據庫設計的ER（實體關系）圖如圖6 所示。

圖6 數據庫ER 圖Fig.6 Database ER diagram

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

3 系統測試

3.1 巖性符號在線繪制

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

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

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

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

3.2 巖性符號繪制指令抽取

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

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

指令抽取的過程實際上就是對數據量進行壓縮的過程，對指令進行抽取可以節省磁盤的空間，減小傳輸的時間。 對繪制的多種巖性符號進行抽取前后的數據量對比，效果見表1。

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

3.3 巖性符號數據管理

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

3.4 系統性能測試

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

表2 系統壓力測試表格Tab.2 System pressure test form

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

4 結束語

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