SVG與UML圖的示例分析

這篇文章主要介紹了SVG與UML圖的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

SVG與UML圖詳解

一、SVG

可縮放矢量圖形（SVG）是W3C的推薦標(biāo)準(zhǔn)，它使用XML描述兩維圖形結(jié)構(gòu)和圖形應(yīng)用，可以在Web瀏覽器、手持設(shè)備或移動(dòng)電話等多種上顯示。目前穩(wěn)定版本為1.1版，***的版本是以草案形式存在的1.2版，并未最終定稿。

在SVG中，允許三種圖像對(duì)象存在，分別是矢量圖像、點(diǎn)陣圖像和文本。SVG定義了六種常用的基本矢量形狀，包括直線、圓形、橢圓形、矩形、多邊形和折線，在此基礎(chǔ)上，利用坐標(biāo)變換、路徑、動(dòng)畫(huà)、濾鏡圖案等功能擴(kuò)展，通過(guò)多層次組合矢量、點(diǎn)陣以及文本圖，并配以各種屬性，進(jìn)行矢量繪圖。

經(jīng)過(guò)一段時(shí)期的發(fā)展，SVG的業(yè)務(wù)領(lǐng)域慢慢也已拓展開(kāi)來(lái)，涵蓋Web圖表、地圖、框圖、流程圖、項(xiàng)目計(jì)劃圖等多種類(lèi)別。構(gòu)建各個(gè)領(lǐng)域中的基本元件庫(kù)也成為迫切需求，一些開(kāi)源項(xiàng)目正以此為目標(biāo)，提供可重用、基于SVG的元件庫(kù)。UML圖可以明確地按照種類(lèi)劃分，針對(duì)不同的種類(lèi)，提出基本組件，再結(jié)合SVG固有的功能，就可以很容易地使用SVG創(chuàng)建出多種UML應(yīng)用。
SVG的語(yǔ)法非常簡(jiǎn)單，設(shè)計(jì)人員一般在一天之內(nèi)就會(huì)熟悉，IBMDeveloperworks中也有SVG的專(zhuān)題討論，這里也就不再贅述了。

二、UML圖詳解

UML是目前最常用的一種面向?qū)ο蠼ＵZ(yǔ)言，主要包括七種常見(jiàn)的類(lèi)型，即用例圖、類(lèi)圖、序列圖、狀態(tài)圖、活動(dòng)圖、組件圖和部署圖，分別用以不同的建模用途。
◆類(lèi)圖，類(lèi)圖可以將一組類(lèi)、界面、合作以及上述元素之間的關(guān)系顯示出來(lái)，通常分為邏輯類(lèi)和實(shí)現(xiàn)類(lèi)。
◆組件圖，以可視化方式提供系統(tǒng)的物理視圖，顯示系統(tǒng)中組件的依賴(lài)關(guān)系。
◆部署圖，顯示系統(tǒng)如何物理部署到硬件環(huán)境之中，是節(jié)點(diǎn)和連線的集合。上面三種UML圖都是對(duì)系統(tǒng)靜態(tài)特征進(jìn)行建模，下面的四種描述系統(tǒng)動(dòng)態(tài)特征。
◆用例圖，描述系統(tǒng)的功能單元，它以圖形化的方式表示系統(tǒng)內(nèi)部的用例，系統(tǒng)外部的參考者，以及它們之間的交互。
◆序列圖，強(qiáng)調(diào)時(shí)間順序，顯示特定用例的詳細(xì)流程。順序圖有兩維：垂直方向是以時(shí)間順序顯示消息/調(diào)用序列，水平方向顯示消息發(fā)送到的對(duì)象實(shí)例。
◆狀態(tài)圖，描述系統(tǒng)動(dòng)態(tài)特征，包括狀態(tài)、轉(zhuǎn)換、事件以及活動(dòng)等。
◆活動(dòng)圖，描述系統(tǒng)在處理某項(xiàng)活動(dòng)時(shí)，兩個(gè)或多個(gè)對(duì)象之間的過(guò)活動(dòng)流程。

UML中還包含其它一些圖，例如對(duì)象圖、包圖、組合圖等，以及演化出的一些新的概念，如模板(Stereotypes)、職責(zé)(Responsibilities)、擴(kuò)展機(jī)制(Extensibilitymechanisms)、線程(Threads)、過(guò)程(Processes)、分布式(Distribution)、并發(fā)(Concurrency)、模式(Patterns)等，是否使用要依據(jù)建模過(guò)程中系統(tǒng)的層次、分類(lèi)和大小等具體情況而定。誠(chéng)然，對(duì)于個(gè)體來(lái)說(shuō)，我們并不會(huì)用到所有的符號(hào)，但一個(gè)完整的UML建模工具卻是要盡可能詳盡地考慮到UML中豐富的符號(hào)語(yǔ)法和語(yǔ)義信息。在這里，我們無(wú)法描述清楚使用SVG繪制每種UML符號(hào)的方法，我們要關(guān)注的是UML基本符號(hào)元件的劃分以及使用SVG繪制UML圖的一些常用方法和便利之處。

