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

        ?

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

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

        張瑩

        1 引言

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

        2 SVG技術簡介

        2.1 SVG概述

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

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

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

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

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

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

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

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

        2.3 SVG編輯圖形

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

        圖1 SVG編輯圖形流程

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

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

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

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

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

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

        (2)電子表格做成位圖圖像進行展示的缺點是,圖形文件普遍較大,存儲時會占用大量的網(wǎng)絡帶寬,會拖慢整個程序的進程。

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

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

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

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

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

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

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

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

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

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