基于SVG的巖性符號的繪制與應用

毛敏芳　卿粼波　滕奇志　張余強

(1.四川大學電子信息學院　成都　610064)(2.成都西圖科技有限公司　成都　610065)

?

基于SVG的巖性符號的繪制與應用

毛敏芳1卿粼波1滕奇志1張余強2

(1.四川大學電子信息學院成都610064)(2.成都西圖科技有限公司成都610065)

摘要巖性符號作為石油、地質部門表達石油地質對象特性的一種重要工具,在石油、地質巖心管理系統中具有非常重要的意義。SVG是由W3C組織開發的一種開放標準的文本式矢量圖形描述語言。論文將SVG與巖性符號相結合,提出一種基于SVG的巖性符號的繪制方法,并設計了在柱狀圖中基于SVG巖性矢量符號的動態繪制系統。系統主要利用SVG與網頁的交互性,實現巖性符號的動態繪制。

關鍵詞SVG; XML; 矢量; JavaScript; HTML5

Drawings and Application of Lithological Symbols Based on SVG

MAO Minfang1QING Linbo1TENG Qizhi1ZHANG Yuqiang2

(1. College of Electronic and Information, Sichuan University, Chengdu610064)

(2. Chengdu Xitu Technology Co. Ltd., Chengdu610065)

AbstractAs oil petroleum geology, geological department expression object properties of a kind of important tool, lithological symbols have very important significance in its oil, geology core management system. SVG is developed by the W3C organization of an open standard text vector graphic description language. Combining SVG and lithological symbols, a mapping method is proposed based on SVG lithological symbols, and the histogram dynamic rendering system is designed based on SVG lithology vector symbols. System mainly use SVG and web interaction to implement the dynamic drawing of lithological symbols.

Key WordsSVG, XML, vector, JavaScript, HTML5

Class NumberTP391.41

1引言

巖性符號作為石油地質學中地質認知與信息交流的一種圖形語言,同時也是標定巖性的圖形符號,在石油、地質巖心管理系統中占有極其重要的地位[1]。在網頁中繪制柱狀圖的過程中,巖性剖面是以位圖形式的巖性符號填充的[2],當繪制比例發生變化時,位圖形式的巖性符號圖片不能夠自適應比例的放大縮小,導致圖片出現毛刺和不清晰的現象,從而影響石油地質相關專業人員對巖心性質的分析效率。

針對上述的問題,本文提出一種基于SVG矢量圖形式的巖性符號的繪制方法,并設計一種在柱狀圖中基于SVG矢量圖的巖性符號的動態繪制系統。SVG格式的巖性符號不僅具有放大縮小無失真的優點,而且能夠根據參數信息,自動調整符號大小,使整個界面協調美觀。本文主要分為兩大部分:一是制作固定行數的巖性符號的SVG矢量圖,作為巖性符號圖樣,同時,也作為動態繪制的基礎;二是在柱狀圖中動態的嵌入SVG矢量圖,并根據井段信息動態繪制相應行數的巖性符號。

2系統架構

綜合柱狀圖作為巖心管理系統中的最重要的模塊之一,其作用是將數據庫中的相關巖心信息以圖文并茂的柱狀圖形式展示給用戶。而巖性符號又是柱狀圖中不可缺少的一部分。因此,基于SVG矢量圖的巖性符號的動態繪制系統整體構架與綜合柱狀圖系統構架類似,主要是采用B/S(Brower/Server)三層體系結構,分別為表現層(Presentation layer)、業務邏輯層(Business Logic Layer)和數據訪問層(Data access layer)。客戶端作為表現層,發送請求信號給作為業務邏輯層的服務器,服務器再進行相應的邏輯分析,最后向數據訪問層發送請求,數據訪問層接收請求后,再對數據庫進行相應操作。利用ADO.NET從數據庫中獲取數據,并以HTTP協議方式反饋給Web瀏覽器。

系統架構圖如圖1所示。

圖1　系統架構圖

系統通過采用B/S結構,用戶可以方便地通過Web瀏覽器遠程訪問服務器,而不需要安裝任何專門的應用軟件。

3巖性符號的SVG矢量圖繪制與動態填充

3.1SVG矢量圖繪制

