（计算机应用技术专业论文）基于svg的webgis应用研究.pdf

摘要 s v g ( s c a l a b l ev e c t o rg r a p h i c s ，可缩放矢量图形) 是一种开放标准的文本式 矢量图形描述语言，它基于x m l ，通过使用简单的文本语句完成矢量图形及栅格 图像的表现，支持诸如色彩填充、对象运动、动态交互、滤镜效果、音效添加等 操作，已成为未来w e b 图形图像的标准。 本课题通过对s v g 技术的深入研究和应用，针对空间数据的复杂性、拓展性 以及g i s 平台的开放性、交互性需求，对s v g 在w e b g i s 方面的应用作了一些探索， 研究了包括空间信息可视化、空间数据分析、编辑和表现、地理空间数据与数据 库映射交互、统计数据表达等功能的技术实现。在此基础上，开发了一个基于s v g 技术的图文信息系统，它实现了s v g 技术和w e b g i s 的结合。此系统包括服务端及 客户端的设计，服务器端主要处理数据的存储及数据的动态装载，客户端主要完 成s v g 数据的显示及交互工作。 课题研究过程中的主要创新点在于w e b 环境下矢量图形处理核心算法的设计 与实现，属于基于s v g 技术的二次创新范畴，具体包括： 1 设计并实现了图层与图块控制算法。通过对s v g 文档的分析，实现了通用 w e b g i s 的地图分层控制功能和分块控制功能。 2 完成了数据驱动产生s v g 图形的算法。通过对s v gd o m 的操作，实现对 s v g 文档的解析，并根据己有信息数据，采用编程的方式来动态生成s v g 图形对象以及专题图，提高了图形产生的效率。 3 开发了一个基于s v g 技术的、w e b 环境下的图文信息系统。建立了s v g 地 图与数据库之间的映射关系，能够完成空间数据与非空间数据之间的关联 互查功能，满足了一些小型w e b g i s 的应用需求。 关键词：s v g ，w e b g i s ，d o m ，矢量图形，图文信息系统 r e s e a r c ha n da p p ii c a t i o no fw e b g i sb a s e do ns v g a b s t r a c t s v g ( s c a l a b l ev e c t o rg r a p h i c s ) i sa no p e nn o r m a t i v et e x tm o d ea n dv e c t o r g r a p h i c sd e s c r i p t i v el a n g u a g e i ti sb a s e do nx m l a n dm a k e su s eo fs i m p l et e x t u a l s e n t e n c e st oe x p r e s sv e c t o ra n dg r i dg r a p h i c s ，a n da i ms u p p o r t st h eo p e r a t i o ns u c ha s c o l o rf i l l ，o b j e c tm o v e m e n t ，d y n a m i ci n t e r a c t i o n , f i l t e re f f e c t ，s o u n de f f e c ta d d i t i o n s v gh a sb e c o m et h et o - b ec r i t e r i o no f w e bg r a p h i c sa n di m a g e t h i ss u b j e c tt h r o u g hd e e p l yr e s e a r c ha n da p p l yo fs v gt e c h n o l o g y , i ta i m sa t c o m p l e x i t ya n de x p a n s i b i l i t yo fs p a t i a ld a t aa sw e l la so p e na n da l t e m a n tp r o p e r t y r e q u i r e m e n to fg i sp l a t f o r m , a n dd o e ss o m er e s e a r c ho fs v ga p p l i c a t i o ni nw e b g i s f i l e d t h er e s e a r c hc o m p l e t e st h ef u n c t i o no fs p a t i a li n f o r m a t i o nv i s i b i l i t y , s p a t i a ld a t a a n a l y s i s , c o m p i l a t i o na n dd i s p l a y , m a p p i n ga n di n t e r a c t i o nb e t w e e ng e o g r a p h i cs p a t i a l d a t aa n dd a t a b a s e , s t a t i s t i cd a t ae x p r e s s i o na n ds oo na n do na b o v eb a s i s , a g r a p h i c s - l e t t e ri n f o r m a t i o ns y s t e mo fs v gw h i c ha t t a c h e ds v ga n dw e b g i si s d e v e l o p e d t h es y s t e me m b r a c e s 鲫f v e ra n dc l i e n tt e r m i n a ld e s i g n , b o t hs e p a r a t e m o s t l yd e a lw i t l ld a t as t o r i n ga n dd y n a m i cl o a d i n ga n ds v g d a t as h o wa n di n t e r a c t i o n t h em a j o ri n n o v a t i o nc o n s i s ti nd e s i g n i n ga n da c h i e v i n gt h ec o r ea r i t h m e t i co f v e c t o rg r a p h i cm a n a g e m e n tu n d e rw e bc i r c u m s t a n c e ，w h i c hb e l o n g st os e c o n d a r y i n n o v a t i o nc a t e g o r yb a s e do ns v g t e c h n o l o g y t h ed e t a i l s 黜a sf o l l o w s ： 1 d e s i g n e da n da c h i e v e dl a y e ra n dp l o tc o n t r o la r i t h m e t i c w i t hp a r s i n gs v g d o c u m e n t ，w eh a v ed o n em a p l a y e ra n dm a p - p l o tc o n l r o lf u n c t i o no f u n i v e r s a l w e b g i s 2 d o n et h ea r i t h m e t i co f d a t a - d r i v e no r e a t es v g g r a p h i c s w i t hm a n i p u l a t i n go f s v gd o m ，w eh a v ea c h i e v e dp a r i n gs v gd o c u m e n ta n da c c o r d i n gt ok n o w n i n f o r m a t i o na n dd a t a , w eh a v ea d a p t e dp r o g r a m m e dm o d et od y n a m i cc r e a t e s v g g r a p h i co b j e c ta n ds p e c i a lt o p i cs t a t i s t i c a l 3 d e v e l o p e dag r a p h i c s - l e t t e ri n f o r m a t i o ns y s t e mw h i c hi sb a s e do ns v g t e c h n o l o g ya n du n d e rw e bc i r c u m s t a n c e i th a sb u i l tm a p p i n gr e l a t i o n b e t w e e ns v gm a pa n dd a t a b a s e , a n dw h i c hc a l lc o m p l e t er e l a t i n ga n d q u e r y i n gf u n c t i o no fb o t hs p a t i a ld a t aa n dn o n - s p a t i a ld a t a t h es y s t e mh a s c o n t e n to f a p p l i c a t i o nr e q u i r e m e n tw i t hs o m es m a l lw e b g i s m a x i n - r u i ( c o m p u t e ra p p l i e dt e c h n o l o g y ) d i r e c t e db yp r o f e s s o rj i a n gk a i y a o k e yw o r d s ：s v g ( s c a l a b l ev e c t o rg r a p h i c s ) ，d o m o e u m e n to b j e c tm o d e l ) ， v e c t o rg r a p h i c s ，g r a p h i c s l e t t e ri n f o r m a t i o ns y s t e m l 西安工程大学学位论文知识产权声明 本人完全了解西安工程大学有关知识产权的规定，即：研究生在 校攻读学位期间学位论文工作的知识产权归属西安工程大学。本人保 证毕业离校后，使用学位论文工作成果或用学位论文工作成果发表论 文时署名单位仍然为西安工程大学。学院有权保留送交的学位论文的 复印件，允许学位论文被查阅或借阅；学校可以公布学位论文的全部 或部分内容，可以采用影印、缩印或其它复制手段保存学位论文。 ( 保密的学位论文在解密后应遵守此规定) 学位论文作者签名：弓菇 指导老师签名： 日期： 、 嚣童 s s 西安工程大学学位论文独创性声明 禀承学校严谨的学风与优良的科学道德，本人声明所呈交的学位 论文是我个人在导师指导下进行的研究工作及取得的研究成果。尽我 所知，除了文中特别加以标注和致谢的地方外，学位论文中不包含其 它人已经发表或撰写过的研究成果，不包括本人已申请学位或他人已 申请学位或其它用途使用过的成果与我一同工作的同志对本研究所 作的任何贡献均已在论文中作了明确的说明并表示了感谢。 学位论文与资料若有不实之处，本人承担相关责任。 学位论文作者签名：弓翩晶 - 日期：聊7 口弓纠 第一章绪论 1 1 课题背景 1 绪论 随着i n t e r n e t 应用的迅速普及和技术的日益发展，特别是“数字地球”研究 的兴起，原先基于c s 结构的g i s 面临着丰富的、具有无限发展潜力的崭新空间。 w e b g i s 是顺应这一趋势的、能在网络环境下充分施展g i s 才能的、能够提供更为 有效的服务的g i s 发展方向。，建立基予b s 的w e b g i s 服务能够充分利用大量的 w e b 资源，合纵连横，向更为广大的g i s 用户提供更为广泛的地理空问信息服务， 成为目前国际g i s 研究领域发展的主要趋势“1 。 为了解决空间数据之问共享与互操作问题，0 c c ( 开放式地理信息系统联盟) 建立了“开放式地理数据互操作规范”，推出了一个基于o p e ng i s 的数据模型和 x m l ( 可扩展标记语言) 的空问数据交换语言g m l ( g e o g r a p h ym a r k u pl a n g u a g e ，地 理置标语言) 。 g m l 是用于地理信息和地理参考信息传输、存储的一种x m l 编码语言，这些 信息包括地理要素覆盖区的空间和非空间属性信息。但是当前的浏览器还不能以 图形形式显示g m l 文件中描述的空间数据。w 3 c ( w o r l dw i d ew e bc o n s o r t i u m ，万 维网联盟) 推出的用于矢量图形的显示与传输的标准s v g ，正是为适应i n t e r n e t 应用发展的需要而制定的一套基于x m l 语言的可扩展矢量图形描述规范“1 。基于 ) 龇。的优势，s v g 格式的矢量图形具有许多其它矢量图形格式所无法比拟的优点， 可以很好的满足w e b g i s 对空间数据图形显示的要求，可以向用户提供多样化的、 直观易懂的、动态的图形用户界面，从而使它成为空间数据可视化的一种首选技 术。 1 2 课题的研究现状 1 2 1 $ v 6 的研究现状 s v g 是一种基于x m l 的、开放标准的二维矢量图形描述语言。由于它是基于 x m l 的，因此，具有x m l 的几乎所有优点。作为新一代w e b 矢量图形标准，尤其 在网络应用方面来说，s f g 具有支持用户与图形交互、文档自我描述性、可检索 性、图形对象可在分布式环境下创建并且和其它标准兼容性好的特点。同时s v 6 拥有广泛的厂商支持，用户不但可以通过下载a d o b e 公司免费的浏览器插件 s v g v i e w e r 来浏览s v g 矢量图形，还可以使用一些免费的开源项目在应用中集成 s v g 的各种应用，而且从发展趋势来看最终的标准浏览器将在其内部直接支持s v g 第一章绪论 矢量图形啪 自从w 3 c 提出s v g 的草案后，各大公司团体给予了高度重视。到现在已经出 现了多方面的应用及实现主要分以下三个方面 删： a s v g 的生成工具较知名的有a d o b e 的i l l u s t r a t o r l o 中内嵌了s v g 的输出； c o r e l 公司从c o r e l d r a w 9 开始就提供了输出s v g 的插件：另外还有很多从其它图形 格式文件向s v g 转换的工具。较实用的有u n i v e r s i t yo fn o t t i n g h a m 的 p o s t s c r i p t t o s v g 和f l a s h t o s v g 的生成工具等。 b s v g 的浏览工具a d o b e 的s v g v i e w e r ( 用于浏览器的插件) ；i b m 的 s v g v i e w ( 用j a v a 写的s v g 图形察看程序) 。它们实现了s v g 标准特征集中的大部分功 能 c s v g 的应用系统用s v g 表现地图，s v g 的可缩放性和文本可定位特性十分 适合电子地图的浏览和检索；而对于网页制作，s v g 在制作交互动画上和制作矢量 图形的优势将带给网页以全新的感受。一旦s v g 正式标准发布，浏览器( 如i e ) 内置 对它的支持，s v g 将会很快成为网络中图形交换的主要格式之一 目前，国外己经开发了许多s v g 的编辑工具、浏览器和应用系统。更为重要的 是，n e t s c a p e 公司和m i c r o s o f t 公司现在的网络测览器通过插件已经可以实现对 s v 6 文件的支持。许多知名的平面设计软件，如c o r e l p r a w 、i l l u s t r a t o r ，都开始 支持s v g 格式的转换，同时还出现了一大批的格式转换工具，其中还包括从现在流 行的f l a s h 格式向s v g 格式的转换工具。 国内在s v g 的编辑、生成工具及应用系统方面都还处于起步阶段，但也出现了 一些主要用于网页编辑的s v g 编辑生成工具软件，如方正画苑已经在其3 o 版本中 键入了s v g 的编辑输出以及转换功能，能够输出丰富的图形、图像和文字的设计效 果。还新增加了一些网页设计功能，包括可以为网页设置题目、设置是否允许缩 放，可以为页面上的对象设置书签和超链接，同时可以在页面上增加声音、影像、 动画和j a v aa p p l e t 等多媒体对象。相信在不久的将来会有越来越多的团体投入 s v g 的开发研究工作，使s v g 在网络上的应用更加广泛 1 2 2s v g 在w e b g i s 中的应用 w e b g i s 在空间数据处理领域中的重要地位已毋庸置疑，其核心技术是w e b 环境 下的矢量图形处理。作为w e b 环境下矢量图形处理技术中的佼佼者，s v g 在w e b g l s 中的应用已经成为国内外研究的热门课题之一。 目前，国内外对s v g 在w e b g i s 中的应用研究正在逐步深入，尤其是s v g 应用于 空间数据表现、统计数据表达、路径跟踪等方面，然而对于应用于空间分析和多 比例尺空间数据表达等方面的研究甚少。 国外已有把空间数据转换成s v g 的工具。如s v g m a p m a k e r 嵌) k m a p l n f o 中，可以 2 第一章绪论 转出图例和图层；o p e n s v g m a p s e r v e r 可以实现s h a p e 格式数据的转换。但这些只能 实现一些基本的地图操作，如缩放、漫游、图层控制等，对于查询或者动画效果 等高级操作需要再开发卜。 在国内，g v g 的研究虽然起步较晚，但经过一段时间的研究和发展，也取得了 一定的成果。国内学者也开始研究s v g 在w e b g i s 的应用，许多高校、科研机构和企 业也开发了一些s v g 应用于w e b g i s 的实例。 例如，武汉大学资源与环境科学学院结合地图符号的结构特征和s v g 的表达方 法，建立基于s v g 结构化的地图符号描述模型，利用该模型设计通用的地图符号， 并在c a r t o s y m b o l 地图符号设计系统和网页中进行了实现，解决了地图符号的共享 闯题“”；北京市地震局对s v g 技术实现地震数据图形化服务的讨论，说明s v g 技术 完全能够胜任地震数据图形化表示的需要，并且把s v g 技术作为图形化表示的方法 与传统的点阵图形文件或点阵图形流相比较来表示地震数据，具有很好的表现力 和互操作性“”；等等。 目前，国内在s v g 技术应用方面有相当成就的当数中科院遥感所的地网软件 g e o b e a n s 了，其中的地网图形系统就是采用s v g 技术来完成w e b g i s 基本功能需 求的。地网图形系统是地网软件的一个子系统，它支持包括s v g 在内的矢量图形以 及其他图形格式的转换和展示，其中矢量图形应用部分基本上都是运用s v g 技术实 现的。地网图形系统完成了基于s v g 技术的矢量图形分层显示和管理、空间数据和 非空间属性数据的双向可视化查询、统计数据的图形化分析、动态制图、空间数 据编辑等一体化管理。地网系统运用s v g 技术发布地理空问信息，并得到了很好的 运用和用户响应，它代表了当前国内在s v g 技术应用方面的重大突破。 本课题的目标就是在上述研究的基础上，运用s v g 技术，进行旨在直接支持g i s 应用的核心图形交互式操作算法的研究。 1 3 本课题的研究目标和主要创新 在w e b 环境下对矢量图形的获取、表现和应用是目前以及将来矢量图形技术 中的三大重要课题。将开放的矢量图形技术引入w e b 环境，并研究在w e b 环境下 的矢量图形应用课题是计算机软件领域中急需解决的技术问题。所以，研究w e b 环境下矢量图形的g i s 应用，具有明显的技术先进性和良好的应用前景。 1 3 1 本课题研究目标 a 研究s v g 核心技术，在d o m 的基础上建立s v g 文档的解析模型，通过 j a v a s c r i p t 脚本语言设计并实现一个基于s v g 技术的、能够实现w e b g i s 基本功 能需求的算法集。 b 通过对这些算法的调用，实现w e b 环境下矢量地图的表现、变换、对象拾 第一章绪论 取、快速定位、文本搜索、图层与图块控制、空间数据与非空间数据的绑定互查、 专题图生成等功能，完成基于s v g 技术的图文信息系统。 1 3 2 本课题的创新点 就本质来看，本课题研究的创新之处属于二次开发创新范畴。主要创新在于： a 图层与图块控制s v g 是基于文本的矢量图形格式，可以对组成整个图形 的图元按照不同的属性进行分组，通过对组元素的控制实现图形的分层或分块控 制，很好地改善了地图可视化表现的一些问题。 b 数据驱动产生s v g 图形s v g 是数据驱动的，也就是说，我们可以通过对 于s v gd o m 的操作，实现对s v g 文档的解析，并能够根据已有信息数据，采用编 程的方式来动态生成s v g 图形，可以大大提高图形产生的效率。 c 实现基于s v g 地图的基本计算算法设计并实现了基于s v g 电子地图的基 本计算算法。该算法完成了计算s v g 电子地图距离和面积比例尺的方法，并通过 鼠标交互在地图上任意选取点和区域，计算任意点之间的实际距离和任意区域的 实际面积。 d 开发了一个基于s v g 技术的、w e b 环境下的图文信息系统图文信息系统 主要是完成空间数据与非空间数据之间的映射、绑定以及互查。实现客户端地图 的基本操作，并建立前台地图与后台数据库的之间的关联映射关系，完成了空间 数据与非空间数据之间的关联互查功能，能够满足一些小型w e b g i s 的应用需求。 4 第二章课题研究的技术路线 2 课题研究的技术路线 在课题研究中，采用的技术路线可以归纳为图2 1 ，通过对s v g 文档的解析和 d o m 模型的研究，设计并实现了基于s v g 技术的d o m 编程算法，并将这些算法应用于 网络环境下的g i s 系统，完成了基于s v g 技术的图文信息系统。 图2 1 课题研究的技术路线图 2 1s v g 技术基础 2 1 1s v g 简介 s v g ，是可缩放矢量图形( s c a l a b l ev e c t o rg r a p h i c s ) 的简称，它基于 x m l ( e x t e n s i b l em a r k u pl a n g u a g e ) 可扩展标识语言，因此我们也可以称它为“可 扩展矢量图形”；它是一个全新的开放标准的矢量图形和动画格式，是基于x m l 图形的主要解决方案。其中，“可缩放( s c a l a b l e ) ”一词在图形图像技术上指的 是它不局限于一个固定的分辨率和大小，即可以在同一个网页中以不同的大小， 或观全局，或观细节；而在网络技术上，则指的是这一规范能够与其他规范相融 合，从而能满足更广泛的用户要求，并适合于更广泛的应用方式。“矢量( v e c t o r ) ” 是指规范中描述了直线、曲线等几何图形，而无需像p n g ， j p e g 等图像格式那样 逐像素进行描述，因此，s v g 图形可以随意缩放而不影响其质量。“图形( g r a p h i c s ) ” 是指它提供了对矢量以及矢量栅格混合图形的描述，因而它填补了大多数基于 x m l 的置标语言对复杂图形描述的空白“o 。 s v g 不同于传统的二元( 平面) 图像和动画制作，它使用简单的一元( 文本) 语 句，完成矢量图像，以及诸如色彩变化、对象运动、滤镜和遮照、添加声音等各 式动画效果。它支持三种对象格式：矢量图形、图像和文字。根据功能不同，可 以将s v g 的主要对象归为基本要素对象和页面描述功能对象两大类( 见图2 2 ) 。 5 第二章课题研究的技术路线 图2 2s v g 的基本要素和页面描述功能对象 从本质上说，s v g 其实是x m l 的一个应用。它符合x m l 推荐标准中的命名空间， 所以能和其它的x m l 应用语言一起在适当的浏览器中使用。 要向用户提供w e b 图形，有两种主要的选择第一种选择，是在i f f m l 或x i - i t i l 中嵌入我们熟悉的位图图像，这种图像是由一些单独的各具特征的像素组成的， 通常是静态的j p e g 、p n g 、6 i f 图片，或者是动画g i f ；另一种选择。是审作并显 示s v g 图形，他们是由矢量图形构成的在某种意义上，一幅s v g 图片也是一个s v 6 文档，任何一个看到过并理解了s v g 元素是如何定义图形设计的程序员都能编程做 出s v g 图片，或者利用一个w e b 图片设计器来创建s v g 图片，例如利用a d o b e i l l u s t r a t o r 用户就能建立动态的、个性化的图片“”。但是这两种选择呈现出的效 果以及图形的可编辑性、可操作性等方面差异很大，其具体区别在2 1 3 章节作以 介绍。 2 1 2s v g 的特点 s v g 作为新诞生的网络图形标准，其独特的优势和特点表现在以下几个方面 e - 卿： a 基于x m l 标准) 【m l 是公认的拥有无穷生命力的下一代网络标记语言。作为 一种可扩充的符号定义语言，它突破了耵m l 固定标记集合的约束，使文件的内容 更丰富、更复杂、更容易组成一个完整的体系。捌l 语言具有比h t m l 语言更好的管 理和交互能力。s v g 在最开始设计的时候就基于x m l 的，这使得它具有一种先天的 优势，因此也能在s v g 中开发出更多新的功能以提供更多的网络服务。图形中的数 据可以根据需要，由应用程序读取、修改和统计，并最终在图像中显示，这些应 6 第二章课题研究的技术路线 用是目前h t m l 及相关图像技术远不可及的。同时，s v g 的语法和结构是基于x m l 的， 因此它本身也具有很好的可扩展性。 b 高质量的图像s v g 作为矢量数据格式，与栅格图像相比，它可以自由缩放 而不损失图形质量。同时，它除了具有矢量图像的优势外，对栅格图像也能进行 正确的表达，比如：用x l i n k ( 扩展联接) 标签，s v g 可以调用栅格图像。 c 文本格式s v g 可以不用任何图像处理工具，仅用通用的文本编辑软件，如 记事本就可以生成图像；也可以利用编程语言通过d o m 编程来实现；在线的s v g 图 像也可以根据数据库中的关系量实时地进行动态改变。同时，s v g 图像中的文字也 是文本格式，这不同于一般图像和动画中的文字( 一般图像和动画中的文字实质 上都是图像，是基于像素的) 。因此，s v g 文档中的文字可以被搜索引擎作为关键 词进行搜寻，图像中的文字也可以被用户浏览器进行查找。同时，因为是文本的 图形格式，s v g 能够很好地实施跨平台工作，还可以解决相关的外部输出、色彩模 式等问题。 d 文件较小因为是文本化的矢量格式，s v g 图像比g i f 和j p e g 等图像格式具 有更小的文件大小，上载和下载速度更加迅速。如表2 1 是坐标为( 6 7 6 4 8 5 ， 3 2 0 7 1 ，2 9 2 0 8 2 ，2 2 3 4 3 6 ) 、样式为( s t r o k e ：# i f l a l 7 ；s t r o k e - w i d t h ：0 7 0 5 6 ： f i l l ：# f f f 5 0 0 ) 的矩形，采用不同图像格式进行存储时数据量的比较结果，从中 我们可以明显地看出s v g 数据量最小的特点。 表2 1 矢量图与位图存储数据量的比较表 e 开放性由于s v g 是w 3 c 组织制定的标准，是开放的、公用的，而且任何想 阅读其规范的人都可以得到它，便于共同开发，这有利于它的发展。 f s v g 图像可以是动态的、可交互性的及其兼容性在s v g 中，动画通过直接 声明( 比如在s v g 里嵌入s v g 动画元素a n i m a t e 等) 或者通过脚本语言进行定义或触 发。s v g 可以使用脚本语言来完成比较复杂的应用，通过脚本语言调用s v gd o m 以 访问或控制所有的元素、属性和属性值；事件处理器如o n m o u s e o v e r ，o n c l i c k 等也可以应用到s v g 图形对象上。同时，由于s v g 和其它w e b 标准完全兼容和同步， 如x m l 、c s s 2 、x s l t 、d o m 2 、h t m l 等。因此，在同一w e b 页面上，有些特性如脚本 编程等，可以同时应用在h t m l 和s v g 元素上。 g s v g 支持矢量滤镜位图图像可以使用大量的滤镜效果、纹理贴图和空间幻 想等特效，用以加强图像的视觉效果，这是位图图像被广大用户所采用的原因之 7 第二章课题研究韵技术路线 一。随着s v g 矢量图像格式的出现，这种局面发生了变换。利用s v g 支持的矢量滤 镜，可以创作出各种滤镜效果，并且更重要的是这些滤镜效果在出现后是可调的。 通过分析可以发现s v g 所使用的矢量滤镜并不直接针对像素进行操作，而是作为对 象的一个独立属性存在于文件中，对图像滤镜效果的修改仅仅是调整图像的这一 属性即可。 2 1 3 矢量图与位图的区别 当前计算机图形分为位图( 又称点阵图或者栅格图像) 和矢量图形两大类。 他们是两种用途不同的图形格式，然而矢量图形存在的天然优势，使其在w e b 上 的图像应用方面逐渐占据了重要地位。 a 位图及其特性位图图像，如g i f 、j p e g 和p n g 等，使用一个二维数组来 表示图像的信息，在这个二维数组中的每一个元素直接或间接地包含了一个象素 的信息( 压缩的图像格式并不完全是这样的) ，这些像素点可以进行不同的排列 和染色以构成图样。放大位图时，可以看见赖以构成整个图像的无数单个像素方 块，因为放大位图尺寸的效果是增加像素，从而使线条和形状显得参差不齐；缩 小位图尺寸也会使原图变形，因为它是通过减少像素来使整个图像变小的同样， 由于位图图像是以捧列的像素集合体形式创建的，因此无法进行对象拾取。 位图是与分辨率有关的，即在一定面积的图像上包含有固定数量的像素。因 此，如果在屏幕上以较大的倍数放大显示，或以过低的分辨率打印位图图像，都 会出现锯齿现象图2 3 中，我们可以清楚地看到图像局部放大的效果图。 位图文件的大小与图像大小以及颜色等有重要的关系。在非压缩前提下，图 像面积越大，文件的字节数越多；图像的色彩越丰富，文件韵字节数也越多。 b 矢量图及其特性矢量图形文件中的图形元素称为对象，每一个对象都是 一个自成一体的实体，它具有几何属性和诸如颜色、形状、轮廓、大小和屏幕位 置等非几何属性，并且每个对象在维持原有清晰度和弯曲度的同时，能够多次移 动和改变它的属性，而不会影响图形中的其它对象。 矢量图形与分辨率无关，可以将它缩放到任意大小。同时，矢量图形文件具 有这样的特点：一般的图形，存成矢量图形文件比存成位图文件要小很多；矢量 图形文件的大小与图形中元素的个数以及每个元素的复杂程度( 元素的复杂程度 指的是这个元素的结构复杂度，如五角星就比矩形复杂、一个任意曲线就比一个 任意直线复杂) 成正比，而与图形面积以及色彩的丰富程度无关：矢量图可以轻 松转化为位图，而位图转化为矢量图就要经过复杂而庞大的数据处理，并且生成 的矢量图的质量绝对不能和原来的图形比拟。 第二章课题研究的技术路线 a 原始j p g 图像 b 局部放大后的j p g 图像 c 原始s v g 田像 d 局部放大后的s v g 圈像 图2 3 位图和矢量图的局部放大效果对比 2 1 4s v b 与常见矢量图形格式的比较 目前，常见的矢量图形格式有；s f 、s v g 、g m l 和v m l 等等，他们都是优秀 的矢量图形格式其中g m l 、v m l 和s v g 都是基于x m l 的用来描述矢量图形的标记 语言，g m l 在表示实体空间信息的同时加入了实体的其它属性信息，是表示实体 的空间信息和属性的编码标准，但它并不支持直接显示图形；w l 和s v g 是两种 比较好的矢量图形格式，是在表示图形矢量信息的同时加入了图形的显示信息( 即 以什么样的样式显示矢量图形) ，虽然v m l 有i e 的支持，而s v g 需要浏览器插件 才能显示，但是s v g 是综合了v m l 的优点之后推出的，是国际标准，比v m l 具有 更多的优点和更广阔的发展前景。 s w f 和s v g 作为当前w e b 上常用的矢量图形格式。主要从以下3 个方面对他 们进行比较分析： a 开放性s w f 是由m a c r o m e d i a 公司所有的一种专有格式。m a c r o m e d i a 发布 的免费软件开发工具包( s d k ) ，是为了方便任何开发人员可以创建能输出s w f 文 件的软件。但是，根据许可协议：“m a c r o m e d i a 可以在任何时候改进、修改、变 更和停止s d k 的发布或生产。”显然，s w f 在技术上虽然是一种开放格式，它的状 态仍决定于其拥有者的行为“”。 s v g 是由w e b 技术的国际化标准组织w 3 c 发布的一种开放标准，同时也是一 9 第二章课题研究的技术路线 种共用的图形格式，任何想要阅读其规范、了解其发展状态的人都可以的网络上 找到它，这说明了s v g 是一种完全公开的矢量图形格式“”。 b 可扩展性s w f 中提供了处理x m l 文档的x m l 对象，并能通过j a v a s c r i p t 来访问其他应用程，s v g 的可扩展性则来自于其x m l 机制。主要表现在与其他技 术集成的方面，s v g 充分利用了d o m 、c s s 、x l i n k 、s m i l 等技术，可实现与其他 网络技术的无缝结合，如在s v g 中可方便地加入任何附加信息，调用与这些信息 相关联的应用程序。可以看出，这两种集成方式的层次是不同的，s v g 是这些技 术家庭中的一员，与其他技术天生地熔合在一起，而s w f 只是提供了处理x m l 的 访问接口盟l 。 c 性价比s w f 格式的图形是在一定的软件协助下创建的，而一套正版的软 件需要至少几万元的资金。当然，s v g 格式的图形也需要有软件支持，但也可以 由任何文本编辑器来创建和编辑，这就给小型的w e b 应用节省了财力，具有较高 的性价比 所以。s v g 作为一种正在推广的为网络矢量图形方案，具有很好的技术支持 和应用前景。 2 2s v g 数据结构分析 2 2 1 基本数据结构 从总体上看，s v g 图形规范的数据结构是使用x m l 语言描述的“树型”结构。 以作为树结点的文档结构元素来描述对象及其属性，通过文档结构元素树定义图 形文件的逻辑结构，形成s v g 图形的文本对象模型( d 伽，d o c u m e n to b j e c tm o d e l ) s v g 规范提供了图形编组、建立模板以及引用图形和位图图像的功能支持，提高 了图形对象的可重用性。 图2 4 展示了s v g 文档的“树型”结构示意图( 图中矩形表示节点，椭圆表 示节点属性) 。包括文档的根节点、若干图形基本元素和图形组元素。 图2 4s v g 数据结构 1 0 第二章课题研究的技术路线 具体地说，s v g 中规定了3 种基本图形对象，即矢量图形( 如圆c i r c l e 、矩 形r e c t 、路径p a t h 等) 、图像( i m a g e ) 和文本( t e x t ) 其主要的基本文档结构 元素包括s v g 、d e f s 、d e s c 、u s e 、t i t l e 、g 、s y m b o l 和i m a g e 八种，含义简述如 下： a s v g 元素：是s v g 图形的容器，用于描述一个s v g 文档片断，是s v gd o m 的根元素。 b d e f s 元素、s y m b o l 元素和u s e 元素：提供了对图形对象进行引用的功能 支持。其中 ( 1 ) d e f s 元素：是用于定义被引用对象的容器元素，可以将被引用的所有元 素作为一个元素集合在一起。定义在该元素中的对象不会被显示，只有在被引用 时才显示； ( 2 ) s y m b o l 元素：专门用来定义图形模板对象，它所定义的模板元素是可以 被引用的对象。这些被定义的元素在定义后并不像其它一些图形元素那样直接被 显示出来，只有在被引用时才显示。 d e f s 元素和s y m b o l 元素都可以用来定义被应用对象，但是s y m b o l 元素是 d e f s 元素的子元素，d e f s 定义的对象仅仅做到了对象的重用，而s y m b o l 定义的 对象可以具有v i e w b o x 和p r e s e r v e a s p e c t r a t i o 属性，以允许定义的对象可以缩 放到任意的大小，通过u s e 元素引用可以把s y m b o l 元素定义的图形当作模板来填 充区域性图形。 ( 3 ) u s e 元素：用于引用图形模板元素，经常与与d e f s 和s y m b o l 这样的元素 配合使用，来实例化前面己经定义但还没有表现的图形对象。同样，对于那些需 要定义、使用和复用对象的复杂图形应用来说，u s e 元素是非常强大的。s v g 标准 推荐将被引用的元素尽可能定义在d e f s 容器元素中姗。 c t i t l e 元素：可以应用于整个s v g 文档、一个容器元素或一个单独的图形 元素。在t i t l e 元素中的文本不会表现为图像的一部分，但是可以通过另外的方 式由一个代理或显示设备使用。它对于那些篇幅较长的复杂s v g 文档特别有用， 可能有益于易访问性( 利用适当的显示软件) “”。 d d e s c 元素：用于提供整个图画或其主要元素的文本描述。与t i t l e 元素 那样，d e f s 元素不会表现为图像的一部分，而是通过应用程序或其他软件代理作 用于它t i t l e 和d e s c 元素可以作为t o o l t i p s 显示，或者与a d o b es v gv i e w e r 一样，直接在s v g 元素最外部的t i t l e 元素在浏览器窗口中显示为标题( 当直接 浏览s v g 时，而不是嵌入在h t m l 中) “” e 。g 元素：是一个容器对象，将相关的图形对象组合起来。在大型或者复杂 的图像中使用g 元素创建结构是非常有用的。这些组可以给定一个唯一的i d ，用 第二章谭题研究的技来路线 于以后的引用，而且为了进一步的标识和处理，也可以为他们指定t i t l e 和d e s c 元素。与d e f s 不同的是，在可见性属性控制下，该容器所包含的元素组可以直接 显示，也可以不显示；通过控制g 元素定义的图形元素组可见性属性的方法，能 够实现成组对象的隐显控制。 f i m a g e 元素：用于将其他图像文件包括在一个已定义的矩形中。这些图像 可以是诸如j p e 6 这样的位图格式，也可以是诸如s v g 这样的矢量格式。w 3 c 的s v g 规范表明“符合标准的s v g v i e w e r 至少需要支持p n g 、j p e g 和s v g 格式文件”。a d o b e 的s v g 播放程序还支持g i f 文件“ 。 2 2 2s v g 图形对象及其x m l 表述 s v g 基本图形对象的数据结构格式可以抽象为具有下列格式的文本串： 例如： 绘制了一条贝塞尔曲线，由 起点( 7 5 ，l o o ) 和终点( 1 5 0 ，5 0 ) 以及2 个控制点c 、s 命令的位置确定，其样 式定义为无填充色、边框为蓝色、边宽为5 个像素p a t h 是该路径对象定义的关 键字，d 和s t y l e 分别定义了该对象的几何属性和非几何属性 组合的s v g 图形对象由包容若干个基本或组合对象的对象组结构描述，其抽 象结构表示如图2 3 中“图形组元素”的定义部分。这种结构不仅可以并列使用， 也可以多级嵌套使用。 2 2 ，3s v g 元素的属性描述 s v g 支持利用各种样式属性来描述图形对象文档的属性参数，对元素的显示 效果进行定义。常用的s v g 样式属性定义有样式表( s t y l es h e e t ) 和表达属性 ( p r e s e n t a t i o na t t r i b u t e ) 两种方式，前者的优先级高于后者 a 样式表：通过s t y l e 元素在s v g 内容中嵌入样式表定义，使用时在元素上 声明对应c l a s s 属性指定该元素的样式属性 b 表达属性：直接在可样式化元素上指定s t y l e 属性，s t y l e 属性的定义是 一个样式列表，该样式列表描述了元素的样式属性。 表达属性是独立于样式表的，它通过在可设置样式属性的元素上定义相关的 表达属性来定义样式，标准中规定对于支持c s s 的用户代理，表达属性是通过转 化为对应的样式表生效的，而且表达