學(xué)習(xí)筆記 SVG與UML圖詳解
本文和大家重點(diǎn)學(xué)習(xí)一下SVG與UML圖詳解，可縮放矢量圖形（SVG）是W3C的推薦標(biāo)準(zhǔn)，它使用XML描述兩維圖形結(jié)構(gòu)和圖形應(yīng)用，可以在Web瀏覽器、手持設(shè)備或移動(dòng)電話等多種上顯示。而UML是統(tǒng)一建模語言，它共有九種UML圖。
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)畫、濾鏡圖案等功能擴(kuò)展，通過多層次組合矢量、點(diǎn)陣以及文本圖，并配以各種屬性，進(jìn)行矢量繪圖。
經(jīng)過一段時(shí)期的發(fā)展，SVG的業(yè)務(wù)領(lǐng)域慢慢也已拓展開來，涵蓋Web圖表、地圖、框圖、流程圖、項(xiàng)目計(jì)劃圖等多種類別。構(gòu)建各個(gè)領(lǐng)域中的基本元件庫也成為迫切需求，一些開源項(xiàng)目正以此為目標(biāo)，提供可重用、基于SVG的元件庫。UML圖可以明確地按照種類劃分，針對(duì)不同的種類，提出基本組件，再結(jié)合SVG固有的功能，就可以很容易地使用SVG創(chuàng)建出多種UML應(yīng)用。
SVG的語法非常簡(jiǎn)單，設(shè)計(jì)人員一般在一天之內(nèi)就會(huì)熟悉，IBMDeveloperworks中也有SVG的專題討論，這里也就不再贅述了。
二、UML圖詳解
UML是目前最常用的一種面向?qū)ο蠼ＵZ言，主要包括七種常見的類型，即用例圖、類圖、序列圖、狀態(tài)圖、活動(dòng)圖、組件圖和部署圖，分別用以不同的建模用途。
◆類圖，類圖可以將一組類、界面、合作以及上述元素之間的關(guān)系顯示出來，通常分為邏輯類和實(shí)現(xiàn)類。
◆組件圖，以可視化方式提供系統(tǒng)的物理視圖，顯示系統(tǒng)中組件的依賴關(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ì)象之間的過活動(dòng)流程。
UML中還包含其它一些圖，例如對(duì)象圖、包圖、組合圖等，以及演化出的一些新的概念，如模板(Stereotypes)、職責(zé)(Responsibilities)、擴(kuò)展機(jī)制(Extensibilitymechanisms)、線程(Threads)、過程(Processes)、分布式(Distribution)、并發(fā)(Concurrency)、模式(Patterns)等，是否使用要依據(jù)建模過程中系統(tǒng)的層次、分類和大小等具體情況而定。誠然，對(duì)于個(gè)體來說，我們并不會(huì)用到所有的符號(hào)，但一個(gè)完整的UML建模工具卻是要盡可能詳盡地考慮到UML中豐富的符號(hào)語法和語義信息。在這里，我們無法描述清楚使用SVG繪制每種UML符號(hào)的方法，我們要關(guān)注的是UML基本符號(hào)元件的劃分以及使用SVG繪制UML圖的一些常用方法和便利之處。
三、從基本元件看UML圖詳解
上面是按照功能對(duì)UML圖形進(jìn)行的分類，繪制UML圖形時(shí)，我們的視圖并不是功能視圖，而是功能視圖之上的元件視圖。類圖和用例圖在功能上是不同的，但從SVG的角度看，它們都由方框、線條以及文字組成。不同類型的UML圖都會(huì)有專屬的繪圖元件。在抽象級(jí)別較高的情況下（方框、線條、文字的抽象級(jí)別***），同屬一類UML圖形的元件集合就會(huì)非常小；抽象級(jí)別越低，集合就會(huì)越大。但是太低層次的抽象卻是無意義的（***的情況是每個(gè)UML圖都可看成一個(gè)元件，這是***體的），關(guān)鍵是如何找到一個(gè)折衷點(diǎn)，既能保證有著元件集較小，又能方便繪圖。SVG提供的基本繪圖功能本來也是可以進(jìn)行UML繪圖的，但是這樣做效率會(huì)比較低。建立起基本的UML圖形元件庫，會(huì)大大提高繪圖質(zhì)量和速度。現(xiàn)有的UML建模工具中，都有比較清晰的UML建模元件分類。我們這里以VisioProfessional2002為例，看一下UML模型圖的元件分類情況。
在Visio的軟件模具里，包括數(shù)據(jù)流模型圖、程序結(jié)構(gòu)圖、ROOM、Jackson圖和UML模型圖等。Visio中UML圖的功能分類比上述常用分類要多出兩項(xiàng)，包圖和靜態(tài)結(jié)構(gòu)圖。包圖是表達(dá)系統(tǒng)架構(gòu)的有效機(jī)制，它可以用來將系統(tǒng)劃分為較小的、易于管理的子集，它可以由任何一種UML圖組成。靜態(tài)結(jié)構(gòu)圖包括概念圖和類圖，概念圖代表現(xiàn)實(shí)世界中的概念以及概念之間的關(guān)系，它側(cè)重于關(guān)系和屬性，而不是方法。
圖一是Visio按照功能分類方法劃分的UML圖的基本元件。可以看出，這種分類方法是有很多重疊的，例如，包在用例圖等四種UML圖中都被看成基本元件。但這樣做，在分類清晰的基礎(chǔ)上，可以提高用戶訪問模板元件的速度；忽視UML功能分類，完全訪問集合要包含一百個(gè)左右的成員，訪問元件的效率可能會(huì)較低。
或者，我們也可以結(jié)合這種按照功能進(jìn)行分類的方法，根據(jù)視覺特征將UML基本元件分組，然后在每種視覺特征分組下，再按照功能進(jìn)行分組。使用SVG繪制UML圖形，這有可能會(huì)是一種較好的分類復(fù)用的方法。這樣我們不僅可以保證用戶快速地訪問到UML元件，而且在基于SVG的建模工具內(nèi)部也易于管理。
例如，我們可以進(jìn)行這樣的分類：
◆人形元件，表示用例圖中的主角；
◆橢圓形元件，也即用例圖中的用例；
◆折角元件，包括注釋和約束；
◆包元件（包括包和子系統(tǒng)）、節(jié)點(diǎn)元件（立方體形狀）和組件元件；
◆抽屜類矩形元件，這一組元件有許多變體，不同之處在于頂端標(biāo)注缺省文字間以及格層數(shù)會(huì)有差異，包含長式和短式兩種格式；
◆圓形元件，包括"初始狀態(tài)"、"最終狀態(tài)"、"詳細(xì)歷史"及"簡(jiǎn)略歷史"；
◆圓角矩形類元件和菱形元件；
◆帶有各類箭頭的直線類，包括實(shí)線、虛線；
◆帶有各類箭頭的曲線類，包括實(shí)曲線和虛曲線；
◆其它一些少數(shù)特殊形狀元件；
圖一Visio中的UML圖形元件
【編輯推薦】
