基于Canvas的粒度累積概率曲線繪制系統(tǒng)

汪思思，卿粼波，何小海，張余強(qiáng)

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

基于Canvas的粒度累積概率曲線繪制系統(tǒng)

汪思思1，卿粼波1，何小海1，張余強(qiáng)2

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

沉積相分析是油氣勘探分析中的重要環(huán)節(jié)，其中粒度累積概率曲線作為沉積相分析的重要環(huán)節(jié)之一，在石油、地質(zhì)開發(fā)過(guò)程中應(yīng)用廣泛。目前，曲線的繪制大部分只能應(yīng)用于客戶端，資源共享性差，繪圖效率低。針對(duì)前述問(wèn)題，提出了一種基于HTML5 Canvas技術(shù)繪制粒度累積概率曲線的方法，其主要優(yōu)勢(shì)在于實(shí)現(xiàn)了曲線的動(dòng)態(tài)繪制和分段擬合，且系統(tǒng)可以在各大主流瀏覽器和智能設(shè)備中運(yùn)行。

Canvas；對(duì)數(shù)正態(tài)概率坐標(biāo)；HTML5

0 引言

粒度累積概率曲線的形態(tài)和分線段組合可作為判斷沉積相的標(biāo)志之一[1]，其主要反映牽引流的沉積特征，能夠直觀地辨別沉積環(huán)境和比較沉積物之間的差別。石油地質(zhì)相關(guān)人員繪制此類曲線通常是借助單機(jī)版的圖像軟件或Excel軟件[2-3]。隨著曲線復(fù)雜度和地質(zhì)人員對(duì)曲線人工交互部分的要求日益增多，現(xiàn)有的繪制工具并不能滿足用戶的需求。

本文分析了現(xiàn)有繪制工具的特點(diǎn)及不足之后，提出了一種基于HTML5 Canvas技術(shù)[4]繪制粒度概率累積曲線的方法。本文詳細(xì)闡述了基于B/S架構(gòu)下的曲線繪制系統(tǒng)的設(shè)計(jì)和實(shí)現(xiàn)，主要介紹了系統(tǒng)所包括的主要功能和實(shí)現(xiàn)過(guò)程中解決的關(guān)鍵性技術(shù)問(wèn)題。Canvas繪制的粒度累積概率曲線除了實(shí)現(xiàn)圖片無(wú)失真放大縮小之外，同時(shí)用戶可以根據(jù)需求自定義擬合直線。該系統(tǒng)已應(yīng)用于某些油田部門，并得到了專家的認(rèn)可。

1 需求分析及方案設(shè)計(jì)

目前油田管理系統(tǒng)中針對(duì)于曲線的繪制有兩種類型，一種是基于服務(wù)器端圖件生成方案，另一種是基于客戶端圖件生成方案。基于服務(wù)器端生成雖功能強(qiáng)大，但是當(dāng)大規(guī)模訪問(wèn)時(shí)服務(wù)器性能會(huì)下降，且圖件缺乏一定的交互性。基于客戶端生成圖件主要有基于SVG和Canvas兩種類型。隨著HTML5的應(yīng)用，使得不使用第三方插件繪圖成為可能，Canvas相對(duì)于SVG而言，主要是利用腳本語(yǔ)言來(lái)動(dòng)態(tài)渲染圖件，其繪圖效率更高，交互性良好。因此該系統(tǒng)采用的是基于Canvas技術(shù)的客戶端圖件生成方案，其主要是基于瀏覽器/服務(wù)器(Browser/Server)的MVC三層體系結(jié)構(gòu)，分別為數(shù)據(jù)訪問(wèn)層、表現(xiàn)層和業(yè)務(wù)邏輯層，其工作原理主要是用戶通過(guò)瀏覽器向服務(wù)器發(fā)送請(qǐng)求信號(hào)，服務(wù)器經(jīng)過(guò)相應(yīng)的邏輯分析，最后向數(shù)據(jù)訪問(wèn)層發(fā)送請(qǐng)求并對(duì)數(shù)據(jù)庫(kù)進(jìn)行相應(yīng)操作，然后返回相應(yīng)的數(shù)據(jù)信息給業(yè)務(wù)邏輯層。該模式的優(yōu)點(diǎn)是將數(shù)據(jù)的訪問(wèn)和實(shí)現(xiàn)進(jìn)行了分離，大型開發(fā)時(shí)易于維護(hù)，擴(kuò)展性良好。