可伸縮矢量圖像(Scalable Vector Graphics,SVG)是一種基于XML的開放標準的文本矢量圖形描述語言[3]。它利用文本格式的描述性語言,并嚴格遵從XML語法,來描述圖像的內容,是一種與圖像分辨率無關的矢量圖形格式[4],其具有以下幾個優點:

1) 基于XML標準。XML是公認的具有無窮生命力的下一代網絡標記語言,相比HTML,使用者能夠自定義標記來描述文本中的任何數據元素,以此來豐富文件的內容,也更加容易組成一個完整的信息系統[5]。

2) 矢量圖形格式。矢量圖形是由線條和填充色等構成,并由計算機根據矢量數據進行計算,繪制而成的[6]。

3) 由文本構成的圖像。SVG是一種文本格式的圖像,可以利用記事本打開編輯查看,無需任何圖像處理工具。

4) 動畫和交互性。SVG圖形可以方便地由JavaScript、Java、Perl等程序語言動態生成圖形,同時SVG完全支持DOM,能夠通過腳本受外部事件驅動[7~8]。

圖2　SVG巖性矢量符號繪制程序流程圖

基于SVG具有上述優點,再結合巖性符號都是線條和填充色的組合特點,本文采用SVG格式的巖性符號能夠更好、更方便快捷地繪制網頁中柱狀圖的巖性剖面。與HTML類似,基于XML的SVG的語法和格式,都是結構化的,即文件中的任何元素都可以作為一個對象進行管理。SVG文件最外層使用標簽〈svg〉〈/svg〉,聲明SVG文件主體的開始和結束,同時,也可在最外層標簽上面添加注釋聲明等信息。在SVG格式的巖性符號內主要用到的SVG基本圖形元素有:〈rect〉(矩形)、〈circle〉(圓)、〈ellipse〉(橢圓)、〈line〉(直線)、〈polyline〉(折線)、〈polygon〉(多邊形),此外,還有〈text〉文本元素和〈path〉路徑元素。

在繪制巖性符號時,依照石油地質符號繪圖規范[9],基于數據庫中現有的符號繪制指令集[10],通過解析各個巖性符號的繪制指令,并利用TinyXML解析庫寫入SVG文件,從而實現制作巖性符號的SVG矢量圖,其程序流程圖如圖2所示。

以灰質細砂巖為例,繪制三行符號,設定SVG初始畫布的大小高為240個單位,寬為120個單位,視口大小高也為240個單位,寬為120個單位,靠左顯示,其中涉及的圖形元素有〈rect〉、〈ellipse〉、〈line〉,標簽〈g〉是SVG框架元素,其主要框架如下所示:

〈svgviewBox="0,0,240,120" width="240" height="120" preserveAspectRatio="xMinYMinmeet" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)"〉

〈g id="g1" style="fill:none;stroke:rgb(0,0,0);stroke-width:2"〉

〈rect x="0" y="0" width="200" height="40" /〉

〈rect x="0" y="40" width="200" height="40" /〉

〈rect x="0" y="80" width="200" height="40" /〉

〈/g〉

〈g id="g2"〉

〈line x1="30" y1="0" x2="30" y2="40" style="stroke:rgb(0,0,0);stroke-width:2" /〉

〈ellipse cx="62" cy="22" rx="2" ry="2" style="fill:rgb(0,0,0);fill-opacity:0.5;stroke:rgb(0,0,0);stroke-width:2" /〉

〈ellipse cx="102" cy="22" rx="2" ry="2"style="fill:rgb(0,0,0);fill-opacity:0.5;stroke:rgb(0,0,0);stroke-width:2" /〉

〈ellipse cx="142" cy="22" rx="2" ry="2"style="fill:rgb(0,0,0);fill-opacity:0.5;stroke:rgb(0,0,0);stroke-width:2" /〉

〈/g〉

〈g id="g3" transform="translate(0,40)"〉……〈/g〉

〈g id="g4" transform="translate(0,80)"〉……〈/g〉

〈/svg〉

SVG文件用IE瀏覽器打開,其矢量圖形如圖3所示。

圖3　灰質細砂巖SVG矢量圖與位圖對比圖

