基于Canvas的粒度累积概率曲线绘制系统

汪思思，卿粼波，何小海，张余强

(1.四川大学 电子信息学院，四川 成都 610064; 2.成都西图科技有限公司，四川 成都 610065)

基于Canvas的粒度累积概率曲线绘制系统

汪思思1，卿粼波1，何小海1，张余强2

(1.四川大学 电子信息学院，四川 成都 610064; 2.成都西图科技有限公司，四川 成都 610065)

沉积相分析是油气勘探分析中的重要环节，其中粒度累积概率曲线作为沉积相分析的重要环节之一，在石油、地质开发过程中应用广泛。目前，曲线的绘制大部分只能应用于客户端，资源共享性差，绘图效率低。针对前述问题，提出了一种基于HTML5 Canvas技术绘制粒度累积概率曲线的方法，其主要优势在于实现了曲线的动态绘制和分段拟合，且系统可以在各大主流浏览器和智能设备中运行。

Canvas；对数正态概率坐标；HTML5

0 引言

粒度累积概率曲线的形态和分线段组合可作为判断沉积相的标志之一[1]，其主要反映牵引流的沉积特征，能够直观地辨别沉积环境和比较沉积物之间的差别。石油地质相关人员绘制此类曲线通常是借助单机版的图像软件或Excel软件[2-3]。随着曲线复杂度和地质人员对曲线人工交互部分的要求日益增多，现有的绘制工具并不能满足用户的需求。

本文分析了现有绘制工具的特点及不足之后，提出了一种基于HTML5 Canvas技术[4]绘制粒度概率累积曲线的方法。本文详细阐述了基于B/S架构下的曲线绘制系统的设计和实现，主要介绍了系统所包括的主要功能和实现过程中解决的关键性技术问题。Canvas绘制的粒度累积概率曲线除了实现图片无失真放大缩小之外，同时用户可以根据需求自定义拟合直线。该系统已应用于某些油田部门，并得到了专家的认可。

1 需求分析及方案设计

目前油田管理系统中针对于曲线的绘制有两种类型，一种是基于服务器端图件生成方案，另一种是基于客户端图件生成方案。基于服务器端生成虽功能强大，但是当大规模访问时服务器性能会下降，且图件缺乏一定的交互性。基于客户端生成图件主要有基于SVG和Canvas两种类型。随着HTML5的应用，使得不使用第三方插件绘图成为可能，Canvas相对于SVG而言，主要是利用脚本语言来动态渲染图件，其绘图效率更高，交互性良好。因此该系统采用的是基于Canvas技术的客户端图件生成方案，其主要是基于浏览器/服务器(Browser/Server)的MVC三层体系结构，分别为数据访问层、表现层和业务逻辑层，其工作原理主要是用户通过浏览器向服务器发送请求信号，服务器经过相应的逻辑分析，最后向数据访问层发送请求并对数据库进行相应操作，然后返回相应的数据信息给业务逻辑层。该模式的优点是将数据的访问和实现进行了分离，大型开发时易于维护，扩展性良好。

基于此架构绘制概率累积曲线时，除了实现基本的对数坐标和点坐标的绘制以外，还需要具备更好的交互性和可扩展性。具体的功能需求表现在： (1)数据提示功能以及图件的缩放功能；(2)分段式拟合直线的自动拟合方式选择功能以及拟合直线的手动拟合功能；(3)图件的打印和保存功能。

2 概率累积曲线的绘制和实现

2.1 曲线绘制关键技术

绘制曲线关键技术主要在于Canvas技术、对数正态概率坐标的绘制和数据点的描绘以及分段直线拟合。

2.1.1Canvas技术

Canvas是HTML5的一部分，主要是由脚本语言Javascript动态渲染的即时绘图区域，得到了W3C(万维网联盟)认可，与其他绘图技术相比，其优势在于：Canvas技术让开发者能够更好地实现基于Web的数据传输和数据可视化；相对于借助第三方开发工具(如Flash、SVG)的实现,它可以使用HTML原生的API进行开发和图的绘制。Canvas主要适用于复杂场景以及大数据量的绘制，更具备图像处理的方法，同时能够以.JPG和.PNG格式保存图像，且目前所有主流浏览器都支持Canvas标签。

