学习笔记 SVG与UML图详解

dansan 2010-07-06

本文和大家重点学习一下SVG与UML图详解,可缩放矢量图形(SVG)是W3C的推荐标准,它使用XML描述两维图形结构和图形应用,可以在Web浏览器、手持设备或移动电话等多种上显示。而UML是统一建模语言,它共有九种UML图。

SVG与UML图详解

一、SVG

可缩放矢量图形(SVG)是W3C的推荐标准,它使用XML描述两维图形结构和图形应用,可以在Web浏览器、手持设备或移动电话等多种上显示。目前稳定版本为1.1版,最新的版本是以草案形式存在的1.2版,并未最终定稿。

在SVG中,允许三种图像对象存在,分别是矢量图像、点阵图像和文本。SVG定义了六种常用的基本矢量形状,包括直线、圆形、椭圆形、矩形、多边形和折线,在此基础上,利用坐标变换、路径、动画、滤镜图案等功能扩展,通过多层次组合矢量、点阵以及文本图,并配以各种属性,进行矢量绘图。

经过一段时期的发展,SVG的业务领域慢慢也已拓展开来,涵盖Web图表、地图、框图、流程图、项目计划图等多种类别。构建各个领域中的基本元件库也成为迫切需求,一些开源项目正以此为目标,提供可重用、基于SVG的元件库。UML图可以明确地按照种类划分,针对不同的种类,提出基本组件,再结合SVG固有的功能,就可以很容易地使用SVG创建出多种UML应用。
SVG的语法非常简单,设计人员一般在一天之内就会熟悉,IBMDeveloperworks中也有SVG的专题讨论,这里也就不再赘述了。

二、UML图详解

UML是目前最常用的一种面向对象建模语言,主要包括七种常见的类型,即用例图、类图、序列图、状态图、活动图、组件图和部署图,分别用以不同的建模用途。
◆类图,类图可以将一组类、界面、合作以及上述元素之间的关系显示出来,通常分为逻辑类和实现类。
◆组件图,以可视化方式提供系统的物理视图,显示系统中组件的依赖关系。
◆部署图,显示系统如何物理部署到硬件环境之中,是节点和连线的集合。上面三种UML图都是对系统静态特征进行建模,下面的四种描述系统动态特征。
◆用例图,描述系统的功能单元,它以图形化的方式表示系统内部的用例,系统外部的参考者,以及它们之间的交互。
◆序列图,强调时间顺序,显示特定用例的详细流程。顺序图有两维:垂直方向是以时间顺序显示消息/调用序列,水平方向显示消息发送到的对象实例。
◆状态图,描述系统动态特征,包括状态、转换、事件以及活动等。
◆活动图,描述系统在处理某项活动时,两个或多个对象之间的过活动流程。

UML中还包含其它一些图,例如对象图、包图、组合图等,以及演化出的一些新的概念,如模板(Stereotypes)、职责(Responsibilities)、扩展机制(Extensibilitymechanisms)、线程(Threads)、过程(Processes)、分布式(Distribution)、并发(Concurrency)、模式(Patterns)等,是否使用要依据建模过程中系统的层次、分类和大小等具体情况而定。诚然,对于个体来说,我们并不会用到所有的符号,但一个完整的UML建模工具却是要尽可能详尽地考虑到UML中丰富的符号语法和语义信息。在这里,我们无法描述清楚使用SVG绘制每种UML符号的方法,我们要关注的是UML基本符号元件的划分以及使用SVG绘制UML图的一些常用方法和便利之处。

三、从基本元件看UML图详解

上面是按照功能对UML图形进行的分类,绘制UML图形时,我们的视图并不是功能视图,而是功能视图之上的元件视图。类图和用例图在功能上是不同的,但从SVG的角度看,它们都由方框、线条以及文字组成。不同类型的UML图都会有专属的绘图元件。在抽象级别较高的情况下(方框、线条、文字的抽象级别最高),同属一类UML图形的元件集合就会非常小;抽象级别越低,集合就会越大。但是太低层次的抽象却是无意义的(最低的情况是每个UML图都可看成一个元件,这是最具体的),关键是如何找到一个折衷点,既能保证有着元件集较小,又能方便绘图。SVG提供的基本绘图功能本来也是可以进行UML绘图的,但是这样做效率会比较低。建立起基本的UML图形元件库,会大大提高绘图质量和速度。现有的UML建模工具中,都有比较清晰的UML建模元件分类。我们这里以VisioProfessional2002为例,看一下UML模型图的元件分类情况。

在Visio的软件模具里,包括数据流模型图、程序结构图、ROOM、Jackson图和UML模型图等。Visio中UML图的功能分类比上述常用分类要多出两项,包图和静态结构图。包图是表达系统架构的有效机制,它可以用来将系统划分为较小的、易于管理的子集,它可以由任何一种UML图组成。静态结构图包括概念图和类图,概念图代表现实世界中的概念以及概念之间的关系,它侧重于关系和属性,而不是方法。

图一是Visio按照功能分类方法划分的UML图的基本元件。可以看出,这种分类方法是有很多重叠的,例如,包在用例图等四种UML图中都被看成基本元件。但这样做,在分类清晰的基础上,可以提高用户访问模板元件的速度;忽视UML功能分类,完全访问集合要包含一百个左右的成员,访问元件的效率可能会较低。
或者,我们也可以结合这种按照功能进行分类的方法,根据视觉特征将UML基本元件分组,然后在每种视觉特征分组下,再按照功能进行分组。使用SVG绘制UML图形,这有可能会是一种较好的分类复用的方法。这样我们不仅可以保证用户快速地访问到UML元件,而且在基于SVG的建模工具内部也易于管理。

例如,我们可以进行这样的分类:
◆人形元件,表示用例图中的主角;
◆椭圆形元件,也即用例图中的用例;
◆折角元件,包括注释和约束;
◆包元件(包括包和子系统)、节点元件(立方体形状)和组件元件;
◆抽屉类矩形元件,这一组元件有许多变体,不同之处在于顶端标注缺省文字间以及格层数会有差异,包含长式和短式两种格式;
◆圆形元件,包括"初始状态"、"最终状态"、"详细历史"及"简略历史";
◆圆角矩形类元件和菱形元件;
◆带有各类箭头的直线类,包括实线、虚线;
◆带有各类箭头的曲线类,包括实曲线和虚曲线;
◆其它一些少数特殊形状元件;

相关推荐

swimmer000 / 0评论 2020-05-29