基于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 架构，使得本研发系统的兼容性强、易扩展，并具有良好的可维护性。 相比于传统的岩性符号管理系统，该系统具有功能完善、绘制功能强大、轻量级、可移植性高和交互性强等优势，从而可有效助力地质研究人员对地质特性的分析与研究。