把灰質細砂巖位圖放大到與SVG矢量圖相同大小后的效果圖如圖3右圖所示,兩者相比較,可以明顯地觀察出位圖出現毛刺現象,圖形失真不清晰。

3.2柱狀圖中SVG矢量圖動態填充

柱狀圖中巖性符號的SVG矢量圖動態填充,是指在已有的巖性符號SVG文件的基礎上,系統能夠根據數據庫中錄入的巖性名稱、起始井深和終止井深等信息,在相應井段位置動態的繪制相應行數的巖性符號,以達到填充的效果。在動態繪制系統中,系統需先從服務器下載SVG格式的巖性符號。由于SVG是基于文本的圖形,所以一個SVG文件只有幾KB大小,所有的巖性符號加起來也只有幾MB而已,這有利于在網絡之間的傳輸。

利用ADO.NET從數據庫獲取巖性符號的相關目錄信息、符號高度、符號寬度、偏移量、填充模式,以及相應井段的起始井深和終止井深,并存放在一個JSON對象數組中,方便在JavaScript中使用。在ASP.NET的網頁中,根據JSON數組的數據,利用JavaScript動態創建HTML5的新標簽embed,即創建裝載SVG文件的容器。同時,根據起始井深和終止井深,設置embed標簽的height屬性,同時把柱狀圖巖性剖面的道寬大小設置為embed標簽的width屬性,并結合本地SVG文件存放的路徑和巖性符號的目錄信息,構成每個巖性符號的新路徑,同時把該新路徑信息附給embed標簽的src屬性,從而引入SVG文件。除此之外,再根據起始井深設置embed標簽樣式中的top屬性,以使井段和巖性符號相對應。在創建embed標簽的同時,使用一個數組svginfo記錄道中每個巖性符號的具體信息,包括巖性符號名稱、embed高度、embed寬度、符號高度、符號寬度、偏移量、填充模式等,以便于SVG矢量圖的動態填充。

在巖性符號的SVG文件中,利用JavaScript腳本實現與ASP.NET網頁兩者之間的交互。網頁在加載SVG文件完成時就立即觸發SVG中的onload事件,執行填充動作。SVG首先通過target.ownerDocument獲得本身文檔對象,進而獲取其根元素svg。由于需要與網頁中的腳本進行通信,則需通過截取加載完成之后的SVG文檔的URL字符串獲得其SVG文檔名稱,即巖性符號名稱,并以此作為參數,回調網頁中的ReturnPreSvg(svgname)函數。在ReturnPreSvg(svgname)函數中,通過把參數svgname與存有巖性符號信息的數組svginfo中的巖性符號名稱按順序相比較,找到第一個對應的巖性符號繪制信息,并返回給SVG,同時在數組中刪除該符號的繪制信息。SVG獲取到需要繪制的信息后,根據embed的高度和寬度,重新設置根元素svg的height屬性和width屬性,并通過計算,重新設置視口viewBox。為了使圖形能夠隨柱狀圖的比例大小變化,不僅畫布的大小要隨著道寬的大小變化,而且相應的圖形大小也要跟著變化,這就要求svg里面的繪制單位也要跟著變化,即一個單位表示屏幕幾個像素點大小。由于所有符號的寬度最大為240個單位,故固定視口的寬度為240不變,使畫布寬度隨著道寬變化,即可確定水平方向的繪制單位。為使圖形比例協調,則垂直方向的單位大小需與水平方向的單位大小一致,因畫布的高度由embed高度決定,則可計算出視口的高度viewH,具體計算公式如下所示:

(1)

其中,height為svg畫布高度,width為畫布寬度,Width/240為水平方向的單位大小。

需繪制的符號行數row由視口高度和符號高度決定,其計算公式如下所示:

(2)

其中,viewH為視口高度,symbolHeight為符號高度。由于是在原SVG文件上再繪制,則需減去已繪制的行數,即數據庫中的填充模式大小,才得到需動態繪制的行數。利用SVG的transform屬性的平移變換(translate)和旋轉變換(rotate),再結合DOM對象,實現多行符號的繪制,達到填充的效果。

在柱狀圖中的,原比例和放大比例的巖性剖面對比圖如圖4所示。