基于此架構(gòu)繪制概率累積曲線時(shí)，除了實(shí)現(xiàn)基本的對(duì)數(shù)坐標(biāo)和點(diǎn)坐標(biāo)的繪制以外，還需要具備更好的交互性和可擴(kuò)展性。具體的功能需求表現(xiàn)在： (1)數(shù)據(jù)提示功能以及圖件的縮放功能；(2)分段式擬合直線的自動(dòng)擬合方式選擇功能以及擬合直線的手動(dòng)擬合功能；(3)圖件的打印和保存功能。

2 概率累積曲線的繪制和實(shí)現(xiàn)

2.1 曲線繪制關(guān)鍵技術(shù)

繪制曲線關(guān)鍵技術(shù)主要在于Canvas技術(shù)、對(duì)數(shù)正態(tài)概率坐標(biāo)的繪制和數(shù)據(jù)點(diǎn)的描繪以及分段直線擬合。

2.1.1Canvas技術(shù)

Canvas是HTML5的一部分，主要是由腳本語(yǔ)言Javascript動(dòng)態(tài)渲染的即時(shí)繪圖區(qū)域，得到了W3C(萬(wàn)維網(wǎng)聯(lián)盟)認(rèn)可，與其他繪圖技術(shù)相比，其優(yōu)勢(shì)在于：Canvas技術(shù)讓開發(fā)者能夠更好地實(shí)現(xiàn)基于Web的數(shù)據(jù)傳輸和數(shù)據(jù)可視化；相對(duì)于借助第三方開發(fā)工具(如Flash、SVG)的實(shí)現(xiàn),它可以使用HTML原生的API進(jìn)行開發(fā)和圖的繪制。Canvas主要適用于復(fù)雜場(chǎng)景以及大數(shù)據(jù)量的繪制，更具備圖像處理的方法，同時(shí)能夠以.JPG和.PNG格式保存圖像，且目前所有主流瀏覽器都支持Canvas標(biāo)簽。

使用Canvas繪制曲線需要在HTML中創(chuàng)建標(biāo)簽,得到一個(gè)對(duì)應(yīng)的context上下文對(duì)象，同時(shí)調(diào)用DOM元素的getContext(‘2D’)對(duì)象即可開始繪圖，在繪制概率累積曲線中,常用到的是繪制路徑(line)和繪制點(diǎn)(point)以及文本(text)。

2.1.2正態(tài)概率坐標(biāo)的繪制和數(shù)據(jù)點(diǎn)的繪制

概率累積曲線的坐標(biāo)是正態(tài)概率坐標(biāo)[5]，主要是以粒徑φ值為橫坐標(biāo)，概率累積百分?jǐn)?shù)為縱坐標(biāo)。其橫坐標(biāo)是均勻刻度的，其縱坐標(biāo)表示的是正態(tài)分布的函數(shù)值，并不是均勻刻度的。此時(shí)需要通過(guò)坐標(biāo)轉(zhuǎn)換將非線性的正態(tài)概率坐標(biāo)轉(zhuǎn)換為線性坐標(biāo)，標(biāo)準(zhǔn)正態(tài)分布的函數(shù)表達(dá)式為：

(1)

這一過(guò)程可通過(guò)正態(tài)累積分布函數(shù)轉(zhuǎn)換后進(jìn)行計(jì)算，該分布的平均值為0，標(biāo)準(zhǔn)偏差為1。通過(guò)表1上述這些點(diǎn)轉(zhuǎn)換的值即可繪制出曲線的縱坐標(biāo)。

表1 正態(tài)分布反函數(shù)轉(zhuǎn)換

在繪制數(shù)據(jù)點(diǎn)時(shí)，首先需要對(duì)數(shù)據(jù)點(diǎn)進(jìn)行公式轉(zhuǎn)換處理，從數(shù)據(jù)庫(kù)中提取粒級(jí)和累積質(zhì)量含量的值，根據(jù)粒級(jí)的值求出粒徑φ值，φ=-log2粒級(jí)，在繪制點(diǎn)時(shí)，同時(shí)需對(duì)縱坐標(biāo)累積百分含量的值進(jìn)行反正態(tài)分布函數(shù)轉(zhuǎn)換，對(duì)轉(zhuǎn)換之后的數(shù)據(jù)點(diǎn)進(jìn)行點(diǎn)的繪制。