三、從基本元件看UML圖詳解

上面是按照功能對(duì)UML圖形進(jìn)行的分類(lèi)，繪制UML圖形時(shí)，我們的視圖并不是功能視圖，而是功能視圖之上的元件視圖。類(lèi)圖和用例圖在功能上是不同的，但從SVG的角度看，它們都由方框、線條以及文字組成。不同類(lèi)型的UML圖都會(huì)有專(zhuān)屬的繪圖元件。在抽象級(jí)別較高的情況下（方框、線條、文字的抽象級(jí)別***），同屬一類(lèi)UML圖形的元件集合就會(huì)非常?。怀橄蠹?jí)別越低，集合就會(huì)越大。但是太低層次的抽象卻是無(wú)意義的（***的情況是每個(gè)UML圖都可看成一個(gè)元件，這是***體的），關(guān)鍵是如何找到一個(gè)折衷點(diǎn)，既能保證有著元件集較小，又能方便繪圖。SVG提供的基本繪圖功能本來(lái)也是可以進(jìn)行UML繪圖的，但是這樣做效率會(huì)比較低。建立起基本的UML圖形元件庫(kù)，會(huì)大大提高繪圖質(zhì)量和速度?，F(xiàn)有的UML建模工具中，都有比較清晰的UML建模元件分類(lèi)。我們這里以VisioProfessional2002為例，看一下UML模型圖的元件分類(lèi)情況。

在Visio的軟件模具里，包括數(shù)據(jù)流模型圖、程序結(jié)構(gòu)圖、ROOM、Jackson圖和UML模型圖等。Visio中UML圖的功能分類(lèi)比上述常用分類(lèi)要多出兩項(xiàng)，包圖和靜態(tài)結(jié)構(gòu)圖。包圖是表達(dá)系統(tǒng)架構(gòu)的有效機(jī)制，它可以用來(lái)將系統(tǒng)劃分為較小的、易于管理的子集，它可以由任何一種UML圖組成。靜態(tài)結(jié)構(gòu)圖包括概念圖和類(lèi)圖，概念圖代表現(xiàn)實(shí)世界中的概念以及概念之間的關(guān)系，它側(cè)重于關(guān)系和屬性，而不是方法。

圖一是Visio按照功能分類(lèi)方法劃分的UML圖的基本元件?？梢钥闯?，這種分類(lèi)方法是有很多重疊的，例如，包在用例圖等四種UML圖中都被看成基本元件。但這樣做，在分類(lèi)清晰的基礎(chǔ)上，可以提高用戶(hù)訪問(wèn)模板元件的速度；忽視UML功能分類(lèi)，完全訪問(wèn)集合要包含一百個(gè)左右的成員，訪問(wèn)元件的效率可能會(huì)較低。
或者，我們也可以結(jié)合這種按照功能進(jìn)行分類(lèi)的方法，根據(jù)視覺(jué)特征將UML基本元件分組，然后在每種視覺(jué)特征分組下，再按照功能進(jìn)行分組。使用SVG繪制UML圖形，這有可能會(huì)是一種較好的分類(lèi)復(fù)用的方法。這樣我們不僅可以保證用戶(hù)快速地訪問(wèn)到UML元件，而且在基于SVG的建模工具內(nèi)部也易于管理。

例如，我們可以進(jìn)行這樣的分類(lèi)：
◆人形元件，表示用例圖中的主角；
◆橢圓形元件，也即用例圖中的用例；
◆折角元件，包括注釋和約束；
◆包元件（包括包和子系統(tǒng)）、節(jié)點(diǎn)元件（立方體形狀）和組件元件；
◆抽屜類(lèi)矩形元件，這一組元件有許多變體，不同之處在于頂端標(biāo)注缺省文字間以及格層數(shù)會(huì)有差異，包含長(zhǎng)式和短式兩種格式；
◆圓形元件，包括"初始狀態(tài)"、"最終狀態(tài)"、"詳細(xì)歷史"及"簡(jiǎn)略歷史"；
◆圓角矩形類(lèi)元件和菱形元件；
◆帶有各類(lèi)箭頭的直線類(lèi)，包括實(shí)線、虛線；
◆帶有各類(lèi)箭頭的曲線類(lèi)，包括實(shí)曲線和虛曲線；
◆其它一些少數(shù)特殊形狀元件；

圖一Visio中的UML圖形元件

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“SVG與UML圖的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!