使用Canvas绘制曲线需要在HTML中创建标签,得到一个对应的context上下文对象，同时调用DOM元素的getContext(‘2D’)对象即可开始绘图，在绘制概率累积曲线中,常用到的是绘制路径(line)和绘制点(point)以及文本(text)。

2.1.2正态概率坐标的绘制和数据点的绘制

概率累积曲线的坐标是正态概率坐标[5]，主要是以粒径φ值为横坐标，概率累积百分数为纵坐标。其横坐标是均匀刻度的，其纵坐标表示的是正态分布的函数值，并不是均匀刻度的。此时需要通过坐标转换将非线性的正态概率坐标转换为线性坐标，标准正态分布的函数表达式为：

(1)

这一过程可通过正态累积分布函数转换后进行计算，该分布的平均值为0，标准偏差为1。通过表1上述这些点转换的值即可绘制出曲线的纵坐标。

表1 正态分布反函数转换

在绘制数据点时，首先需要对数据点进行公式转换处理，从数据库中提取粒级和累积质量含量的值，根据粒级的值求出粒径φ值，φ=-log2粒级，在绘制点时，同时需对纵坐标累积百分含量的值进行反正态分布函数转换，对转换之后的数据点进行点的绘制。

2.1.3分段直线拟合的实现

粒度累积概率曲线的直线段可以反映颗粒搬运方式的复杂程度，可以分为简单一段悬浮式或者低斜率两段式以及高斜率多段式，即为了探究曲线与流体性质的关系，需要实现概率曲线的分段线性拟合，这里采用的是最小二乘直线拟合[6]方法。

最小二乘法最早是由高斯提出用来解决天文学问题，是一种数学优化技术，具有很高的精确度，同时最小二乘法也可以用来处理一组数据并寻求数据之间的相互依赖关系，通过相关系数r可以判断拟合效果。|r|越趋于1,则表示拟合性越好；|r|越趋于0，则表示拟合无意义。r定义为:

(2)

该分段直线拟合的基本思路为：

先将数据进行排序，按照粒径值从小到大的顺序，选取前两个点进行线性拟合，利用最小二乘法可以求出y=a+bx，并求出相关系数r1,再选取一个新的点，同时计算出拟合直线的相关系数r2,若r1-r2的差值小于给定的阈值，则继续选取下一个点，重新得到拟合直线方程和相关系数，直到前后两次相关系数的差值大于给定的阈值，则求出直线的端点，即拟合直线第一段完成。将这段直线的最后一个点与下一个点进行拟合并重复上一步骤，直至最后一个点拟合完成，这样就得到了所有的分段直线的方程。最后对所有的拟合线段的误差进行分析，判断是否符合误差要求。流程图如图1所示。

图1 拟合直线流程图

有时默认的拟合直线拟合效果不太理想，地质人员可以根据需求自动选择拟合方式，同时提供手动拟合的方式。手动拟合即用鼠标选中拟合直线的起点和终点，程序自动拟合成直线，同时可以对拟合直线进行修改操作。

2.2 概率累积曲线的绘制

基于上述曲线关键技术的分析与实现，在绘制曲线[5,7]时，首先定义一个Canvas元素，并设置canvas自带的属性width和height,然后通过.getContext(‘2d’)调用canvas 2D环境，Canvas绘制时采用的是笛卡尔坐标系统，即以左上角(0,0)坐标为圆点，先绘制正态概率坐标轴和数据点，后在进行拟合直线时，首先需判断选择的是手动拟合还是默认拟合，若选择默认拟合方式则调用拟合算法实现分段式拟合直线绘制，若选用手动拟合方式，首先需判断用户上次有没有手动拟合记录，若存在记录，则调用上次用户拟合的端点数据进行路径绘制，具体程序流程如图2。

图2 概率累积曲线程序流程图

Canvas对象支持大部分的鼠标事件，在手动拟合直线时，需要对Canvas画布添加鼠标点击(mouseClick)事件，鼠标连续点击两下后，会连续记录鼠标点击点的位置，然后创建路径绘制直线，点击保存按钮即可将这些点的页面左边点的信息录入到数据库中。当该用户下次进入系统时仍然可以看到上次绘制的记录。

