基于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日