由圖4可以看出,由于比例放大,圖形放大,導致動態填充的行數不同,同時,圖形清晰無失真。

4結語

本文結合巖性符號和SVG的特點,制作了一套基于SVG矢量圖的巖性符號并設計了柱狀圖中基于SVG矢量圖的巖性符號的動態繪制系統。基于SVG矢量圖的巖性符號具有可復用性、可維護性及可擴展性,且文件小,易下載,利于網絡傳輸,大大地增強了與其他技術標準的交互和融合。動態繪制系統基于B/S模式,利用SVG與網頁的交互手段,解決了巖性符號圖形模糊失真的問題,有效的提高了石油地質相關專業人員對巖心性質的分析效率。

參 考 文 獻

[1] 劉如奎,吳曉紅,滕奇志,等.巖性符號的繪制與管理[J].科學技術與工程,2013,(9):2465-2469.

LIU Rukui, WU Xiaohong, TENG Qizhi, et al. Draw and Management of Lithologic Symbol[J]. Science Technology and Engineering,2013,(9):2465-2469.

[2] 鄒修梅,卿粼波,吳曉紅,等.柱狀圖中矢量巖性圖例的動態繪制與編制[J].計算機與數字工程,2015,(4):714-719.

ZOU Xiumei, QIN Linbo, WU Xiaohong, et al. Dynamic drawing and Editing of Vector rock legend of Histogram[J]. Computer and Digital Engineering,2015,(4):714-719.

[3] 劉嘯.基于XML的SVG應用指南[M].北京:北京科海出版社,2001:1-4.

LIU Xiao. SVG XML-based Application Guide[M]. Beijing: Beijing Kehai Press,2001:1-4.

[4] 史冬梅,趙忠華.基于XML矢量圖像的SVG研究與應用[J].油氣田地面工程,2009,28(7):58-59.

SHI Dongmei, ZHAO Zhonghua. SVG based XML Research and Application of Vector Images[J]. Journal of Oil and Gas Field Surface Engineering,2009,28(7):58-59.

[5] 柳俊.基于SVG標準的WebGIS地圖應用研究[J].計算機工程,2008,34(18):272-273.

LIU Jun. WebGIS based on SVG standard map application study[J]. Computer Engineering,2008,34(18):272-273.

[6] 陳傳波,王菁,鄧凱.基于SVG的實時數據動態發布技術的研究[J].小型微型計算機系統,2002,23(5):609-612.

CHEN Chuanbo, WANG Jing, DENG Kai. Real-time data based on SVG dynamic publishing technology research[J]. Small Microcomputer System,2002,23(5):609-612.

[7] 黃曉文.基于XML的網絡矢量圖像SVG的實現與應用研究[J].上海電力學院學報,2003,19(1):18-22.

HUANG Xiaowen. Implementation and Application of XML Web SVG Vector Image of[J]. Shanghai University of Electric Power,2003,19(1):18-22.

[8] 劉遵雄,況志軍,高玉柱.基于SVG的電力圖形系統的實現[J].電力系統保護與控制,2005,33(21):69-73.

LIU Zunxiong, KUANG Zhijun, GAO Yuzhu. The implementation of electric power based on SVG graphics system[J]. Power System Protection and Control,2005,33(21):69-73.

[9] SY/T 6931-2012,石油地質繪圖軟件符號規范[S].

SY/T 6931-2012, Drawing pattern of Geology Software for Petroleum Geology[S].

[10] 蒲琴.石油地質矢量符號在線管理與繪制系統的實現[D].成都:四川大學,2014.

PU Qin. The Achievement of On-line Management and Rendering System for Petroleum Geology Vector-Format Symbols[D]. Chengdu: Sichuan University,2014.

中圖分類號TP391.41

DOI:10.3969/j.issn.1672-9722.2016.01.034

作者簡介:毛敏芳,女,碩士研究生,研究方向:計算機應用與圖像識別。卿粼波,男,博士,講師,研究方向:信號與信號系統、圖像處理、圖像通信。滕奇志,女,博士,教授,博士生導師,研究方向:數字圖像處理與模式識別、計算機應用與圖像識別、生物醫學圖像等。張余強,男,研究方向:軟件工程。

收稿日期:2015年7月3日,修回日期:2015年8月13日