（计算机应用技术专业论文）基于dom和svg+web图形编辑系统的研究与实现.pdf

华中科技大学硕士学位论文 摘要 s v g ( s c a l a b l ev e c t o rg r a p h i c s ，可升级矢量图像) 是由国际w w w 委员会 ( w 3 c ) 组织为适应i n t e m e tw e b 应用的飞速发展需要而制定的一套基于x m l 语 言的可缩放矢量图形语言描述规范。s v g 可在网页上显示出高质量的图形，集矢 量图形与x m l 优点于一身，既有矢量图形的图形文件简洁，图像品质高，可无级 缩放等优点，又继承了x m l 的跨平台性和可扩展性。 d o m ( d o c u m e n t o b j e c t m o d e l ，文档对象模型) 是由w 3 c 组织制定的个对 象化的x m l 数据接口，一个与语言无关、与平台无关的标准接口规范。它定义了 h t m l 和x m l 文档的逻辑结构以及存取和维护文档的方法。 由于s v g i 0 刚刚推出，目前的s v g 图形编辑工具还很有限。而“基于d o m 的s v g w e b 图形编辑系统”通过所见即所得的方式，为用户在浏览器上提供了一 个简单快捷的生成所需矢量图形的工具。该系统的设计结合了s v g 、d o m 标准： 首先依据s v g 规范编写界面；然后，利用x m l 语法解析器将它们解析成内存中 的一个对象树，同时在浏览器上动态生成编辑器；最后通过可视化编辑界面的鼠标 事件来驱动脚本执行，脚本通过d o m 接口对对象进行相关的操作，来实现图形绘 制、编辑、存储等所需功能。由于s v g 是文本格式，因此所有代码均可在文本编 辑器内完成。 该系统具有的突出特点是：平台无关、易于扩展、图形可重复编辑、丌发周期 短、维护方便、响应迅速等。系统还可以扩展不同行业的图元，以适应不同领域的 需要。这样，用户无需了解太多的计算机知识便可画出专业水准的图形；并可通过 与相应的数据库连接，达到在w e b 上动态反映实时信息的目的。大大简化了s v g 矢量图形绘制的难度，加快了实时信息动态发布的开发进程。，； 关键词：x m l ；s v g ：解析器；d o m ；矢量图形 华中科技大学硕士学位论文 a b s t l a c t s c a l a b l ev e c t o rg r a p h i c s ( s v 0 1l sau7 3 c r e c o m m e n d e ds t a n d a r df o rw e b g r a p h i c s i ti sal a n g u a g ef o rd e s c r i b i n g 似7 0 d i m e n s i o n a lv e c t o rk a p h i e si nx m ls v g b a s e d i m a g e sc a nd r a m a t i c a l l yi m p r o v eg a p h i c so nt h ew e bi th a x ，et h em e r i t so f b o t hv e c t o r g r a p h i c s a n dx m l s v gg a p h i c sc o m p a c ts i z ea n dc a r ls c a l e n i c e l y t o a r b i t r a r y r e s o l u t i o n ss i n c es v gi s x m l _ b a s e d ，i t i s i n d e p e n d e n t o fp l a t f o r ma n di ti s e x p a n s i b i l i t 3 7 d o c u m e n to b j e c tm o d e l ( d o m ) i sa na p p l i c a t i o np r o u a m m i n gi n t e r f a c e ( a p i ) f o ： h t m la n dx m ld o c u m e n t si td e f i n e st h el o g i c a ls t m c m r eo fd o c u m e n t sa n dt h e u 7 a ya d o c u m e n ti sa c c e s s e da n d m a n i p u l a t e d s i n c ei ti ss h o r tt i m ef r o ms v g1 0b er e c o m m e n d e d t h e r ei s1 i m i to nt 0 0 1o fs v g t h e d o mb a s e ds v ge d i t o r i sd e v e l o p e df o ru s e rd r a w i n gs v g g r a p h i c so nw e b w i t h w w s w y g t h ee d i t o rd e s i g n e db ys v ga n dd o m ：f i r s td r a wu s e ri n t e r f a c eb ys v g ； t h e np a r s et h e mb yx m lp a r s e r ，t h e r ew i l lb ead o m t r e ei nm e m o r y ，a tt h es a m et i m e e d i t o rw i l lb eg e n e r a t e do nw e b ；l a s to nt h ev i s u a lw i n d o w ，n 3 0 u s ee v e n td r i v es c r i p t a c c o m p l i s hf u n c t i o nw i t ht h ed o m f o rs v g sa s c i if o r m a t s a l lt h ec o d ec a nb ee d i t i nn o t e p a d t h ec h a r a c t e r i s t i c so ft h i ss v ge d i t o ra r e ：i n d e p e n d e n to fp l a t f o r m ，e a s ye x p a n d g r a p h i c s c a l lb e r e e d i t ，d e v e l o pf a s t ，m a i n t a i n a b i l i t y r e s p o n dr a p i d l y w i t ha d d i n g g r a p h i c se l e m e n t s ，t h i ss v g e d i t o rc a nd r a wg r a p h i c st o s a r i s f yt h ed e m a n do fm a n y t r a d e s ，i ta l s oc a nc o l m e c tw i t hd a t a b a s ef o rr e a lt i m ed a t ao i 3u ，e b i naw o r d i ts i m p l i f y t h ep r o c e s so f g r a p h i c s c o d i n ga n df a s tt h ed e v e l o p p r o c e s so f p u b l i s h i n g k e yw or d s ：x m l ：s v g ：p a r s er id o m ：v e c t o r 华中科技大学硕士学位论文 1 1 网页图形格式的发屣 1 绪论 近几年来，随着i n t e r n e t 的迅猛发展，网页技术日新月异，人们都力图设 计出精美、有特色的页面。其中，图形技术发挥着至关重要的作用。目前网上 的图像有：j p e g ( j o i n tp h o t o g r a p h i ce x p e r t sg r o u p ，联合图像专家组) 、g i f ( g r a p h i c si n t e r c h a n g ef o r m a t ，图形交换格式) 、p n g ( p o r t a b l en e t w o r kg r a p h i c ， 可移植网络图形1 、p g m l ( p r e c i s i o ng r a p h i c sm a r k u pl a n g u a g e ，精确图形标记 语吾1 、v m l ( v e c t o rm a r k u pl a n g u a g e ，矢量标记语言) 等等。 1 1 1 位图 g 1 f 随着i n t e r n e t 的普及，g i f 成了无人不晓的网络图形标准之一。这种格 式是由c o m p u s e r v e 公司设计的，g i f 分为8 7 a 及8 9 a 两种版本，存储格式由1 位到8 位【“。g 1 f 格式是经过压缩的格式，磁盘空间占用较少。由于它是制作 2 d 动画软件a n i m a t o r 早期支持的文件格式，所以该格式曾被广泛使用。 j p e g 是按j o i n tp h o t o g r a p h i ce x p e r t sg r o u p 制定的压缩标准产生的压缩格 式，属j p e g f i l ei n t e r c h a n g e f o r m a t i ”，可以用不同的压缩比例对这种文件压 缩，其压缩技术十分先进，对图像质量影响不大，它是主流图形格式。 p n g 是专门针对w e b 开发的一种无损压缩图像，结合了以上两种图像的 优点，它的压缩比要大大超过l z w 等传统的图像无损压缩算法p 】，同时它还支 持透明背景和动态效果。 但j p e g 、g i f 和p n g 都是位图格式一即它们都是像素的排列，它们存 在着以下的不足：如果你试图改变图象的大小，将导致浏览器操作位图，而产 生难看的，锯齿状的线条。另外，由于位图的尺寸很大，如果要迅速的传到用 户的系统上，必须使用压缩和调色板技术 4 1 。但是，即使使用压缩技术，由于 图象文件的大小和用户的连接速度较慢，下载图象的时间仍然很长。而且，如 果没有图形工具的支持，你是无法徒手作图的p 】。 1 1 2 矢量图 矢量图形克服了位图的的缺点，它可以无限制地被缩放，所以一个源文件 华中科技大学硕士学位论文 可以按照任意的比例进行缩放、渲染；有由于矢量图形是使用基于数学公式的 命令来控制线条的粗细、颜色和图形的，所以在文件压缩方面极具优势。 ( 1 ) f l a s h 文件格式 f l a s h 的输出文件格式s w f ，由美国著名多媒体厂商m a c r o m e d i a 丌发的图 像格式( 或者应该称做互动矢量动画格式更为确切) 并借助f 1 a s h 强大的动画能 力，以横扫干军之势占据了人们的浏览器，俨然成了新一代互联网图像的事实 标准。但s w f 存在着以下的不足： a s w f 是一个非丌放标准。这就意味着该技术掌握在个体手中，技术的发 展受到方方面面的限制。同时，s w f 与其他的开放标准也没有完整的融合方案。 尽管s w f 目前已经提供了对x m l 的支持，但这种支持是单方面的。随着x m l 及其他开放标准的发展，s w f 的不协调性将日盏显著。 b s w f 的可编辑性差。s w f 做为最终的动画生成格式，其创作过程封装 在s w f 文件中，几乎无法再进行二次编辑。 ( 2 ) 基十x m l 的矢量图 近年来，h t m l 作为在i n t e r n e t i n t r a n e t 网上进行数据浏览和数据交换的 主要文件格式，为网络技术的蓬勃发展发挥了不可磨灭的作用，但随着其应用 的不断深入，它的不足之处也逐渐暴露出来，主要有如下两点：一是采用的标 记固定、有限，且无内涵；二是不支持矢量图形。这两大缺陷越来越成为限制 w e b 应用的障碍1 6 。9 】。作为一种改进，w 3 c 于1 9 9 8 0 2 1 0 发布了x m l l0 规范， x m l 以其元标记的特性解决了h t m l 在标记上的不足 1 0 - 1 4 1 ，使得i n t e r n e t 技 术大大自u 进了一步，但它仍不支持矢量图形。各大软件厂商和组织便基于此 x m l l 0 规范纷纷推出自己的矢量图形规范，其主要代表有a d o b es y s t e m s i n c 制定的p g m l 、m a c r o m e d i a 和微软等提出的v m li ”1 。 由于x m l 尚在不断完善过程中，特别在1 9 9 8 以后变化较大，因此，虽然 p g m l 、v m l 是基于x m l 的图形标准，但是缺乏对x m l 相关标准的完整集 成。另外，一些公司制作自己的p l u g i n 来支持矢量图形的”c q 见i f - ，但这些插件 都由于缺乏跨平台的支持，以及没有较好的配套编辑工具，而未能得到网上的 1 1 3 可升级矢量图像s v g 基于以上讨论，为了统一标准，结束混乱局面，w 3 c 组织融合各家之长， 推出了用于描述二维矢量图形和矢量点阵混合图形的置标语言s v g ( s c a l a b l e v e c t o rg r a p h i c s ，可升级矢量图像) 1 7 1 。 华中科技大学硕士学位论文 1 2 国内外研究概况 1 2 1s v g 工具 s v g 作为w 3 c 组织j 下式推荐的图像格式，众多知名厂商纷纷宣布了对 s v g 的支持，包括m i c r o s o f l 、n e t s c a p e 、s u n 、h p 、i b m 、a p p l e 、a d o b e 、 m a c r o m e d i a 、a u t o d e s k 、c o r e l 、v i s i o 、b i t f l a s h 、i l o g 、i n s o 、o a s i s 、0 p e n t e x t 、 q u a r k 、r a l ( c c l r c ) 、x e r o x 等”。像a d o b e 公司已经宣称将在推出的a d o b e 图像处理套件如l l l u s l r a t o r 、p h o t o s h o p 、g o l i v e 和c y b e r s t u d i o 中集成s v g 的 全部功能，并且还提供n e t s c a p e n a v i g a t o r 和i e 的插件，以便使其能够直接支 持s v g 文件的浏览。n e t s c a p e 和m i c r o s o f t 公司也已经开始进军s v g 领域，这 标志着未来的网络浏览器将会内置对s v g 文件的支持功能。 1 2 1 1s v g 的浏览工具 ( 1 )a d o b es v g v i e w e r ： 作为s v g 的提出者之一，a d o b e 公司已经逐步将s v g 融入它的所有产品 之中，目前在s v g 的浏览器和编辑器的研制开发上都已颇有建树。由它丌发 的s v g v i e w e r 虽然不是最早的s v g 浏览器，但它是唯一的以i e 和n e t s c a p e 的插件形式支持s v g 浏览的浏览器【1 ，而且由于a d o b e 在这一行业的领先优 势，目前使用最为广泛。现在s v g v i e w e r 已经发展到第3 版本，对于有关s v g 的方方面面都给予了支持： 在图象方面，它可以显示输出g i f 、j p e g 和p i n g 格式的栅格图象，并支 持对图象的过滤操作。在图形方面，它不但支持基本图形的勾边和填充，而且 支持路径、裁剪、渐融、过滤，并且在显示中可以反走样显示出较好的效果 2 0 - 2 2 】。 在文字方面，它支持各种字体字号，并可以对文字进行轮廓填充。不过，由于 目前它还不支持g b 2 3 1 2 编码，中文文字不得不转换为u t f 8 编码输出。支持 丰富的动画效果。支持d o m ，可以内嵌s c r i p t ，达到生动活泼的交互效果 1 2 3 - 2 5 1 。支持链接，可以链接到本服务器的其它文件或一个u r l 地址，也可以 链接至e m a l l 地址。但是目前尚不支持页内链接。支持背景声音的播放可 以播放m p 3 和w a v 格式的声音文件【2 。这个插件的使用很简单，一旦安装好 s v g v i e w e r ，s v g 文件的默认打丌方式就是启用浏览器i e 或n e t s c a p e ，然后利 用插件来显示s v g 文件的效果。另外，s v g 文件也可以作为“i m a g e s v g - x m l ” 的m i m e 类型嵌入h t m l 文件中。可见，它和我们在i e 中浏览h t m l 页面的 方式几乎没什么两样。不过，插件提供了一些特殊的功能，可以将显示区域扩 大或缩小，可以中断和继续动画的播放，可以在显示区域中搜索特定文本，也 华中科技大学硕士学位论文 可以查看源文件。s v g 文件同样可以打印，插件将相应的栅格显示效果送往打 印机。 ( 2 )i b ms v g v l e w e r ： 这是一个由i b m 公司a l p h a w o r k s 开发的可以浏览s v g 的浏览器。这个软 件出现的比较早，由于s v g 刚刚成为w 3 c 的推荐标准，因此s v g v i e w e r 一直 是a l p h a 版本，随着s v g 草案的升级而逐步地在完善。但在s v g 草案讨论阶 段，该软件充当了人们学习、了解s v g 的一个实用的软件工具。该软件在运 行时要安装j a v a 2 0 以上的运行环境和i b m 的x m l 4 jx m l 解析器。 1 2 1 2s v g 的编辑工具 s v g 的文本格式并不意味着必须用文本来编辑图像，我们大可以使用能生 成s v g 格式图像的工具软件来像平时处理图像一样工作，只是最后输出结果 时多一步生成s v g 图像的步骤而已。 w 3 c 为了s v g 的这项建议规范酝酿的两年期间，由于许多软件开发商看 好该项技术，许多图像及多媒体领域的厂家参与了其官方规范草案的修改讨 论，跟踪技术的发展。目前，s v g 已经发展成为工e 式的推荐标准，国外陆陆续 续涌现了许多s v g 文档的显示、编辑和转换工具，其中不乏其佼佼者，比较 突出的是原本在平面设计领域发展的软件商，因为本身图形图象处理的根底深 厚，所以转移到s v g 上来驾轻就熟。反观一些做主页设计或h t m l 编辑软件 的厂商反而落后一步，因此，目前支持s v g 制作的软件大都是平面设计软件。 下面介绍几种对s v g 有较好支持的设计制作软件： ( 1 )c o r e l d r a w 9 0 c o r e l 公司的c o r e l d r a w 图形软件在平面设计领域久负盛名，早在 c o r e l d r a w 9 0 之前的80 版本就开始支持we b 页面设计，增加了许多只有w e b 页面才需要的对象，例如j a v a a p p l e t 、表单、超链接等，可以输出为h t m l 格式的文件。对于页面上的图形对象，该软件设计了多方面的处理办法，使之 能够展现在w e b 页面之上，其中包括合成为点阵图象、生成j a v a a p p l e t 等方式， 当然这都是在缺少s v g 规范的情况下不得已而为之。s v g 的出现，自然给此 类软件带来了更大的发展空间，因此，c o r e l d r a w 90 就配备了s v g 的过滤器， 为生成合有s v g 的网页提供了很好的工具和手段。 ( 2 )a d o b ei l l u s t r a t o r 9 0 a d o b e i l l u s t r a t o r 也是一个广泛被用于平面设计的图形软件，它的最新版90 的图形功能更是几近完美，用来支持s v g 也是易如反掌。现在，a d o b e 公司已 经在i l l u s t r a t o r 90 中加入了s v g 功能，可以将设计好的页面输出为s v g 文件， 华中科技大学硕士学位论文 同时还可以为页面上的对象定义响应不同事件的s c r i p t 脚本。可见，在s v g 方面a d o b e 公司依然占有先机。 事实上，s v g 不仅仅局限于平面图形功能，动画与交互功能也是它的闪光 点，因此只有对图形的支持是远远不够的。说到动画与交互方面，少不了要提 及m i c r o m e d i a 的f l a s h 和a d o b e 的l i v e m o t i o n 【2 7 】，两大软件在f l a s h 上的争斗 即将转移到s v g 上面，因为s v g 比f l a s h 更具发展前景。a d o b e 公司已经声 称将在l i v e m o t i o n 的下一版本支持s v g ，从a d o b e 公司对s v g 的积极态度来 看，此话必定会成为事实，而f l a s h 也做好了接纳s v g 的准备。可以预见，未 来的网页设计软件将是今天的网页设计软件与平面设计软件、矢量动画软件的 结合产物，网页的制作方法与制作流程也会有相应的较大改变 2 8 - 3 0 j 。 总之，目前的s v g 图形生成工具，都必须在本机上安装软件：并且只能 提供s v g 图形格式的输出，不能识别输入s v g 图形格式；没有现成的各行业 的图元库。因此，尚无本课题所研究的基于w e b 上的、可重复编辑的、含专业 图元的s v g 图形编辑系统。 1 2 2 d o m 标准 文档对象模型( d o m ) 是访问和维护h t m l 和x m l 文档的应用程序接口 ( a p i ) ”。它定义了文档的逻辑结构以及存取和维护文档的方法。在d o m 的详 细说明书中，“文档”指的是广泛意义上的文档，x m l 用来代表存储在不同系 统上的各种各样的信息，包括那些在传统意义上被看作数据，而不被认为是文 档的信启，。现在x m l 可把这样的数据表示为文档，并由d o m 管理。利用d o m ， 程序员可以建立文档，遍历文档的结构，还有增加、删除以及修改文档的元素 和内容。 在w 3 c 中成立了专门从事d o m 标准化工作的工作组，1 9 9 8 年1 0 月 d o m l e v e l1 成为w 3 c 的标准， 1 9 9 9 年1 2 月d o m l e v e l2 成为推荐标准，在 2 0 0 0 年9 月1 局发布的d o m l e v e l3 标准的草稿扩展了d o m l e x ，e l2 。 d o ml e v e l1 主要描述了三部分内容，它们分别是f ”3 3 】： ( 1 ) 定义了用于表达和操作一份结构化文档的接口和对象： ( 2 ) 这些接口和对象的语法，包括其行为和属性： ( 3 ) 这些接口和对象之问的关系与协同关系。 d o ml e v e l2 在l e v e l 1 的基础上增加的内容包括：文档的抽象视图 ( a b s t r a c t 、，i e w ) 、对象树的遍历( t r a v e r s a l ) 、文档中的块( r a n g e ) 、x l 格页( g e n e r i c s t ) l e s h e e t s ) 、层叠式风格页 ( c a s c a d i n gs t y l es h e e t s ) 等内容f 3 4 3 9 j 。另外，更 重要的是l e v e l2 增加了对事件机制( e v e n t ) 的支持。事件机制在l e v e j l 中 华中科技大学硕士学位论文 完全没有被定义。 需要注意的是，d o ml e v e l2 中所说的事件( e v e n t ) 和s a x 的事件驱动 ( e v e n td r i v e n ) 中的事件，虽然名称相同，但涵义完全不同。d o m 2 中的事件， 指的是结构化文档内部所定义的事件，比如页面被加载时的o n l o a d 事件等， 和p a r s e r 无关。而s a x 中的事件，指的是x m lp a r s e r 在解析x m l 文档时产 生的回调( c a l l b a c k ) 事件，和文档本身无关。从w 3 c 公布的草案来看，l e v e l 3 的主要目标( g o a l ) 是进一步加强和扩充l e v e l2 新出现的事件机制a o l 。 d o m 的设计目标是成为一种独立于平台和独立于语言的标准，所以d o m 工作组使用了o m g ( o b j e c t m a n a g e m e n t g r o u p ，对象管理组织) 的 i d l ( i n t e r f a c e d e 矗n i t i o n l a n g u a g e ，接1 2 定义语言) 来定义d o m 的接口，然后由 厂商具体实现这些接口，这样既统一了标准，同时又使标准的实现成为可能。 d o m 中的接口只是定义了必须实现的功能，没有给出任何具体实现的信息。 1 2 2x m l 解析器 x m l p a r s e r 是一个软件包，提供给程序员二次开发的软件包。程序员在使 用x m l p a r s e r 时，调用其包中提供的接口( 如函数接口等) ，从而得到解析的 结果。功能比较完善的x m l p a r s e r 在解析x m l 文档的同时还能完成有效性检 验等相关任务。使用已有的x m lp a r s e r ，能使程序员在处理与x m l 的解析相 关的事务时节省大量的精力，因而是一种符合软件工程中代码重用思想的软件 包。 x m l p a r s e r 遵循一定的标准，以x m lp a r s e r 如何回应( f e e d b a c k ) 调用者 的方式来分，可以分成两大类：事件驱动类( e v e n t d r i v e n ) 和对象模型类( o b j e c t m o d e l ) 。前者的代表是s a x ( s i m p l ea p if o rx m l ) ，后者的代表是d o m ( d o c u m e n t o b j e c t m o d e l ) 1 4 1 - 4 3 1 。d o m 出现的比较早、比较o o ，但s a x 的 运行性能更好。出于易开发易维护的的角度，我更倾向于d o m 。此二者，思 路大相径庭，将在第三章详细描述。 x m l p a r s e r 可以用多种高级语言实现，也可以被用于多种高级语言的二次 丌发。这些语言包括：c 、c + + 、t c l 、p e r l 、p y t h o n 以及j a v a 。其中，尤以j a v a 为甚，c c + + 其次。由于p e r l 是g n u 的，所以用这两种语言书写的x m lp a r s e r 也相当多。p y t h o n 是近几年新出现的一种完全面向对象的、解释型的高级语言， 由于出现较晚，所以相应的x m lp a r s e r 不多。 c c + + 的x m lp a r s e r 一般以d l l 或a c t i v e x 的形式发布( d i s t r i b u t e ) ，少 量非商业产品附源码。在商业性的c + + x m lp a r s e r 中，i b m 发布的x m l 4 c 2 的 影响较大，微软也已经发布了m s x m l ，其中含有个x m lp a r s e r 。 j a v a 的x m l p a r s e r 一般以j a r 包的形式发布，绝大多数都附有源码。商业 华中科技大学硕士学位论文 产品较少多为o p e ns o u r c e 的。由于j a v a 语言本身的优越性，j a v a 的x m l p a r s e r 在使用上比c c + + 的x m lp a r s e r 更方便。 1 3 课题主要研究工作 目前，互联网成为信息发布的重要渠道，b r o w s e r w e bs e r v e r 结构f 在取 代c l i e n d s e r v e r 结构，并且由于w e b 具有客户端成本低、功能强和标准化等特 点而逐渐成为网络信息服务的主要技术 4 4 , 4 5 。越来越多的企业、部门希望将生 产信息、业务管理放到i n t e r n e t i n t r a n m 网站上，以便远程管理以及业务扩展。 为了突显网站的特色，图象图形技术的运用必不可少，若能实现通过图形方式 在i n l e r n e t i n t r a n e t 上实时发布信息，这更是既直观又好看，其需求显然是巨大 的。 就电力调度部门来说，很多重要的生产现场的实时数据与信息需要共享， 而这些现场的数据与信息随时怕j 变化较快，实时性要求较高，如整个电网的周 波、潮流、负荷、母线电压以及各个发电厂的出力等，这类信息反映了电力调 度部门的生产运行情况。目前，为了生产运行管理人员掌握生产运行情况，控 制电力生产过程，各个电网调度机构均建立了电网生产实时监测与监控系统， 这些系统采集大量的生产现场实时数据，由专门的软件对其进行运算、分析， 但是这种系统往往是独立封闭的，其采集的实时生产信息不便于电力企业的领 导人和相关部门及时、方便和准确地掌握电网生产情况，更不能为整个电力系 统共享1 4 6 。4 引。 “电网实时信息发布系统”项目中，采用i n t e r n e t i n t r a n e t 技术使电力调度 系统实时生产信息的大范围内共享成为可能。该项目首次引入了s v g 技术， 用s v g 技术来制作电力厂站接线图，并结合服务器端j a v as e r v l e 程序，柬实 现对实时数据s v g 电力厂站接线图的动态发布。但电力厂站接线图的制作源 码是通过手工一点一点写出的，十分不方便且工作量大。于是，丌发一个w e b 上的s v g 编辑工具一一通过所见即所得的方法，简单快捷的生成所需的矢量 图形，并可通过加入不同行业的图元，扩展其应用的行业领域一一的课题十分 有意义。由该编辑工具画出的矢量图形通过与相应的数据库连接可达到在 w e b 上动态反映实时信息的目的。这样，用户无需了解太多的计算机知识便可 画出于专业水准的图形。大大简化了s v g 矢量图形绘制的难度，加快了实时 信息动态发布的开发进程。无论从经济效益，还是从技术水平上讲，都具有重 要的意义。 华中科技大学硕士学位论文 2 基于x m l 的s v g 规范分析 本章对s v g 规范进行详细讨论与分析，并理论联系实际对s v g 图形进行 绘制；接着讨论s v g 的特征及它对图形的特殊支持：最后对s v g 做深入分析， 对其交互的实现进行讨论。 2 1s v g 规范 s v g 是由国际w w w 委员会( w 3 c ) 组织为适应i n t e r n e tw e b 应用的飞 速发展需要而制定的一套基于x m l 语言的可缩放矢量图形语占描述规范，用 来描述二维矢量图形和矢量点阵混合图形的置标语言，其全称是可扩展矢量 图形规范( s c a l a b l e v e c t o rg r a p h i c s ) 。其中，“可扩展”( s c a l a b l e ) - - 词在图形图 象技术上指的是它不局限于一个固定的分辨率和大小，譬如可在不同分辨率的 屏幕上以相同的大小显示，也可以在同一个网页中以不同的大小，或观全局， 或观细节；而在网络技术上，则指的是这一规范能够与其它规范相融合，从而 能满足更广泛的用户需求，并适合于更广泛的应用方式。“矢量”( v e c t o r ) 是指 规范中描述了直线、曲线、形状等几何图形，而无须象p n g 、j p e g 等图象格 、式那样逐象素进行描述。“图形”( g r a p h i c s ) 是指它提供了对矢量和矢量栅格混 合图形的描述，因而它填补了大多数基于x m l 的置标语言规范对复杂图形描 述的空白。 w 3 c 对s v g 的解释是：“s v g 是种使用x m l 来描述二维图像的语言。 它允许3 种形式的图像对象存在：矢量图形、点阵图像和文本。各种图像对象 能够组合、变换，并且修改其样式，也能够定义成预处理对象。文本是x m l 名字空间中的有效字符，这些字符能被作为s v g 图像的关键字而存留在搜索 引擎中。s v g 的功能包括嵌套变换、路径剪裁、透明度处理、滤镜效果以及其 他扩展，同时，s v g 图像支持动画和交互，也支持完整的x m l 的d o m 接口。 任何一种s v g 图像元素都能使用脚本来处理类似于鼠标单击、双击以及键盘 输入等事件。并且因为同w e b 标准兼容的缘故，s v g 还能够在同一个w e b 页 面罩凭着继承自x m l 的名字空间等特性来完成一系列交互操作。” 根据功能不同，s v g 的主要对象可归为基本要素对象和页面描述功能 对象两大类，如图2 1 所示。 华中科技大学硕士学位论文 2 2s v g 图形的绘制 2 , 2 1s v g 文件结构 赶彤 团 撼圆 当地彤 且技 尊f 垃 图2 1 s 、g 的主要对象 让我们怂。s ，v g 的文件结构开始对s v g 有个整体的印象。 -4sv田g币l譬片彗嘉竺皇含在，cg三标篷中的svgsv裂缝& + 篷段可以嵌套。g 片段可以以单独的“s v g 文件i 形式存在，也可苡衰艾；o 爱翥f 蔓髫筝- 。 p 圆是一个s v g 片段嵌入x m l 文档的例子： s 。g ：e l l i p s ec x 2 ”2 c m ”c y = 。4 c m r x = ”2 c m ”r y = 一ic m ” 百一 釜百 耋登荨重意 拦圈 华中科技大学硕士学位论文 这卜独立的s v g 文件要复杂一点： 1 2 3 4 5 下面我们对上面的代码做一个说明： 第一行：由于s v g 是x m l 的一个应用分支，因此，它也必须符合x m l 的标准，必须包含x m l 的声明 。 第二行：s v g 必须遵循定的标准或规则，这些标准或规则保存在一个被 称为d o c u m e n tt y p ed e c l a r a t i o n 或d t d 的独立文件，来验证s v g 文档结构的 正确性，d t d 精确描述s v g 中允许使用的语言和语法规则。 第三行： 标记告诉浏览器，这是个s v g 文档，s v g 文档的作用范 围( 或叫做s v g 的画布大小) 用h e i g h t 和w i d t h 属性来定义，如果不定义w i d t h 和h e i g h t 属性的话，画布的范围将是整个浏览器，x ，y 属性告诉浏览器将s v g 画布放到什么位置，x 属性与我们平常所用t o p 属性相同，指浏览器的t o p 位置， y 属性等同于浏览器的l e f t 位置，当然，这里也可以使用相对位置来定位，即 百分比。 第四行：所有的s v g 内容，都被放到 标记之间。 第五行：由于s v g 是x m l 的一个应用，因此，必须有结束标记 来 结束文档。 2 2 2 样式 样式属性是s v g 的重要参数。样式定义了s v g 图元怎样被渲染。它被用 来： ( 1 ) 描述一个对象怎样被绘制，是勾边、还是填色，用多羊目的线画、或者用 虚线画； ( 2 ) 定义文本参数，如字体，字号； ( 3 ) 对图元的渲染结果产生影响，如加上剪切路径、蒙板、滤镜。 华中科技大学硕士学位论文 s v g 的样式属性在很大程度上与c s s 和x s l 类似。 以下例子中样式属性“f i l l ”和“s t r o k e ”定义了红色填充，蓝色勾边。 2 2 3 坐标系统 一个s v g 图形应该在一个有限的区域内绘制，这个区域就是s v g 视区。 视区的尺寸由s v g 文件和它的父文档共同决定。一个视区具有以下参数：用 像素表示的高度和宽度，每一个像素是多少厘米。 视区有两个坐标系：视区坐标系和用户坐标系。初始化时，这两个坐标系 原点与视区原点重合，个单位长度就是一个像素。但用户可以任意定义新的 用户坐标系1 4 9 1 。 2 2 4 路径 路径是一个图形的轮廓，可以对路径描述的图形进行勾边、填色、或把它 做为剪切路径使用，也可以把这三者进行组合。 路径是通过“当前点”的概念来描述的。这很象是用笔在纸上画图，当前点 就是笔的位置，随着笔在纸上移动，一条“路径”就被画出来了。使用路径，可 以定义任何想要的图形，就象有了一支笔和一张纸，可随便画。 用来定义路径的动作有： ( 1 ) m o v e t o ：设定一个新的当前点( 把笔放到纸上某一位置) ； ( 2 ) l i n e t o ：画一条直线； ( 3 ) c u r v e t o ：画一条b a z i e r 曲线： ( 4 ) a r c ：画圆弧或椭圆弧： ( 5 ) c l o s e p a t h ：从当前点连一条直线到起始点，闭合当i u 路径。 将多条独立的路径组合起来，就形成了组合路径，可以描述更加复杂的图 形。 华中科技大学硕士学位论文 一个简单的路径例子： 2 2 5 基本图元 s v g 提供了以下几种基本图元：矩形( 包括圆角矩形) 、圆、椭圆、直线、 多线和多边形。 实际上用路径来画这些图形也是完全等效的，只是要麻烦一点( 有现成的 就不用自己画了) 。这些基本图元也可以进行勾边、填色或作为剪切路径使用， 具有与路径相同的特性。 一个最简单的画矩形的例子： 2 2 6 文本 s v g 中，文本是作为图形处理的。本文和其它图形元素没什么区别，用法 也差不多，因此也没有自动换行，大小写变化等文本编辑特性，需要自己处理。 一行文本可以被渲染成普通的直线形，也可以按照某一路径渲染，比如把 一行文本写成一个圈，或写成波浪状等。s v g 支持各种字体和字号，也支持文 本的横排或竖排，从左到右、从右到左( 如阿拉伯语或希伯来语) 或双向混合 的排列。 另一方面，s v g 文本同时也是x m l 数据，因此具有以下特性： ( 1 ) 可以通过某种方式( 如转换为语音) 被有视觉障碍的人阅读： ( 2 ) 在大多数情况下，可以选中，通过系统剪贴板复制： ( 3 ) x m l 的搜索引擎可以象对其它x m l 数据一样对s v g 文本起作用。 一个文本的示例： h e l l o ，o u tt h e r e 华中科技大学硕士学位论文 2 2 7 关于颜色 s 7 g 支持用几种不同的模式对图形和文本进行填色或勾边 ( 1 ) 单一色； ( 2 ) 变色( 线性渐变和放射状渐变) ： ( j ) 图票填充( 用矢量图或图象平铺填色) 。 2 2 8 剪切、蒙板和混合 剪切是以路径、文本和基本图元或任何它们的组合作为剪切路径，“覆盖， 到待处理图形上，在剪切路径内部的图形将被完全显示，外部的则不显示。 蒙板是将两副图形按任意透明度进行叠加，融合。 两者的区别在于：剪切是一种“硬”蒙板，覆盖在上方图形的像素只分为透 明和不透明两种( 剪切路径内部的像素透明，外部的不透明) ：而蒙板图形的 像素的透明度可以在透明和不透明之间任意取值，因而达到渐变或融合的效 果。 而混合可以达到更好的融合效果，也更复杂。s v g 支持简单a l p l l a 混合。 简单的蜕，剪切控制图形像素的透明和不透明；蒙板控制图形的每一个像 素透明到什么程度；而混合除了控制透明度外，还可以控制上下两副图形对应 2 2 9 滤镜 滤镜效果是对所给图形进行一系列的处理而达到的最终效果。图2 2 是 个简单示例。 磷：滟i l t e 耽r 嘁、，嚼眵 目2 2s 、7 g 的滤镜效果 l g 镜效果要用 定义。实际上，一个滤镜是由系列基本滤镜组合而 华中科技大学硕士学位论文 成的，每一个基本滤镜都对一副或几副图形进行一项简单处理( 如模糊、加亮) 而得到一个结果，这个结果又可以被下一个滤镜迸一步处理。 当一系列滤镜用 g 标签组合起来，这些滤镜就成了一个整体。组滤镜 中单个滤镜的处理效果不会显示出来，而被临时保存起来。 图2 3 是复杂一点的滤镜效果。 2 2 1 0 动画 图23s v g 的复杂滤镜效果 正如你所期望的，s v g 也支持动画。可以通过以下几种方法获得动画效果： ( 1 ) 使用s v g 动画元素。s v o 可以描述随时间变化的图形对象，使用不同 的动画元素可以定义运动路径，淡入淡出效果和对象的膨胀、收缩、旋转和变 换颜色。 ( 2 ) 使用s v g d o m 。s v g d o m 兼容d o m l 和d o m 2 ，而s v g 又定义了 一套附加的d o m 接口，支持脚本动画。通过这个方法可以获得各种动面效果。 脚本语言中的定时器对象可以用来启动和控制动画。 ( 3 ) s v g 被设计为支持未来版本的s m i l 。s m i l 将被模块化而与s v g 及其 它基于x m l 的语言连接，产生动画效果。 2 3s v g 的特征 ( 1 ) 基于x m l 标准 x m l 是公认拥有无穷生命力的下一代网络标记语言。与h t m l 一样，x m l 也源自s g m l ( s t a n d a r d g e n e r a l i z e m a r k u p l a n g u