SVG矢量图形编辑器的设计与实现

２．３．３数据链表结构 本系统的数据管理模块中定义了系统的数据链表结构， 其构成有图形对象链表、选择链表、图层链表。各个链表中 的每一个节点都是上述图形类的一个对象，并对应系统编 辑窗口子ＤＯＭ树中的一个节点对象。系统中每生成一个图形 对象时，就把该对象添加到图形对象链表中．链表中包含对 象的序号、对象的ＩＤ及元素类型，然后根据其元素类型在 Ｄ叫树中添加相应的ｓｖＧ图形节点并设置节点的ＩＤ属性 值。当对某一图形对象进行编辑操作时，首先要拾取图形对 象，然后将其在图形对象链表中的信息拷贝到选择链表中， 以便根据选择链表中的图形对象进行用户所要进行的操 作。图层链表是对图层的记录，链表中包含图层的序号、图 层名，其在ＤＯＭ树中对应的ｓｖＧ文档的＜ｇ）元素对象。
２．３．２ 图形对象的描述模型 本系统中图形代表着用户在实际应用中的具体图形组 合，是矢量图形编辑系统中最为关键的对象，因此图形信息 的描述模型是图形编辑系统的重要部分。一个完备的图形 描述模型应该满足以下要求ｔ（１）能够充分地表达图形的几 何形状｛能够方便地定义图形的属性。且易于扩充；（２）能够 方便地定义图形与外界的交互功能；（３）能够对图形的几何 形状和属性进行存取和显示。所以说，图形在ｓＶＧ中的表示 必须既包含几何形状的信息．又包含属性信息。根据这些要 求．图形可以用ＢＮＦ描述表示如下ｍ，
作者： 作者单位： 刊名：
英文刊名： 年，卷(期)： 引用次数：
森干， 孙静， Sen Gan， Sun Jing 新疆医科大学医学工程技术学院,新疆,乌鲁木齐,830054
电脑与电信 COMPUTER & TELECOMMUNICATION 2007，(11) 0次
参考文献(6条)
1.侯宇.李素有 基于XML的SVG技术及其应用[期刊论文]-计算机应用研究 2002(5)
一７０—
万方数据
ｆｎｏｄｉ最ｃｇｔｉ∞，ｚ咖，捌咖ａｎｄ∞ｍ．ｎ ａｌ∞ｏ慨ｔｈｅｌ叫盯ｔｏ出ｔ０∞ｔｅ，ｍｏｄ母姐ｄ血Ｉｅｋ也ｅｌａｙ盯∞也ｅ ｇｒ印ｌｌｉｃ砒ｄｉ断吼 ｄｉ叫ａｙ眦ｄ删啪鲫锄ｔ ｓｌｙＩｅ．ｎｃ硝ｃ缸ｃｈ ｏｆｗｅｂＧＩｓ蚋，Ｈｃ娟∞ｉｓ ａ１８０埘ｃｄ ｔｏ ｍｃｃｔ ｔｂｃ ｒ叩ｉ删ｎｅｍ ｏｆｔｈｅ锄ａｌｌ ＧＩｓ·
［关键宇］网络矢量图形；ｘＭＬ；ＳｖＧ；ＤｏＭ；解析
１．引言 ｓＶＧ（ｓｃａｌａｂｌｅ Ｖｅｃｔｏｒ Ｇｒａｐｈｉｃｓ）是由ｗ３ｃ制定的基于 Ⅺｎ的可扩展二维矢量图形格式．其基于ｘｌ也的语法和结构 使得它具有先天的优势，与当前已有的和未来将有的其他 ）叫。应用之间存在着天然的交融，因此正被逐渐用于％ｂ上 的图形数据开放式发布，具有广泛的应用前景㈣】。本课题在 深入钻研ｓｖＧ矢量图形规范以及与ｓｖＧ操作相关技术的基 础上，实现了一个基于ｓｖ６矢量图形标准、且基于ｗｅｂ的 ｓＶＧ文件可视化人机交互绘制和编辑工具，通过所见即所得 的方法，简单快捷地生成所需的矢量图形。 ２．矢量图形编辑系统结构 矢量图形编辑系统采用面向对象的构建方法．首先，将 各种基本图元视为一个对象，如直线、折线、圆，圆弧、椭圆、 Ｂｃ五盯曲线、文本等；然后，可将所需的一些基本图形对象进 行组合定义为图元对象．并将各种图元进行分类组织，形成 图元库。在绘制图形时，可以将图元库的各种图元和基本图 形进行组合，从而提高生成图形的效率和可重用性。图形绘 制完成后．可以设置图形中图元的各类几何与非几何属性。 矢量图形编辑系统基于ｓｖＧ文件格式，因此，生成的 ＳＶＧ图形文件经过ｓｖＧ ｖｉｅＨ啊解析后可以在浏览器中发 布。应用程序或脚本利用）０皿，的ＤＯＭ接口，可以对ｓｖＧ 文件的内容进行存取与编辑，并可通过编辑ｓｖＧ元素的属 性信息ｔ实时地修改ｓｖＧ图象中图元的几何属性或非几何 属性。本系统的体系结构如图Ｉ所示。
作者信息：森干，★，新疆伊犁尼勒科县人．助教，工学硕士．主要研究方向：计算机应用、图形图像。
万方数据
一６９—
目ｌ珊
向对象方法设计图形编辑系统的基础．它可以使用一个四 元组表示为：ｏＮ＜ＧＮ，Ｄｓ，ＡＰ＞。其中，０Ｎ（０ｂｊｅｃｔ Ｎ蛳ｅ）是图形 对象的名字；ＧＮ（Ｇｒ即ｈ Ｎａ呻）是图形类的名字；Ｄｓ（ＤａｔＢ
３．１ 图形对象分组技术的实现 在ｓｖＧ文档中，通过＜ｇ＞元素可以把任意图形编成一 组，并可以通过程序对同一组元素进行操作。图形分组类似 于图形的分类和分层，对于按照同种形式表现和管理的图形 对象来说．ｓｖＧ的分组对象具有很大的实际意义．利用分组技 术，将能够实现复杂对象的多视角简单表现。 例如，对于地图可以按照省图，地市图．县级图等类似的 分类方式分组，形成图彤组，无论在显示及编辑上都能给用 户带来极大的方便。本系统中，采用ｓｖＧ基于ｘ札的Ｄ侧文 档管理结构，通过对编辑窗口子ＤＯＭ树中＜ｇ＞对象节点的操 作，完成对图形分组的处理。如：通过＜ｇ＞节点中的 ｃｈｉｌｄＮｏｄｅｓ属性可以获取所有子节点的集合，通过 ｇｅｔＥｌｅ脯ｎｔｓＢｙＴａｇＮ锄ｅ（）方法可以获取某种类型对象的列 表，如要获取某组＜ｇ）下的所有路径＜ｐａｔｈ＞对象的集合，就 可以调用ｇｅｔＥｌｅ眦ｎｔｓＢｙＴａｇＮ硼ｅ（’ｐａｔｈ４）。 ３．２ 图形组的编辑实现 图形组的编辑可以通过设置该图形组对应Ｅｇ＞对象的 属性，实现如可见性，颜色、透明度等设置以及选中、删除等 操作。ｓｖＧ中的对象的样式属性具有继承性，如果下～级没 有某样式属性，则直接使用其上一级的属性。以此类推．直到 顶级为止。如：对某图形组设置其显示透明度，则该图形组的 下级元素显示时，均采用该透明度。除非其下级元素指定了 透明度属性。因此．对于图形组的编辑我们是采用属性的继 承性来实现的。 下面以图形组的可见性为例说明对图形组的编辑。图形 组的可见性是通过程序对其＜ｇ＞对象的’ｖｉｓｉｂｉｌｉｔｙ’属性 的更改来实现的，当设置为’ｖｉｓｉｂｌｅ’时是可见，’ｈｉｄｄｅ∥ 时为不可见。根据对象样式属性的继承性，包含在图形组中 的各个对象都将继承＜ｇ）对象的属性设置．从而可以’垃置某 个图形组的整体显示与否。
本页已使用福昕阅读器进行编辑。 福昕软件（Ｃ）２００５－２００８，版权所有， 仅供试用。
ＳＶＧ矢量图形编辑器的
森干孙静
（新疆医科大学医学工程技术学院，新疆
［摘要】本课题将基于ｓｖＧ这一新的矢量图形标准，实现一种能够 对象进行平移、修改、缩放、删除等操作，井提供了图层工具，对于按照不同 笔者尝试进行了ｗ曲ＧＩｓ方面的应用开发，使本系统能够满足小型地理信
２，２ ｓｖ６文件编辑 编辑系统功能模块主要由图形绘制模块、图形编辑模 块、图层操作模块、工具管理模块组成，是整个系统的核心模 块。首先，它完成基本图形对象和图元对象的编辑工作，如图 形对象的选择、移动、缩放、旋转、删除、组合等，还包括设置 图元的应用属性数据。其次，还要保证数据管理模块和数据 解析模块的数据交换，它既能调用数据解析模块打开ｓｖＧ 文件，生成相应的图形对象，把其加入到数据管理模块的图 形链表中．也可以将数据管理模块的图形链表中的图形对象 解析为相应的标签，生成ｓｖＯ文件，从而协调两个模块的工 作。 ２．３系统数据模型 ２．３．１ 图形对象的类结构 矢量图形编辑系统对图形类的基本要求有：（１）一个图 形类必须能够完全描述一个基本图形元素，即包含有描述这 种图形的所有属性参数；（２）能够接受用户对图形的编辑消 息，能够实现所有对图形的编辑功能，如对自身属性的修改 等；（３）具有将自身所描述的图形记录到ｓｖＧ文件的功能。 根据以上要求在本系统中．图形对象的类结构可用下列集合 表达式表达ｑ： 总类＝ｆ文本类，图形类｝； 图形类；ｆ基本图形类，组合图形类。图元类｝； 基本图形类＝｛直线，矩形，圆，椭圆，…｝ 组合图形类＝ｆ子图类，合图类｝ 图元类＝｛图元类．属性类｝； 属性类＝ｆ色彩，线型，填充方式，…｝ 图形对象是本系统数据结构中最基本的对象，是使用面
恤ｔ ｎｌｅ ｐｒｉ∞ｉｓ ｃｂｅａｐ
ｏｆ ｍａｉｎ伍ｃｔｏｒ·
ｔｏ ｐ咖帕ｔｃ ｃｂｉｎ雠ｍｌⅨｔｏ ｄｅｃ嘴ｓ鼯“ｍⅨ酬叩ｍｅ址ｌ嘶ｅ妒啪ｄｊｎｄ如ｉｌ．
【丘昭－Ⅲ●】Ｌｉｎｕｘ；ｐｒｌ踟ｌ∞ｎｄｊ石∞；缸ｎ聃
万方数据
一７１
SVG矢量图形编辑器的设计与实现
、４．结束语
ｗｅｂ环境下的矢量图形技术的应用前景是勿庸置疑的， 本课题所开发的矢量图形编辑系统提供了对于胃ｅｂ图形的 基本交互功能支持，实现了ｓｖＧ图形文件的可视化人机交互 绘制和编辑，通过加入行业图元系统可以方便的被移植到不 同的应用中。课题所进行的ｗｅｂＧＩｓ方面的应用开发，使得 本系统能够满足一些诸如学校、工厂、供水供电、房产平面 表现之类的小型地理信息系统的应用需求。
锄ｌｙ猫Ｌｉ眦ｃｈａＩａａｃｎｋｄｒ咖ｉ疏柚ｓ．ｄ∞既饥ｉ蛐．ｍｍ，蜘岫蛐岫湍口№ｄｕｉ粥Ⅱｂ血ｗ ｃｌ删啪咎ｃｉＩｃＩｌｍｓ№蜊６Ｉｓｔ 【柚—ｈ一】１ｋ ｍ雠ｉｓ蚰ｅ虹ｌｄ ｏｆ也ｅ ｕｌｌｉｘ ｏｐｅ咖ｉｎｇ ｓｙ啦ｍ廿ｌａｔ缸ｏｐｅ略洲１ｆ钟ｃｏｄｅ∞呷ｌ武ｅｌｙ－Ｔｈｅ ｂｉ黯ｅｓｃ ｃｈａｍｃｃｅｒｉｓｔｉｃｓ ｉｓ
＜图形＞：：＝＜几何信息＞【＜属性定义×交互事件定义＞】； ＜几何信息＞：：贰基本图形＞【｛＜基本图彤＞｝】； ＜基本图形＞：：《图形类型×坐标位置＞；
＜属性定义＞：：＝＜属性＞［｛＜属性＞）】； ＜属性＞：．－ｆ＜属性名）。（属性值＞ｌ； ＜交互事件定义＞：：《交互事件＞【｛＜交互事件＞｝】． ＜交互事件＞：：＝｛＜事件名＞皇（响应函数＞｝。
３．系统实现
本系统中实现各个具体功能的方法是：在相应的ｓｖＧ元 素中说明鼠标事件，并将一段脚本连接到事件处理器上。当 鼠标事件发生时。触发相应的一段脚本程序，通过ＤＯＩｌ接口， 对对象进行添加、修改、删除等操作，来实现图形绘制、编 辑、存储等所需功能。矢量图形编辑系统的界面均为基于 ｓｖＧ的数据表现，并是具备丰富交互能力的矢量图形处理客 户端．系统通过ＪａｖＢＳｃｒｉｐｔ对ＤＯＨ编程实现了丰富的交互 操作、系统功能和效果．
ｓｅｔ）是图形对象的图形数据集；ＡＰ（＾ｔ”ｉｂｕｔｅ Ｐａｒ咖ｔｅｒ）
是图形对象的属性参数。在本系统中，图形对象的名称是在 交互式地选定了作圈功能时被确定的，命名规则为一对象类 型缩写＋流水号。图形类的名字是产生该图形对象的ｓｖＧ元 素名。图形数据集是在图形生成过程中被确定的，规则是该 图形在图形数据链中的位置参数及流水号。属性参数是由 图形类的ｓｖＧ元素决定的，根据不同的图形类其属性参数也 不同。
由此可见，图元的ＳｖＧ表示可由几何形状、应用属性和 交互事件组成。图形的几何形状可以表示为本系统中提供 的７种基本图形类型或是基本图形类型的组合。图形的属 性信息可以在本系统提供的属性栏进行设置。ｓｖ６中定义了 大量的标准事件支持图形与脚本语言的交互功能。交互事 件的定义只需要定义一个事件响应函数，并建立它与图形 事件名之间的映射关系即可。
【ｋ柳啊出】ｗｅｂ ｖｅｃｔｏｒ ｇｒａｐ“ｃ；）０旺；ＳＶ０；ＤＯＭ；Ｐａ嫩
（上接第鹋页）
【４】看生，云燕．ｕ卜兀Ｊｘ发展的新模式Ｉ耵． 中国信息报，２００２，ｌＯ（４）．
Ｔｈｅ Ｐｒｅｓｅｎｔ ＣｏｎｄｉｔｉｏⅡａｎｄ血ｅ ＦｕｔＬｌｒｅ ｏｆＬｉ叽ｘ Ｏｐｅｍｔｉｎｇ Ｓｙｓｔｅｍ
（Ｎ０ｒ｜腑ｕｎｉｖ哪嘶ｗ札ｈＮ“ｇ啦Ｙ虹陆矗慨，ｇＬａ№ｎｚｈＮ０堍．１ ７３∞３０，Ｇ删）
2.Apache Batik SVG Toolkit 2004
3.甘早斌.李志欣.彭彬 基于SVG的矢量图形编辑系统的数据描述模型[期刊论文]-计算机工程与设计 2005(1) 4.陈传波.吴方文 基于SVG的图元对象描述模型的研究[期刊论文]-华中科技大学学报(自然科学版) 2002(10) 5.宋善德.熊展志.李卫国.唐咸峰 基于SVG的矢量图形编辑器的设计与实现[期刊论文]-计算机工程与科学 2003(2) 6.李广丽.张红斌 基于Jscript脚本技术的SVG文档的DOM解析[期刊论文]-计算机与现代化 2005(4)
图１ 矢量图形编辑系统体系结构囝
２．１
在本系统中，数据解析模块主要完成ｓｖＧ图形文件的 存储和读取。由于ｓｖＧ文件是基于文本格式的，所以必须对 它进行解析，生成具体的对象存储在数据管理模块中；当文 件修改完毕后，再以ｓｖＧ格式保存。数据管理模块主要用来 管理整个被编辑图形的数据，该模块定义了一些数据结构， 如图形链表、选择链表、图层链表等，并在此基础上提供大量 的方法加以维护。