2.1.3分段直線擬合的實(shí)現(xiàn)

粒度累積概率曲線的直線段可以反映顆粒搬運(yùn)方式的復(fù)雜程度，可以分為簡(jiǎn)單一段懸浮式或者低斜率兩段式以及高斜率多段式，即為了探究曲線與流體性質(zhì)的關(guān)系，需要實(shí)現(xiàn)概率曲線的分段線性擬合，這里采用的是最小二乘直線擬合[6]方法。

最小二乘法最早是由高斯提出用來(lái)解決天文學(xué)問(wèn)題，是一種數(shù)學(xué)優(yōu)化技術(shù)，具有很高的精確度，同時(shí)最小二乘法也可以用來(lái)處理一組數(shù)據(jù)并尋求數(shù)據(jù)之間的相互依賴關(guān)系，通過(guò)相關(guān)系數(shù)r可以判斷擬合效果。|r|越趨于1,則表示擬合性越好；|r|越趨于0，則表示擬合無(wú)意義。r定義為:

(2)

該分段直線擬合的基本思路為：

先將數(shù)據(jù)進(jìn)行排序，按照粒徑值從小到大的順序，選取前兩個(gè)點(diǎn)進(jìn)行線性擬合，利用最小二乘法可以求出y=a+bx，并求出相關(guān)系數(shù)r1,再選取一個(gè)新的點(diǎn)，同時(shí)計(jì)算出擬合直線的相關(guān)系數(shù)r2,若r1-r2的差值小于給定的閾值，則繼續(xù)選取下一個(gè)點(diǎn)，重新得到擬合直線方程和相關(guān)系數(shù)，直到前后兩次相關(guān)系數(shù)的差值大于給定的閾值，則求出直線的端點(diǎn)，即擬合直線第一段完成。將這段直線的最后一個(gè)點(diǎn)與下一個(gè)點(diǎn)進(jìn)行擬合并重復(fù)上一步驟，直至最后一個(gè)點(diǎn)擬合完成，這樣就得到了所有的分段直線的方程。最后對(duì)所有的擬合線段的誤差進(jìn)行分析，判斷是否符合誤差要求。流程圖如圖1所示。

圖1 擬合直線流程圖

有時(shí)默認(rèn)的擬合直線擬合效果不太理想，地質(zhì)人員可以根據(jù)需求自動(dòng)選擇擬合方式，同時(shí)提供手動(dòng)擬合的方式。手動(dòng)擬合即用鼠標(biāo)選中擬合直線的起點(diǎn)和終點(diǎn)，程序自動(dòng)擬合成直線，同時(shí)可以對(duì)擬合直線進(jìn)行修改操作。

2.2 概率累積曲線的繪制

基于上述曲線關(guān)鍵技術(shù)的分析與實(shí)現(xiàn)，在繪制曲線[5,7]時(shí)，首先定義一個(gè)Canvas元素，并設(shè)置canvas自帶的屬性width和height,然后通過(guò).getContext(‘2d’)調(diào)用canvas 2D環(huán)境，Canvas繪制時(shí)采用的是笛卡爾坐標(biāo)系統(tǒng)，即以左上角(0,0)坐標(biāo)為圓點(diǎn)，先繪制正態(tài)概率坐標(biāo)軸和數(shù)據(jù)點(diǎn)，后在進(jìn)行擬合直線時(shí)，首先需判斷選擇的是手動(dòng)擬合還是默認(rèn)擬合，若選擇默認(rèn)擬合方式則調(diào)用擬合算法實(shí)現(xiàn)分段式擬合直線繪制，若選用手動(dòng)擬合方式，首先需判斷用戶上次有沒(méi)有手動(dòng)擬合記錄，若存在記錄，則調(diào)用上次用戶擬合的端點(diǎn)數(shù)據(jù)進(jìn)行路徑繪制，具體程序流程如圖2。

圖2 概率累積曲線程序流程圖