3 结果展示

3.1 曲线展示

概率累积曲线图用chrome浏览器打开，如图3所示，当前点根据拟合算法默认拟合为三段式，三段拟合直线的相关系数r分别为0.999 9,0.999 91,0.997 7。 可见拟合效果理想。

图3 概率累积曲线图

3.2 其他功能展示

3.2.1分段式拟合方式的选择

对于概率累积曲线的拟合，除了程序自行判断外，还提供了手动拟合的方式，如图4～图6所示，可选择的拟合方式有一段式、二段式和三段式。

图4 曲线一段式拟合

图5 曲线二段式拟合

图6 曲线三段式拟合

3.2.2曲线的保存和放大缩小功能

系统同时还提供曲线的缩放功能和图片保存功能。如图7所示，曲线可下载保存成jpg和.bmp格式的图片。

4 结束语

本文从曲线绘制关键技术以及曲线绘制与功能实现三个方面阐述了基于Canvas技术概率累积曲线的绘制。Canvas主要优势在于与Excel软件和单机版绘图软件相

比，作为一个轻量级的工具，允许浏览器直接绘制矢量图，在绘图效率上有很大的提升，为图表的制作呈现了更新和更有效率的实现方法，同时概率累积曲线绘制可以作为单独的模块接入到任何一个Web应用中,方便查看，同时提供离线保存图片的功能，有效地提高了石油地质人员对粒度概率曲线的绘制和分析效率。

[1] 杨飞，邹妞妞，史基安，等.柴达木盆地北缘马仙地区古近系碎屑岩沉积环境粒度概率累积曲线特征[J].天然气地球科学，2013,24(4): 690-700.

[2] 王为，吴正.基于MATLAB的图解粒度参数计算[J].热带地理，2006，26(3)：239-242.

[3] 张永成，王洪辉，谭桂花.基于Excel VBA的图解粒度参数计算[J].成都理工大学(自然科学版)，2016，37(6)：650-653.

[4] 成舟，邵志清，张欢欢，等.HTML5 Canvas技术在工程流程图中的研究与应用[J].华东理工大学学报(自然科学版)，2015，41(2)： 260-265.

[5] 谷伟.基于HTML5 Canvas的客户端图表技术研究[J]. 信息技术,2013(9):107-110.

[6] 田垅，刘宗田.最小二乘法分段直线拟合[J].计算机科学，2012，39(S1)：482-484.

[7] 吴磊,张福庆.基于HTML canvas的WebGIS客户端技术研究[J].地理信息世界,2009,7(3):78-82.

Granular cumulative probability curve drawing system based on Canvas

Wang Sisi1, Qing Linbo1, He Xiaohai1, Zhang Yuqiang2

(1. College of Electronics and Information Engineering, Sichuan University, Chengdu 610064, China;(2. Chengdu Xitu Technology Co., Ltd., Chengdu 610065, China)

Sedimentary facies analysis is an important link in oil and gas exploration analysis. The particle size cumulative probability curve is one of the important links in sedimentary facies analysis, is widely used in petroleum and geological development. At present, most of the drawing of the curve can only be applied to the client, the resource sharing and drawing efficiency is poor. Aiming at the above problems, this paper proposes a method to draw the granularity cumulative probability curve based on HTML5 Canvas technology. The main advantage lies in the dynamic rendering and segmentation of the curve, and the system can run in all the major mainstream browsers and intelligent devices.

Canvas; lognormal probability coordinate; HTML5

TP391

A

10.19358/j.issn.1674- 7720.2017.23.028

汪思思，卿粼波，何小海，等.基于Canvas的粒度累积概率曲线绘制系统[J].微型机与应用，2017,36(23)：97-100.

2017-06-13)

汪思思(1994-)，女，硕士研究生，主要研究方向：图像处理与图像通信。

卿粼波(1982-)，通信作者，男，博士，副教授，主要研究方向：信号与信号系统、图像处理、图像通信。E-mail: qing_lb@scu.edu.cn。

何小海(1964-)，男，博士，教授，主要研究方向：图像处理与信息系统、机器视觉与智能系统。