（教育技术学专业论文）浏览器矢量图形绘制工具的设计与实现.pdf

北京邮电大学硕士论文 浏览器矢量图形绘制工具的设计与实现 浏览器矢量图形绘制工具的设计与实现 摘要 近年来，网络教学平台发展迅速，其功能得到不断的加强和完善。 但是由于浏览器在图形处理方面存在的不足，这给教师在线编辑多媒体 教案带来许多不便。教师在制作多媒体教案时会因其操作过程复杂而放 弃编辑图片，从而影响了网络教学质量的提高。所以，开发能够灵活应 用于网络教学平台的绘图工具对于提高网络教学平台的易用性具有重 要的作用。 论文主要对矢量图形绘制工具软件的功能，设计与实现进行了描述 。论文首先就目前绘图工具的发展现状进行了调研和分析，通过对已有 软件的调查和分析不仅得出目前图形绘制工具在教学应用中存在的一 些问题，而且得出目前的绘制工具不能够与当前发展迅速的网络教学平 台进行整合应用。在此讨论的基础上，分析了能够应用于网络教学平台 绘图功能的多种实现方式。为了获得良好的平台无关性，本文所论述的 工具软件选择使用j a v a s c r i p t 来完成软件的制作。然后，论文主要讨 论了软件实现的功能以及基于s v g 矢量图格式和j a v a s c r i p t 脚本编程 实现这些功能的设计和实现。讨论设计和实现时，首先从总体上讨论了 软件的主要功能，整体程序架构设计以及对于教学软件所特有的考虑因 素。其次分为客户端和服务器端两个方面进行了详细的讨论。客户端部 分主要讨论了数据结构的设计，界面基本功能的设计和实现，以及图形 绘制过程的设计实现。服务器端部分首先讨论了客户端与服务器进行交 互的流程，其次就将本地图像保存到服务器，以及将服务器端图像文件 加载到本地浏览器的实现方式进行了讨论。 作为该浏览器图形绘制工具的设计与实现者，期望该工具能为网络 教学中图形绘制功能的发展提供一套参考的解决方案，为网路教育的发 展贡献一份力量。 关键词：直观性教学矢量图形s v gd o m 编程 北京邮电大学硕士论文浏览器矢量图形绘制工具的设计与实现 d e s i g na n di m p l e m e n t a t i o n o fab r o w s e rt o o ld r a w i n g v e c t o rg r a p h a b s t r a c t i nr e c e n ty e a r s ，w i t ht h er a p i dd e v e l o p m e n to fn e t w o r ke d u c a t i o n p l a t f o r m , i t sf u n c t i o n sh a v eb e e ns t r e n g t h e n e da n di m p r o v e dc o n t i n u o u s l y h o w e v e r , d u et os o m ei n a d e q u a c i e so ft h ew e bb r o w s e ri nt h eg r a p h i c s p r o c e s s i n g 血i sb r i n gal o to fi n c o n v e n i e n c et ot e a c h e r sd u r i n gm a k i n g o n l i n em u l t i m e d i al e s s o n so nn e t w o r ke d u c a t i o np l a t f o r m t e a c h e r su s e dt o g a v eu pe d i t i n gp i c t u r e sb e c a u s eo fc o m p l e xo p e r a t i o ns t 印d u r i n gc r e a t i n g m u l t i m e d i al e s s o n , t h u sa f f e c t i n gt h en e t w o r ki m p r o v e m e n to ft h ee d u c a t i o n q u a l i t y t h e r e f o r e ，t h ed e v e l o p m e n to ff l e x i b l ea p p l i c a t i o ns o f t w a r ef o r n e t w o r kt e a c h i n gp l a t f o r mw i l lp l a ya l li m p o r t a n tr o l ei ni m p r o v i n gu s e r s f e e lw h e nu s i n gn e t w o r kt e a c h i n gp l a t f o r m t h em a i nt h e s i so ft 1 1 i sp a p e l i st od e s c r i b et h ef u n c t i o n , d e s i g na n d i m p l e m e n t a t i o no f 廿l i sv e c t o rg r a p h i c sd r a w i n gt o o ls o f t w a r e f i r s t l y , t h i s p a p e rd i dw e l lr e s e a r c ha n da n a l y s i sa b o u tt h ec u r r e n ts t a t u so ft h eg r a p h i c s t o o l sd e v e l o p m e n t t 1 1 r o u g ht h ei n v e s t i g a t i o na n da n a l y s i sa b o u tc u r r e n t g r a p hd r a w i n gt o e ls o r w a r e s ，w ef o u n dan u m b e ro fp r o b l e m so ft h o s e s o f t w a r e si ne d u c a t i o n w ea l s of o u n dt h a tc u r r e n td r a w i n gt o o l sc a nn o tb e i n t e g r a t e dw i t ht h ec u r r e n tr a p i d l yd e v e l o p i n gn e t w o r ke d u c a t i o np l a t f o r m b a s eo nt h i sd i s c u s s i o n w ea n a l y s i sav a r i e t yo fw a y st oi m p l e m e n td r a w i n g f u n c t i o ni nn e t w o r ke d u c a t i o np l a t f o n n i no r d e rt oo b t a i nag o o d p l a t f o r m i n d e p e n d e n tn a t u r e ，s o f t w a r ed i s c u s s e di nt h i sp a p e rc h o o s e st ou s e j a v a s c r i p tw a yt oc o m p l e t et h es o f t w a r ed e v e l o p m e n t a n e rt h a t ，t h i sp a p e r f o c u s e do nd i s c u s s i n gt h es o f t w a r ef u n c t i o n s ，a sw e l la sd e s i g na n d r e a l i z a t i o no ft 1 1 i ss o f t w a r eb a s eo nt h es v gv e c t o rg r a p ha n dj a v a s c r i p t s c r i p t i n gl a n g u a g e m e l ld i s c u s s i n gt h e d e s i g na n di m p l e m e n t a t i o n ，t h ep a p e l f i r s t l y d e s c r i b e dt h em a i nf u n c t i o n so ft h es o f t w a r e t h eo v e r a l lp r o c e d u r a l f r a m e w o r ko ft h i ss o f t w a r e ，a sw e l la ss p e c i f i cc o n s i d e r a t i o n sa b o u t e d u c a t i o n s e c o n d l y , t h ep a p e l d i s c u s s e dt h ed e s i g na n di m p l e m e n t a t i o ni n t w oa s p e c t s ：t h ec l i e n t s i d ea n ds e r v e r - s i d e d i s c u s s i o no fc l i e n t s i d e 4 北京邮电大学硕士论文 一 浏览器矢量图形绘制工具的设计与实现 i n c l u d e st h em a j o rd a t as t r u c t u r e sd e s i g n ，i n t e r f a c e sd e s i g na n df u n c t i o n s r e a l i z a t i o n ，a sw e l la st h ep r o c e d a r eo fd r a w i n gv e c t o rg r a p h i c s d i s c u s s i o n s o fs e r v e r - s i d ef i r s t l yr e f e rt oi n t e r a c t i o nf l o wb e t w e e nt h ec l i e n ta n ds e r v e r s e c o n d l y p r o c e d u r ea b o u ts a v i n gl p e a li m a g e st ot h es e r v e ra n dr e l o a d i n g i m a g ef i l ei n t ot h el o c a lb r o w s e rf r o ms e r v e r - s i d ea r ed i s c u s s e d a sd e s i g n e ra n dd e v e l o p e ro ft h i sv e c t o rg r a p h i c sd r a w i n gt 0 0 1 ie x p e c tt h a t t h i sd r a w i n gt o o lc o u l dp r o v i d ear e f e r e n c es o l u t i o nf o rt h ed e v e l o p m e n to f g r a p h i c sd r a w i n gc a p a b i l i t i e so nn e t w o r ke d u c a t i o np l a t f o r ma n dd os o m e c o n t r i b u l ：i o nt ot h ed e v e l o p m e n to fn e t w o r ke d u c a t i o n k e yw o r d s ：v i s u a le d u c a t i o nv e c t o rg r a p h i cs v gd o m p r o g r a m m i n g 5 北京邮电大学硕士论文浏览器矢量图形绘制工具的设计与实现 图1 1 传统绘图过程示意图1 0 图2 1d r a w t o o l s 绘图软件示意图1 l 图2 2 几何画板示意图1 2 图3 1h t m l 的树形结构图1 7 图4 1 图形数据结构u m l 图2 2 图4 2 坐标系示意图2 4 图4 3s v g 坐_ j ；j i 系统2 6 图4 - 4 软件界面示意图2 7 图4 5 菜单示意图2 9 图4 - 6 工具栏示意图3 0 l 目4 7f c k e d r r o r 界面3 ：! 图4 8 集成本软件后的f c k e d i t o r 图示3 4 图4 - 9s t r u t s 实现的m v c 框架“”3 9 图5 1 改进后的出题流程图4 l 图5 2 软件应用举例示意图一4 2 图5 3 软件应用举例示意图二4 3 图5 - 4 软件应用举例示意图三4 4 图5 5 软件应用举例示意图四4 5 7 北京邮电大学硕士论文 浏览器矢量图形绘制工具的设计与实现 独创性( 或创新性) 声明 本人声明所呈交的论文是本人在导师指导下进行的研究工作及取得的研究成果。尽我所知， 除了文中特别加以标注和致谢中所罗列的内容以外，论文中不包含其他人已经发表或撰写过的 研究成果，也不包含为获得北京邮电大学或其他教育机构的学位或证书而使用过的材料。与我 一同工作的同志对本研究所做的任何贡献均已在论文中作了明确的说明并表示了谢意。 申请学位论文与资料若有不实之处，本人承担一切相关责任。 本人签名： 垂签垒日期：芝塑：圣：! 兰 关于论文使用授权的说明 学位论文作者完全了解北京邮电大学有关保留和使用学位论文的规定，即：研究生在校攻读学 位期间论文工作的知识产权单位属北京邮电大学。学校有权保留并向国家有关部门或机构送交 论文的复印件和磁盘，允许学位论文被查阅和借阅；学校可以公布学位论文的全部或部分内容， 可以允许采用影印、缩印或其它复制手段保存、汇编学位论文。( 保密的学位论文在解密后遵守 此规定) 保密论文注释：本学位论文属于保密在一年解密后适用本授权书。非保密论文注 释：本学位论文不属于保密范围，适用本授权书。 本人签名： 导师签名：! 二堑绛 2 北京邮电大学硕士论文 浏览器矢量图形绘制工具的设计与实现 第一章研究背景弟一早研咒阿京 1 直观性教学在中小学教学中的重要作用 中小学生的身心发展具有规律性。首先是身心发展的个别过程和特点的出现具 有一定的顺序性。例如，儿童总是由具体思维发展到抽象思维，从机械记忆向意义 记忆发展，先有喜，惧等一般感情，而后有理智感，道德感等。其次，中小学生的 身心发展又是具有阶段性的，前后相邻的阶段是有规律更替的，在前一阶段准备了 向后一阶段的过渡。 。直观抽象一式教学思路是一种着眼于从直观感知发展到形成抽象概念这 一变化过程的教学思路。其中，包括“直观抽象”式和誓直观抽象直 观 式两种。“直观抽象 式教学思路的思维基础是人类认知的基本思维规律 ，即从具体思维到抽象思维发展的规律。“直观抽象一式教学思路的特点主要 有以下几点。 1 从直观入手，符合中小学学生以形象思维为主要思维方式的特征，能有效帮 助学生理解、记忆教学内容，有利于减缓教学的坡度、降低教学的难度，提高学习 质量。 2 直观感知教学内容形象、生动，有利于在课堂教学的准备阶段有效地激发起 学生的学习积极性，奠定课堂教学的心理基础。 3 教学过程的核心是教学内容从直观到抽象的转换过程，这正是训练、培养学 生的抽象思维能力的最好时机和过程。 在实际的教学过程中，直观性教学的特点主要表现在以下四个方面： 1 重视教具的应用 教师在教学过程中应重视教具的应用。通过引导学生进行观察，帮助学生发现 事物的本质特征，特别是对较抽象的教学内容，通过直观教学，使其具体化、形象 经，化抽象为直观。如在“正方体的认识 一节教学中，为了让学生认识正方体除 具有长方体的特征外，还具有自己的特性，教学时可制作一个活动的长方体框架模 型，通过长方体转化为正方体的演示，使学生认识到长方体和正方体之间的联系和 区别，加深学生对“正方体是一种特殊的长方体 这一概念的理解。教师在选择教 具时，应根据教学内容进行选择，所选教具应形象、生动、鲜明，并为儿童所熟悉 北京邮电大学硕士论文浏览器矢量图形绘制工具的设计与实现 2 重视学生的动手操作 在教学中，教师应多给学生用学具摆一摆、拼一拼、分一分等动手操作的机会 ，使学生在动手操作中感知新知，获得表象，理解和掌握有关概念的本质特征。如 在教学中，可让学生通过动手画、量、折叠、剪拼几何图形，做一些立方体模型， 使学生感知几何形体的形成过程、特征和数量关系。如学生在用圆规画圆时，通过 固定一点、确定不变距离、旋转一周等操作，对圆心、圆的半径和圆的特征，怎样 画圆就会有较深刻的感性认识。 3 重视直观演示和归纳抽象 教师在教学活动中，应从直观入手揭示事物的特征及数量关系，引导学生通过 分析、归类、综合等方法进行抽象概括，从而得出正确的结论。如在教学“加法 概念时，教师可先进行直观演示：岸边有5 只鸭子，水里有3 个鸭子。水中的鸭子 缓缓游向岸边。问学生岸边一共有几只鸭子? 通过简单、生动的演示，引导学生抽 象出“把两个数合并起来求一共是多少的计算叫加法 这一概念。 4 处理好直观性与抽象性的关系 要求教师在教学中正确处理直观性与抽象性的关系。直观是手段，抽象是直观 的发展。不能从抽象到抽象，使学生难以理解教学内容，也不能为直观而直观，把 教学仅仅停留在直观演示上，而是在加强直观演示的基础上，帮助学生归纳出事物 的本质特征及数量关系。随着学生年级的升高，抽象思维能力的增强，可逐渐减少 学生对直观演示的依赖性，提高学生的抽象思维能力。 通过以上的讨论可以看出在教学过程中，直观性教学方式发挥着极其重要的作 用。这种重要性不仅表现在常规的课堂教学过程中，而且也表现在当前快速发展的 网络教育中。 网络教育的本质是h 1 ：教的行为和学的行为的时空分离。这一本质决定了远程 教学的教学过程与传统教育的教学过程不同。在传统课堂上，教和学是在教师与学 生面对面的人际交互过程中发生的，教师可以通过观察和交流及时了解学生的学习 情况。而在远程教育中，为了确保在教师和学生时空分离状态下完成教学任务，教 学机构要把教学信息准确地传递给学生。这就造成了学生和教师沟通上的不方便， 这时网络教学资源的直观性将比常规课堂中教材的直观性产生对教学效果更加明显 的影响。所以说在网络教学中，制作内容丰富，直观生动的电子教材对于促进网络 教育的发展有着很重要的作用。 2 网络教学平台的发展对绘图功能带来的新需求 近年来，网络教育技术发展迅速，其功能得到不断的加强和完善。其中基于b s 9 北京邮电大学硕士论文浏览器矢量图形绘制工具的设计与实现 架构的教学平台的功能逐步的加强与完善，并且在相关教学领域发挥了重要的作用 。但是，由于浏览器在绘图功能方面的不足，教师在教学过程中制作图文并茂的教 案时，操作复杂，工作量较大。这给在线教学带来了很多的不便，例如，由于制作 过程复杂，不免会造成教师制作的电子教材中图形数量减小，从而不能充分发挥直 观性教学的重要作用，不利于学生对抽象学科的学习。这无疑会影响学生听在线学 习的效果，从而对网络教育质量造成影响。 为解决b s 架构在线教学平台在图形绘制方面的不足，本文设计并实现了一个 基于s v g 矢量图格式的浏览器绘图工具，解决教师在网络教学平台下进行日常教学 的过程中遇到的下列难题： 1 操作复杂：传统制作电子教材时，如果要在网页中插入图片，其过程如图 一所示： i 絮喜监图i 【保存琳地强l 、，。、 1 _ - _ _ _ _ - _ _ _ - - _ _ _ _ _ _ _ - _ - _ - _ _ _ _ 一， _ _ _ _ _ _ - _ _ - - _ _ - - - _ - - - _ _ _ - _ ， 田一固一 图i = i 传统绘图过程示意图 2 缩放失真：在万维网历史的大部分时间里，浏览器显示的图形都是光栅格式 的。在光栅图像( 如g i f 或j p e g 图像) 中，文件包含图像中每个像素的颜 色值。浏览器读取这些值并做出相应行动。它仅认识到单独的部分，而没有整 体概念。 3 文件体积大：光栅图像文件的体积一般都很大，使网页反应速度降低。在 浏览网页时，往往由于页面包含的图像文件太多，使得网页延迟比较严重。这 无疑会对学生的学习造成影响。 可见，这样的过程不仅繁琐，同时容易出错，造成问题描述与插图内容不符等 错误情况，给教师的工作，学生的学习带来很多的不方便，本文针对以上问题，设 计并实现了一个基于s v g 矢量图格式的浏览器插件工具，可以很好的解决以上提到 的问题。利用本论文所述绘图工具插件，则可以将上述绘图步骤降低为三步。 l o 北京邮太 目论文览g * 圈* mr a ”与实现 第二章目前绘图工具的发展现状调查 2l 教育绘图软件的发展现状 2 1ld r a w t o o ls 函数绘图软件 可咀绘制任意函数的函数绘图软件其主要特点是： 1 支持直角坐标和极坐标的绘制： 2 支持图形的全屏显示； 3 支持在一定范围内求最大( 小) 值和数值跟踪； 4 支待自建函数库文件。 图2 - ld r a w t o o l s 培田软件示意囤 2 12 几何画板 几何画板是人民教育出版社向中学师生推荐使用的动态几何工具，适用于数学 、平面几何、物理的矢量分析、作图，函数作图。其主要特点是： 1 完全符台c a i 演示的要求，能准确地、动态地表达几何问题。 2 它特别适合用来进行几何交流、研究和讨论。人们由此把它称之为“动态 北京# 电大学碗论!浏览矢量圈* 制i a 的设h g 实现 黑板匕 3 操作简单。一切操作都只靠工具栏和菜单实现，而无需编制任何程序 2 2 浏览器绘图的现状 图2 - 2 脯画板示意图 2 2 1 基于j a v a s c r i p t 的实现方式 j a v a s c r i p t 是一种脚本语言( s c r i p t i n gl a n g u a g e ) ，或者称为描述语言。通 过j a v a s c r i p t 可以使网页能够具有交互性，使其能够包含更多活跃的元素。嵌入 h t 札页面的客户端j a v a s c r i p t 语句可以相应用户的事件如鼠标单击表单输 和页面导航。 基于j a v a s c r i p t 的实现方式正式利用了其能够响应用户操作事件的特点。这种 绘图软件利用事件响应机制，通过m 编程的方式动态的操作网页元素，从而实现 图像绘制的效果。由于当前没有标准化的浏览器图形格式，所以一种常见的实现就 是通过模仿的方式去显示图形。例如对以一条直线的显示，其实质并不是一个图形 北京邮电大学硕士论文浏览器矢量图形绘制工具的设计与实现 组成的，而是有一些有序排列的d i vh t m l 元素组成。这种方式可以做到很好的平台 无关性。但是这种实现方式的缺点也是显而易见的，就是对于一个简单的图形，其 会占用很多的d i v 元素。当图像很多时机器的反应速度将明显的受到影响。 当前比较主流的适用于浏览器的图像格式有v m l 和s v g 。前者是微软公司提出 的一种图像格式。由于当前i e 浏览器是市场份额最大的浏览器，所以这种方式的 应用很广泛。但是其缺点是不能跨越浏览器。由于其是一种不开放的标准，所以不 能在其他浏览器中显示这种图像。而s v g 是一种有w 3 c 提出的矢量图格式，这种格 式最大的特点就是它是一个开放的标准。目前发展迅速的f i r e f o x 浏览器已经可以 默认支持显示s v g 格式的图像。而且可以通过在i e 浏览器中安装插件后也可以显示 。由于以上的原因，其的发展前景很好。此外s v g 支持响应事件的特点，支持脚本 语言的特性为其作为一种浏览器绘图的实现提供了有利条件。 2 2 2 基于插件的实现方式：a c t i v e x a c t i v e x 控件是微软的一项网络扩展技术，a c t i v e x 技术的重要组成部分之一 ，其前身是o l e 控件。从技术上讲，a c t i v e x 控件就是一个用以扩展w e b 结构c s 两端功能的动态连接库，他基于c o m 服务器进行操作，可以嵌入到宿主应用程序中 。 由于a c t i v e x 控件技术面向的是一个高度异构的应用环境一一i n t e r n e t ，所以 a c t i v e x 控件是与平台无关的。即用一种协议开发的a c t i v e x 控件无需修改就可以 应用于另一种开发工具，如同使用w i n d o w s 通用控件一样，从而实现快速高效的软 件重用。其基本思想是：使用a c t i v e x 控件，来构筑包括从与用户交互和适应c o m 的 事务处理监视器到w e b 服务器、全部实现自动化的机构。 a c t i v e 平台包括两大部分：a c t i v es e r v e r 和a c t i v ec l i e n t 。a c t i v es e r v e r 实际上是中间层。使用组件或a c t i v e 服务器页面，来提供用于业务逻辑和主要应用 处理的场所。a c t i v e s e r v e r 的技术，其核心是n ts e r v e r 、m i c r o s o f t 事务处理服务 器、数据管理服务、目录服务、w e b 服务以及网络服务。事务处理服务器是把线程 产生和数据库多重化等传统的t p 监控功能与m i c r o s o f t 的基于组件的编程模型结合 起来。数据管理服务等a c t i v e 平台的其他组件是用o l ed b 和o d b c ，访问d b 2 、 o r a c l e 、s q ls e r v e r 等的数据源。目录服务是在d c o m ( d i s t r i b u t e dc o m ，分布式c o m ) 的周围，提供目录服务层，这样使远程对象在网络上能相互搜索。w e b 服务以 i n t e r n e t 信息服务器为中心进行构筑，它为服务器上的w e b 应用开发，提供脚本生成 ( s c r i p t i n g ) 机构。网络服务以d c o m 为中心进行构筑，通过以同步m s - r p c 为中介的 北京邮电大学硕士论文浏览器矢量图形绘制工具的设计与实现 网络，使之能够连接控件。 a c t i v ec 1 i e n t 是一种交叉平台。m i c r o s o f t 的技术纵然是独家所有，但也希望 将这种技术向多个0 s 开放。具体实施计划是使用脚本引擎( s c r i p t i n ge n g i n e ) 。 这种脚本引擎是由标准的h t m l 和带有m i c r o s o f t 特色的j a v a 虚拟机( j v m ) 、 m i c r o s o f t 的v b s c r i p t 与j s c r i p t 所构成的。a c t i v ec l i e n t 组装进了m i c r o s o f t 的i e3 0 和4 0 ，通过a c t i v e x ，可以变成用户的c s 应用的一部分。 从清一色采用w i n d o w s 的企业用户来看，a c t i v e 平台可以提供坚固的、具有可 缩放性的服务器应用开发平台。a c t i v e s e r v e r 在t p 监视器这类高端产品的场合，也 利用常见的一些工具和技术。因此，小型工作组和i n t r a n e t 应用不会超越a c ti v e s e r v e r 的能力。a c t i v e 平台的目标机虽是异种机环境，但由于过分依赖i e ，所以不 能驱动客户端。尽管在一些非w i n d o w s 平台上也推出了e x p l o r e r ，但最好的支持、 最新版本的e x p l o r e r 还是在w i n d o w s 上。 2 2 3 基于j a v a a p p l e t 的实现方式 a p p l e t ”】是一种在w e b 环境下，运行于客户端的j a v a 程序组件。它也是1 9 9 0 年代中期j a v a 在诞生后很快走红的功臣之一。通常，每个a p p l e t 的功能都比较单 一( 例如仅用于显示一个舞动的l o g o ) ，因此它被称作“小应用程序 。 a p p l e t 必须运行于某个特定的“容器”，这个容器可以是浏览器本身，也可以 是通过各种插件，或者包括支持a p p l e t 的移动设备在内的其他各种程序来运行。与 一般的j a v a 应用程序不同，a p p l e t 不是通过m a i n 方法来运行的。在运行时a p p l e t 通常会与用户进行互动，显示动态的画面，并且还会遵循严格的安全检查，阻止潜 在的不安全因素( 例如根据安全策略，限制a p p l e t 对客户端文件系统的访问) 。 总之，为了达到最大的平台无关性，本文在比较了以上三种主要解决方案的基 础上，选择了基于j a v a s c r i p t 的实现方式。主要考虑到一下两个方面： 1 平台无关性。j a v a s c r i p t 的出现，使得开发者在不用重新下载页面的情况下 就可以动态的改变网页的外观，这是w e b 技术上的一大进步。所以当前主流的浏览 器都实现了对j a v a s c r i p t 的支持。这种良好的用户基础使得基于这种方式的实现有 更好的平台无关性。 2 s v g 矢量图形的特点。s v g 作为w 3 c 制定和建议的图形格式，得到越来越 多的关注。s v g 对事件编程和脚本语言j a v a s c r i p t 的支持，使其成为发展前途最为 光明的图形格式。所以，本软件使用j a v a s c n p t 脚本语言和s v g 结合来实现，这样 不仅可以提高了开发效率，而且取得了很好的应用效果。 1 4 北京邮电大学硕士论文 浏览器矢量图形绘制工具的设计与实现 第三章相关技术介绍 3 1s v g 矢量图 s v g “1 是可缩放矢量图像格式( s c a l a b l ev e c t o rg r a p h i c s ) 的简称。s v g 标准由 权威的w 3 c 组织制定并推荐，它基于x m l ( 可扩展标识语言) ，是一个全新的标准开 放的矢量图像和动画格式。s v g 通过使用简单的文本语句完成矢量图像，以及诸如 色彩填充、对象运动、动态交互、滤镜效果、音效等各式媒体效果，成为未来的w e b 图形图像标准。它主要面向网络应用，目的在于满足w e b 应用日益增长的对动态、 可缩放和平台无关地展现复杂内容并实现灵活交互的需求，具有强大的可重用性和 伸缩性。其特点如下： 1 s v g 的图像文件内容可读，易于修改和编辑，是可供选择和搜索的，所以s v g 图形格式可以方便的建立文字索引，从而让s v g 实现基于内容的图像搜索。 2 s v g 图像是可以任意无损缩放，并以任何分辨率高清晰打印。 3 s v g 可动态实现色彩线性变化、路径、白定义字体、透明效果、滤镜效果 等各式常见的图形图像效果。 4 s v g 是一种使用纯x m l 文件来表示图形的技术标准。x m l 具有较好的保值性 ，过去4 0 年来的大多数计算机数据都丢失了，不是因为自然损害或是备份介质的磨 损，而只是因为没有人来写出如何读取这些数据介质和格式的文档。以不常用的格 式保存的二进制数据，数据也许会永远地消失了。x m l 在基本水平上使用的是非常 简单的数据格式。可以用1 0 0 的纯a s c i i 文本来书写，也可以用几种其他定义好 的格式来书写。a s c i i 文本是几乎不会”磨损”的。 3 2j a v a s c r i p t 脚本语言 j a v a s c r i p t 。是n e t s c a p e 公司与s u n 公司合作开发的一种脚本语言( s c r i p t i n g l a n g u a g e ) ，或者称为描述语言。在j a v a s c r i p t 出现之前，w e b 浏览器不过是一种 能够显示超文本文档的软件的基本部分。而在j a v a s c r i p t 出现之后，网页的内容不 再局限于枯燥的文本，它们的可交互性得到了显著的改善。首先，j a v a s c r i p t 是一 种新的描述语言，此语言可以被嵌入h t m l 的文件之中。在h t m l 基础上，使用这种 语言可以开发交互式w e b 网页。同时，它也是一种面向对象的脚本语言。运行 j a v a s c r i p t 程序需要能支持j a v a s c r i p t 语言的浏览器。n e t s c a p e 公司n a v i g a t o r3 0 以上版本的浏览器都能支持j a v a s c r i p t 程序，微软公司i n t e r n e te x p l o r e r3 1 5 北京邮电大学硕士论文 浏览器矢量图形绘制工具的设计与实现 0 以上版本的浏览器基本上支持j a v a s c r i p t 。微软公司还有自己开发的 j a v a s c r i p t ，称为j s c r i p t 。j a v a s c r i p t 和j s c r i p t 基本上是相同的，只是在一些 细节上有出入。 j a v a s c r i p t 短小精悍，又是在客户机上执行的，大大提高了网页的浏览速度 和交互能力。同时它又是专门为制作w e b 网页而量身定做的一种简单的编程语言。 其显著特点就是：它使增加了网页互动性，使有规律地重复的h t m l 文段简化，减 少下载时间，能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交 由服务器验证。例如，你可以编写一个j a v a s c r i p t 函数用于校验用户在一个需要 填入电话号码或邮政编码的表单中输入的信息。不需要任何的网络传输，嵌入 h t m l 页面的j a v a s c r i p t 就可以检查输入的数据并向输入了无效数据的用户显示 一个提示对话框。 目前它已经是万维网广泛用于动态网页的编程语言。它的出现使得网页和用户 之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和 更加精彩的内容。 3 2d o m 介绍 d o m 刮的全称是文档对象模型( 即d o c u m e n to b j e c tm o d e l ) 。它在本质上是一 种文档平台，是能够让程序和脚本动态访问和更新文档内容、结构和样式的一种语 言平台。通过文档对象模型，可以对文档( 比如h t m l 和x m l ) 进行访问。它提供了 操作构成文档各种元素的应用程序接口( a p i ) 。现在支持j a v a s c r i p t 的所有浏览器 都支持d o m 。 文档对象模型以树形结构表示h t m l 和x m l 文档，定义了遍历这个树和检查、修 改树的节点的方法和属性。在实际应用中，d o m 一般被分为不同的部分： 1 c o r ed o m ：定义了任意结构文档的标准对象集合； 2 x m ld o m ：定义了针对x m l 文档的标准对象集合； 3 h t m ld o m ：定义了针对h t m l 文档的标准对象集合。 h t m ld o m 是针对h t m l 的文档对象模型，它定义了针对h t m l 的标准对象集合以 及访问和操作h t m l 文档的方法。在h t m ld o m 中，h t m l 跟x m l 一样是一种树形结构 的文档，可以作为一个对象的集合来使用，这些对象有属性和方法，同时也可以对 事件做出反应，调用对应的函数进行处理。 是根( r o o t ) 节点， 、 是 的子( c h i l d r e n ) 节点，互相之间是兄弟( s i b l i n g ) 节点； 下面还 包含有子节点 、 、 等。 在h t m l 文档的树形结构中主要包含表示元素、标记的节点以及表示文本串的节 1 6 北京邮电大学硕士论文浏览器矢量图形绘制工具的设计与实现 点。对应的h t m l 的树形结构图如下所示。 图3 - 1h t m l 的树形结构图 常用的h t m ld o m 中对应对象的功能如下所示。 w i n d o w 对象：代表一个浏览器窗口的对象； n a v i g a t o r ：可提供当前所使用浏览器的版本号，运行的平台以及浏览器使用的 语言等信息； d o c u m e n t 对象：含有当前网页的各种特性，例如标题、背景以及使用的语言等 等； l o c a t i o n 对象：含有当前网页的u r l 地址； h i s t o r y 对象：含有以前访问过的网页的u r l 地址； f o r m 对象：表单对象代表一个h t m l 表单。h t m l 中一有 c r e a t e d o c u m e n t ( 0 ， r o o te l e m e n tn a m e s p a c eu r i x ( ”s v g ”) ， r o o te l e m e n tn a m e 0 ) ；d o c u m e n tt y p eo b j e c t ( d ad ) d o m e l e m e n t 宰r o o t e l e m = d o c - g e t d o c u m e n t e l e m e n t 0 ； d o m e l e m e n t f i r s t e l e m = d o c - c r e a t c e l e m e n t ( x ( ”l i n e ”) ) ； f i r s t e l e m - s e t a t t r i b u t e ( x ( ”10 0 ”) ，x ( ”3 0 0 ”) ，x ( ”2 0 0 ”) ，x ( ”10 0 ”) ) ； r o o t e l c m - a p p e m d c h i l d ( f i r s t e l e m ) ； d o m e l e m e n t 幸s e c o n d e l e m = d o c - c r e a t e e l e m e n t ( x ( ”l i n e ”) ) ； s e c o n d e l e m - s e t a t t r i b u t e ( x ( ”2 0 0 ”) ，x ( ”10 0 ”) ，x ( ”3 0 0 ”) ，x ( ”3 0 0 ”) ) ； r o o t e l e m - a p p e n d c h i l d ( s e c o n d e l e m ) ； d o m e l e m e n t 宰t h i r d e l e m = d o c 咖t i e e l e m t ( ”l i n e ”) ) ； t h i r d e l e m - s e t a t t r i b u t e ( x ( ”10 0 ”) ，x ( ”3 0 0 ”) ，x ( ”3 0 0 ”) ，x ( ”3 0 0 ”) ) ； r o o t e