Canvas對(duì)象支持大部分的鼠標(biāo)事件，在手動(dòng)擬合直線時(shí)，需要對(duì)Canvas畫布添加鼠標(biāo)點(diǎn)擊(mouseClick)事件，鼠標(biāo)連續(xù)點(diǎn)擊兩下后，會(huì)連續(xù)記錄鼠標(biāo)點(diǎn)擊點(diǎn)的位置，然后創(chuàng)建路徑繪制直線，點(diǎn)擊保存按鈕即可將這些點(diǎn)的頁(yè)面左邊點(diǎn)的信息錄入到數(shù)據(jù)庫(kù)中。當(dāng)該用戶下次進(jìn)入系統(tǒng)時(shí)仍然可以看到上次繪制的記錄。

3 結(jié)果展示

3.1 曲線展示

概率累積曲線圖用chrome瀏覽器打開，如圖3所示，當(dāng)前點(diǎn)根據(jù)擬合算法默認(rèn)擬合為三段式，三段擬合直線的相關(guān)系數(shù)r分別為0.999 9,0.999 91,0.997 7。 可見(jiàn)擬合效果理想。

圖3 概率累積曲線圖

3.2 其他功能展示

3.2.1分段式擬合方式的選擇

對(duì)于概率累積曲線的擬合，除了程序自行判斷外，還提供了手動(dòng)擬合的方式，如圖4～圖6所示，可選擇的擬合方式有一段式、二段式和三段式。

圖4 曲線一段式擬合

圖5 曲線二段式擬合

圖6 曲線三段式擬合

3.2.2曲線的保存和放大縮小功能

系統(tǒng)同時(shí)還提供曲線的縮放功能和圖片保存功能。如圖7所示，曲線可下載保存成jpg和.bmp格式的圖片。

4 結(jié)束語(yǔ)

本文從曲線繪制關(guān)鍵技術(shù)以及曲線繪制與功能實(shí)現(xiàn)三個(gè)方面闡述了基于Canvas技術(shù)概率累積曲線的繪制。Canvas主要優(yōu)勢(shì)在于與Excel軟件和單機(jī)版繪圖軟件相

比，作為一個(gè)輕量級(jí)的工具，允許瀏覽器直接繪制矢量圖，在繪圖效率上有很大的提升，為圖表的制作呈現(xiàn)了更新和更有效率的實(shí)現(xiàn)方法，同時(shí)概率累積曲線繪制可以作為單獨(dú)的模塊接入到任何一個(gè)Web應(yīng)用中,方便查看，同時(shí)提供離線保存圖片的功能，有效地提高了石油地質(zhì)人員對(duì)粒度概率曲線的繪制和分析效率。

[1] 楊飛，鄒妞妞，史基安，等.柴達(dá)木盆地北緣馬仙地區(qū)古近系碎屑巖沉積環(huán)境粒度概率累積曲線特征[J].天然氣地球科學(xué)，2013,24(4): 690-700.

[2] 王為，吳正.基于MATLAB的圖解粒度參數(shù)計(jì)算[J].熱帶地理，2006，26(3)：239-242.

[3] 張永成，王洪輝，譚桂花.基于Excel VBA的圖解粒度參數(shù)計(jì)算[J].成都理工大學(xué)(自然科學(xué)版)，2016，37(6)：650-653.

[4] 成舟，邵志清，張歡歡，等.HTML5 Canvas技術(shù)在工程流程圖中的研究與應(yīng)用[J].華東理工大學(xué)學(xué)報(bào)(自然科學(xué)版)，2015，41(2)： 260-265.

[5] 谷偉.基于HTML5 Canvas的客戶端圖表技術(shù)研究[J]. 信息技術(shù),2013(9):107-110.

[6] 田垅，劉宗田.最小二乘法分段直線擬合[J].計(jì)算機(jī)科學(xué)，2012，39(S1)：482-484.

[7] 吳磊,張福慶.基于HTML canvas的WebGIS客戶端技術(shù)研究[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的粒度累積概率曲線繪制系統(tǒng)[J].微型機(jī)與應(yīng)用，2017,36(23)：97-100.

2017-06-13)

汪思思(1994-)，女，碩士研究生，主要研究方向：圖像處理與圖像通信。

卿粼波(1982-)，通信作者，男，博士，副教授，主要研究方向：信號(hào)與信號(hào)系統(tǒng)、圖像處理、圖像通信。E-mail: qing_lb@scu.edu.cn。

何小海(1964-)，男，博士，教授，主要研究方向：圖像處理與信息系統(tǒng)、機(jī)器視覺(jué)與智能系統(tǒng)。