亚洲免费av电影一区二区三区,日韩爱爱视频,51精品视频一区二区三区,91视频爱爱,日韩欧美在线播放视频,中文字幕少妇AV,亚洲电影中文字幕,久久久久亚洲av成人网址,久久综合视频网站,国产在线不卡免费播放

        ?

        基于SVG繪圖技術(shù)實(shí)現(xiàn)流程圖展示的研究

        2018-07-25 06:13:38張瑩
        電腦與電信 2018年5期
        關(guān)鍵詞:流程圖矢量繪制

        張瑩

        1 引言

        近年來,Internet技術(shù)有了較快的發(fā)展,尤其是分布式計(jì)算技術(shù)也得到了迅速發(fā)展,應(yīng)用領(lǐng)域日益廣泛。其于Web的繪圖技術(shù)通過借助第三方提供的一些工具實(shí)現(xiàn)了Web的繪圖功能,但生成的Web圖形不能實(shí)現(xiàn)有效交互,在理論上可視為死圖。SVG可縮放矢量圖形(Scalable Vector Graphics)可以實(shí)現(xiàn)與用戶的交互功能,具有較好的可讀性,是一種比較適用于描述二維矢量圖形的圖形格式。

        2 SVG技術(shù)簡介

        2.1 SVG概述

        SVG標(biāo)準(zhǔn)是由W3C組織制定的一個(gè)開放標(biāo)準(zhǔn),它非常容易實(shí)現(xiàn)Web發(fā)布,是一種全新的動(dòng)畫和圖像格式。SVG具有以下優(yōu)點(diǎn):

        (1)操作簡單,可以通過色彩填充、對(duì)象運(yùn)動(dòng)等簡單的操作實(shí)現(xiàn)多媒體效果,可以通過一些計(jì)算機(jī)文本語言完成矢量圖像。

        (2)具有較強(qiáng)的交互性,可以與很多先進(jìn)的網(wǎng)頁交互技術(shù)進(jìn)行兼容。用戶可以利用SVG中的一些元素,利用網(wǎng)頁中的腳本語言實(shí)現(xiàn)動(dòng)作的交互,達(dá)到制作目的。SVG圖像可以通過腳本程序代碼與JavaScript或XML實(shí)現(xiàn)交互,SVG圖像可以由JavaScript、Perl、Java等程序語言動(dòng)態(tài)生成,圖像可以根據(jù)數(shù)據(jù)庫的實(shí)際應(yīng)用而改變。

        (3)SVG是一種文本描述格式,這就決定它具有屬性數(shù)據(jù)和動(dòng)態(tài)數(shù)據(jù)的屬性,可以在查詢地理信息和相關(guān)聯(lián)對(duì)象方面應(yīng)用廣泛。SVG基于文本格式,因此它可以進(jìn)行二次修改,也可以說是一種可升級(jí)的圖像文件格式,這一特點(diǎn)被廣泛應(yīng)用在處理復(fù)雜數(shù)據(jù)方面,在維護(hù)數(shù)據(jù)時(shí),表現(xiàn)出方便、靈活、容易維護(hù)等特點(diǎn)。此外,SVG圖像中的文字能夠在網(wǎng)絡(luò)中實(shí)現(xiàn)精確搜尋,能夠?qū)崿F(xiàn)用戶瀏覽器的查找和編輯。

        (4)具有較強(qiáng)的渲染與濾鏡處理能力,電子地圖非常清晰。實(shí)踐證明,SVG圖像的清晰度對(duì)任何屏幕分辨率或打印分辨率都比較實(shí)用,打印效果非常好,打印效果能夠和屏幕顯示圖像色彩保持較好的一致性。SVG的矢量濾鏡功能也非常實(shí)用,操作簡便,只需要調(diào)整一些參數(shù)屬性就可以修改圖像效果。

        (5)SVG在圖像處理方面有著獨(dú)特的優(yōu)勢(shì),SVG符號(hào)庫填充功能非常強(qiáng)大,具有引入柵格圖像填充、定義矢量圖元進(jìn)行填充等功能,操作過程中,任何一個(gè)地圖符號(hào)都可以填充到相應(yīng)的位置。

        2.2 SVG與其他圖形的區(qū)別

        網(wǎng)絡(luò)上可以應(yīng)用的圖像格式有很多種,如:JPEG、GIF、PNG、PG、ML矢量標(biāo)記語言(VML)等。JPEG、PNG等由于是位圖格式,在應(yīng)用過程中存在一定缺陷,因?yàn)槲粓D的尺寸大,不利于傳輸,在改變圖像大小時(shí)會(huì)出現(xiàn)一些鋸齒狀的線條。而矢量圖的原理是基于數(shù)學(xué)公式的命令渲染來控制線條的粗細(xì)、顏色和圖形的,因此,它在很多方面有了改進(jìn),它不但克服了位圖尺寸大的缺點(diǎn),還可以按照任意比例進(jìn)行縮放。

        2.3 SVG編輯圖形

        SVG技術(shù)在處理圖形、圖像和文字方面具有強(qiáng)大的功能,它不但支持文本、交互性等常用的標(biāo)記,還能夠?qū)崿F(xiàn)圖形、圖像、動(dòng)畫等的一些功能。SVG圖形文件編輯操作步驟為:首先要通過XML解析器打開SVG圖形文件,并相應(yīng)地生成一個(gè)對(duì)象樹;接著,用鼠標(biāo)點(diǎn)擊以驅(qū)動(dòng)腳本執(zhí)行,腳本即可利用DOM接口對(duì)對(duì)象進(jìn)行一系列動(dòng)作,實(shí)現(xiàn)圖形繪制、編輯等圖形編輯功能。如圖1所示。

        圖1 SVG編輯圖形流程

        3 SVG技術(shù)在油田產(chǎn)能項(xiàng)目運(yùn)行管理系統(tǒng)中的應(yīng)用

        3.1 產(chǎn)能項(xiàng)目中傳統(tǒng)流程圖的展示

        以往的項(xiàng)目流程圖的展示是在Web圖形上實(shí)現(xiàn)的,這種實(shí)現(xiàn)方式有自身的缺陷,因?yàn)樗ㄟ^微軟的.NET、SUN的Java等一些工具才能實(shí)現(xiàn)圖形功能,實(shí)現(xiàn)的圖形也不能與用戶進(jìn)行有效交互。SVG可縮放矢量圖形與Web圖形功能相比較,具有很多優(yōu)點(diǎn),它是采用文本來描述矢量化的圖形,這就決定了SVG圖像文件可以像網(wǎng)頁一樣方便瀏覽。通常項(xiàng)目的流程圖用電子表格的形式來實(shí)現(xiàn),如圖2所示。

        圖2 傳統(tǒng)流程圖的展示

        從圖2這種形式我們可以看到存在幾下幾個(gè)問題:

        (1)傳統(tǒng)項(xiàng)目中,流程圖的模式只有電子表格展示。存在拖拽困難,展示單一的問題,很大程度上影響了用戶對(duì)流程圖直觀的體驗(yàn)。

        (2)電子表格做成位圖圖像進(jìn)行展示的缺點(diǎn)是,圖形文件普遍較大,存儲(chǔ)時(shí)會(huì)占用大量的網(wǎng)絡(luò)帶寬,會(huì)拖慢整個(gè)程序的進(jìn)程。

        (3)圖形很難在Interne上實(shí)現(xiàn)真正的數(shù)據(jù)交換功能,項(xiàng)目中很多功能無法實(shí)現(xiàn)。

        (4)文本很難獨(dú)立,字體也常常受到限制。

        (5)顯示效果較差,無法實(shí)現(xiàn)多種顏色的控制。

        3.2 產(chǎn)能項(xiàng)目中使用SVG技術(shù)實(shí)現(xiàn)的流程圖展示

        同以往流程圖繪制不同的是SVG技術(shù)的圖形功能比較強(qiáng)大,是一種動(dòng)靜態(tài)結(jié)合的圖像技術(shù),可以實(shí)現(xiàn)Internet上展示圖形、移動(dòng)終端上的圖形繪制,可以支持動(dòng)畫,模擬地理信息的實(shí)時(shí)動(dòng)態(tài),實(shí)現(xiàn)路徑跟蹤、洪峰監(jiān)視與預(yù)警等諸多功能。

        下面針對(duì)傳統(tǒng)流程圖繪制存在的問題,我們應(yīng)用SVG技術(shù)實(shí)現(xiàn)了以下功能:

        (1)任意放縮。用戶對(duì)圖像可以做拉伸、縮放等調(diào)整,調(diào)整過程不會(huì)對(duì)圖像的清晰度、細(xì)節(jié)等產(chǎn)生任何影響。

        (2)文件小。SVG文件和GIF和JPEG等格式的文件相比較,占用空間小,方便下載和存儲(chǔ)。

        (3)文本可任意編輯。SVG圖像中的文字是完全獨(dú)立的,可以對(duì)文字進(jìn)行編輯或搜尋。

        (4)可以直接在HTML嵌入SVG代碼。SVG文件可通過以下標(biāo)簽嵌入HTML文檔:或者