📄 2004469.htm
字号:
<html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>UML软件工程组织</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
<body>
<table width="760" height="38" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="129" align="center"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="100" height="71">
<param name="movie" value="../images/logo.swf">
<param name="quality" value="high">
<embed src="logo-1.swf" tppabs="http://www.uml.org.cn/images/logo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="71"></embed></object></td>
<td width="631"><B><FONT color=#008080
size=6>UML</FONT><FONT color=#008080><FONT face=方正姚体 color=#008080
size=6>软件工程</FONT><FONT face=方正姚体 size=6>组织</FONT></FONT></B> <table width="50%" border="0" align="right" cellpadding="0" cellspacing="1">
<tr>
<td class="content"><div align="center" class="content"><a href="javascript:if(confirm('http://www.uml.net.cn/ \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?'))window.location='http://www.uml.net.cn/'" tppabs="http://www.uml.net.cn/" target="_blank" class="content_a">北京火龙果软件工程技术中心</a></div></td>
</tr>
</table></td>
</tr>
</table>
<hr width="760" size="1" noshade>
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="56" align="center" valign="middle" class="title"> <B>SVG与UML图</B></td>
</tr>
<tr>
<td height="40" align="center" class="formtitle">车皓阳 (grandiose11@msn.com)
中科院软件所 张治 (uphenix@hotmail.com)上海交通大学图像处理与模式识别研究所</td>
</tr>
</table>
<table width="72" height="" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="" class="content" width="1149">2004 年 4 月</FONT>
<BLOCKQUOTE>SVG是W3C的一种图形矢量标准，与Flash相似，它们都可以在网上快速加载矢量图。虽然目前SVG还没有Flash那么好的可用性，但其基于XML，倒是先天优势，有继续发展成为主流的可能性。在网上使用SVG技术显示UML图，不仅可以在浏览器内无失真地对对象执行缩放和平移等操作，还可以利用Xlink、XPointer等XML技术将大图分解，化简为小图浏览，甚至结合后台数据库直接存取元数据信息，并将结果动态地绘制为UML图，在网上显示出来。SVG强大的事件及脚本功能，也使得UML图具有更强的交互性和更为丰富的表达能力。本文在粗略介绍SVG和UML两种技术的基础上，描述了使用SVG绘制UML图形的过程中会用到的一些技术以及相关工具，UML图可以从不同的角度出发划分为一系列标准组件元素，利用它们基本上就可以无障碍地构建各种UML图。</FONT></BLOCKQUOTE>
<P>SVG是W3C的一种图形矢量标准，与Flash相似，它们都可以在网上快速加载矢量图。虽然目前SVG还没有Flash那么好的可用性，但其基于XML，倒是先天优势，有继续发展成为主流的可能性。在网上使用SVG技术显示UML图，不仅可以在浏览器内无失真地对对象执行缩放和平移等操作，还可以利用Xlink、XPointer等XML技术将大图分解，化简为小图浏览，甚至结合后台数据库直接存取元数据信息，并将结果动态地绘制为UML图，在网上显示出来。SVG强大的事件及脚本功能，也使得UML图具有更强的交互性和更为丰富的表达能力。本文在粗略介绍SVG和UML两种技术的基础上，描述了使用SVG绘制UML图形的过程中会用到的一些技术以及相关工具，UML图可以从不同的角度出发划分为一系列标准组件元素，利用它们基本上就可以无障碍地构建各种UML图。
</FONT></P>
<P><A name=1><SPAN class=atitle2>一、SVG</FONT></SPAN></A><BR>
可缩放矢量图形（SVG）是W3C的推荐标准，它使用XML描述两维图形结构和图形应用，可以在Web浏览器、手持设备或移动电话等多种上显示。目前稳定版本为1.1版，最新的版本是以草案形式存在的1.2版，并未最终定稿。
</FONT></P>
<P>在SVG中，允许三种图像对象存在，分别是矢量图像、点阵图像和文本。SVG定义了六种常用的基本矢量形状，包括直线、圆形、椭圆形、矩形、多边形和折线，在此基础上，利用坐标变换、路径、动画、滤镜图案等功能扩展，通过多层次组合矢量、点阵以及文本图，并配以各种属性，进行矢量绘图。
</FONT></P>
<P>经过一段时期的发展，SVG的业务领域慢慢也已拓展开来，涵盖Web图表、地图、框图、流程图、项目计划图等多种类别。构建各个领域中的基本元件库也成为迫切需求，一些开源项目正以此为目标，提供可重用、基于SVG的元件库。UML图可以明确地按照种类划分，针对不同的种类，提出基本组件，再结合SVG固有的功能，就可以很容易地使用SVG创建出多种UML应用。
</FONT></P>
<P>SVG的语法非常简单，设计人员一般在一天之内就会熟悉，IBM Developerworks中也有SVG的专题讨论，这里也就不再赘述了。
</FONT></P>
<P><A name=2><SPAN class=atitle2>二、UML图</FONT></SPAN></A><BR>
UML是目前最常用的一种面向对象建模语言，主要包括七种常见的类型，即用例图、类图、序列图、状态图、活动图、组件图和部署图，分别用以不同的建模用途。
</FONT></P>
<UL>
<LI>类图，类图可以将一组类、界面、合作以及上述元素之间的关系显示出来，通常分为逻辑类和实现类。 </FONT>
<LI>组件图，以可视化方式提供系统的物理视图，显示系统中组件的依赖关系。 </FONT>
<LI>部署图，显示系统如何物理部署到硬件环境之中，是节点和连线的集合。上面三种UML图都是对系统静态特征进行建模，下面的四种描述系统动态特征。
</FONT>
<LI>用例图，描述系统的功能单元，它以图形化的方式表示系统内部的用例，系统外部的参考者，以及它们之间的交互。 </FONT>
<LI>序列图，强调时间顺序，显示特定用例的详细流程。顺序图有两维：垂直方向是以时间顺序显示消息/调用序列，水平方向显示消息发送到的对象实例。
</FONT>
<LI>状态图，描述系统动态特征，包括状态、转换、事件以及活动等。 </FONT>
<LI>活动图，描述系统在处理某项活动时，两个或多个对象之间的过活动流程。 </FONT></LI>
</UL>
<P>UML中还包含其它一些图，例如对象图、包图、组合图等，以及演化出的一些新的概念，如模板(Stereotypes)、职责
(Responsibilities)、扩展机制(Extensibility mechanisms)、线程(Threads)、过程(Processes)、分布
式(Distribution)、并发(Concurrency)、模式(Patterns)等，是否使用要依据建模过程中系统的层次、分类和大小等具体情况而定。诚然，对于个体来说，我们并不会用到所有的符号，但一个完整的UML建模工具却是要尽可能详尽地考虑到UML中丰富的符号语法和语义信息。在这里，我们无法描述清楚使用SVG绘制每种UML符号的方法，我们要关注的是UML基本符号元件的划分以及使用SVG绘制UML图的一些常用方法和便利之处。
</FONT></P>
<P><A name=3><SPAN class=atitle2>三、UML基本元件</FONT></SPAN></A><BR>
上面是按照功能对UML图形进行的分类，绘制UML图形时，我们的视图并不是功能视图，而是功能视图之上的元件视图。类图和用例图在功能上是不同的，但从SVG的角度看，它们都由方框、线条以及文字组成。不同类型的UML图都会有专属的绘图元件。在抽象级别较高的情况下（方框、线条、文字的抽象级别最高），同属一类UML图形的元件集合就会非常小；抽象级别越低，集合就会越大。但是太低层次的抽象却是无意义的（最低的情况是每个UML图都可看成一个元件，这是最具体的），关键是如何找到一个折衷点，既能保证有着元件集较小，又能方便绘图。SVG提供的基本绘图功能本来也是可以进行UML绘图的，但是这样做效率会比较低。建立起基本的UML图形元件库，会大大提高绘图质量和速度。现有的UML建模工具中，都有比较清晰的UML建模元件分类。我们这里以Visio
Professional 2002为例，看一下UML模型图的元件分类情况。 </FONT></P>
<P>在Visio的软件模具里，包括数据流模型图、程序结构图、ROOM、Jackson图和UML模型图等。Visio中UML图的功能分类比上述常用分类要多出两项，包图和静态结构图。包图是表达系统架构的有效机制，它可以用来将系统划分为较小的、易于管理的子集，它可以由任何一种UML图组成。静态结构图包括概念图和类图，概念图代表现实世界中的概念以及概念之间的关系，它侧重于关系和属性，而不是方法。
</FONT></P>
<P>图一是Visio按照功能分类方法划分的UML图的基本元件。可以看出，这种分类方法是有很多重叠的，例如，包在用例图等四种UML图中都被看成基本元件。但这样做，在分类清晰的基础上，可以提高用户访问模板元件的速度；忽视UML功能分类，完全访问集合要包含一百个左右的成员，访问元件的效率可能会较低。
</FONT></P>
<P>或者，我们也可以结合这种按照功能进行分类的方法，根据视觉特征将UML基本元件分组，然后在每种视觉特征分组下，再按照功能进行分组。使用SVG绘制UML图形，这有可能会是一种较好的分类复用的方法。这样我们不仅可以保证用户快速地访问到UML元件，而且在基于SVG的建模工具内部也易于管理。例如，我们可以进行这样的分类：
</FONT></P>
<UL>
<LI>人形元件，表示用例图中的主角； </FONT>
<LI>椭圆形元件，也即用例图中的用例； </FONT>
<LI>折角元件，包括注释和约束； </FONT>
<LI>包元件（包括包和子系统）、节点元件（立方体形状）和组件元件； </FONT>
<LI>抽屉类矩形元件，这一组元件有许多变体，不同之处在于顶端标注缺省文字间以及格层数会有差异，包含长式和短式两种格式；
</FONT>
<LI>圆形元件，包括"初始状态"、"最终状态"、"详细历史"及"简略历史"； </FONT>
<LI>圆角矩形类元件和菱形元件； </FONT>
<LI>带有各类箭头的直线类，包括实线、虚线； </FONT>
<LI>带有各类箭头的曲线类，包括实曲线和虚曲线； </FONT>
<LI>其它一些少数特殊形状元件； </FONT></LI>
</UL>
<P align=center><IMG src="20044691.jpg" tppabs="http://www.uml.org.cn/images/upfile/20044691.jpg"></FONT></P>
<P align=center>图一 Visio中的UML图形元件</FONT></P>
<P>初看起来，可能会觉得这种分类有些杂乱，但这样的分类却是从SVG角度出发对UML图元做出的分类，适合SVG建模软件底层存储。例如，包元件的SVG模板代码如下：
</FONT></P>
<P>
<TABLE cellSpacing=0 cellPadding=5 width="680" bgColor=#cccccc border=1>
<TBODY>
<TR>
<TD width="686" class="content">
<PRE><CODE>
<svg xmlns="http://www.w3.org/2000/svg" width="168" height="128">
<line x1="15" y1="114" x2="154" y2="114" style="fill:#1a1a1a; stroke:#1a1a1a; stroke-width:1"/>
<line x1="154" y1="35" x2="154" y2="113" style="fill:#1a1a1a; stroke:#1a1a1a; stroke-width:1"/>
<line x1="104" y1="15" x2="104" y2="53" style="fill:#1a1a1a; stroke:#1a1a1a; stroke-width:1"/>
<rect x="14" y="14" width="90" height="21" style="fill:#ffffff; stroke:#ffffff; stroke-width:1"/>
<rect x="14" y="14" width="89" height="20" style="fill:#ffffff; stroke:#000000; stroke-width:1"/>
<rect x="14" y="34" width="140" height="80" style="fill:#ffffff; stroke:#ffffff; stroke-width:1"/>
<rect x="14" y="34" width="139" height="79" style="fill:#ffffff; stroke:#000000; stroke-width:1"/>
</svg>
</FONT></CODE></PRE></TD>
</TR>
</TBODY>
</TABLE>
<P align=center><IMG src="20044692.jpg" tppabs="http://www.uml.org.cn/images/upfile/20044692.jpg"></FONT></P>
<P align=center>图二 SVG绘制的包模板元件</FONT></P>
<P>上面这些语句，可以作为包模板元件的SVG源码进行存储，这时尺寸相关的属性值设置仅表示比例关系。使用模板元件时，各部分尺寸依据存储时的缺省值按照比例进行放大或缩小，其余属性值则不涉及运算，直接把新值替代缺省值即可。未出现的模板中的属性在使用过程中可以自行加入。
</FONT></P>
<P><A name=4><SPAN class=atitle2>四、使用SVG绘制UML图的一些技术</FONT></SPAN></A><BR>
SVG是一种基于XML、数据驱动的网络绘图标准。可以结合XHTML作为一个文件单独使用，例如： </FONT></P>
<P>
<TABLE cellSpacing=0 cellPadding=5 width="671" bgColor=#cccccc border=1>
<TBODY>
<TR>
<TD width="657" class="content">
<PRE><CODE>
<?xml version="1.0" encoding="iso-8859-1"?> ...
<svg width="800" height="600">
<circle cx="200" cy="200" r="100"/>
</svg>
</FONT></CODE></PRE></TD>
</TR>
</TBODY>
</TABLE>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -