基于AJAX技术的交互式图形绘制处理系统的设计研究

. . . . 基于AJAX技术的交互式图形绘制处理系统的设计研究摘 要 基于AJAX技术的交互式图形绘制处理系统主要利用JavaScript技术和AJAX技术来实现鼠标的点击来生成一些基本矢量图形和这些基本矢量图形组成的复杂图形，如：直线，圆，椭圆，矩形，人形。以与这些图形的移动，调整大小和改变颜色等简单操作，利用这些图形在浏览器实现简单的桌面应用。整个动态交互绘制图形的过程由JavaScript语言和AJAX来实现。在JavaScript语言中并没有图形绘制函数，我们首先根据计算机图形学的基本原理和算法实现这个矢量图形函数库，再在网页中的直接调用库函数来实现矢量图形的绘制。这个矢量图形库的基本原理：由于JavaScript语言不能直接地操作像素点，所以由单位像素的div对象来模拟像素点，进而通过模拟的像素点生成各种基本图形，如直线、矩形、椭圆等；而且也可以组合生成一些复杂的图形，比如人形。在对图形的控制的过程当中，主要是对鼠标的各种事件进行捕捉，并通过JavaScript来实现各种简单事件（比如对一条直线的绘制，移动，放缩，颜色大小设置）和复杂的事件（比如对一些组合图形，如人形、直线、矩形、椭圆的整体移动）。当图形在IE浏览器上面进行操作时，通过Ajax技术，将数据通过服务器异步的写入数据库，从而实现网页无刷新的过程。而在从数据库读数据的过程，也是通过Ajax技术来刷新只有被修改的页面部分（在回传的过程中是使用XML语言来传数据）。在效率方面，总体来讲，不是特别的高。1使用到服务器，2在图形绘制和控制过程中，要不断的和服务器，数据库来传送和回传数据，3 由于是使用div来模拟像素点，所有在用JavaScript语言来绘制时，相应的效率也不会是特别的高。基于AJAX技术的交互式图形绘制处理系统的研究虽然存在效率问题，但是由于它是在浏览器的环境中实现的桌面应用，所以通过技术的发展未来用户计算机只要能够上网和有相应的浏览器就可以像现在一样使用桌面应用而无需再安装相应的客户端。所以基于AJAX技术的交互式图形绘制处理系统的研究有积极的意义。关键词：矢量图形，事件处理，对象捕获，异步保存，Ajax，JavaScript ABSTRACTIn this application we use JavaScript and AJAX technology to generate some of the basic vector graphics and complex graphics composed by these basic graphics by the mouse clicks and drags, such as: a straight line, round, oval, rectangular, and human form. Besides we can move the graphics, change its size, change the color and so on, .By these graphics we can achieve a simple desktop application in the browser.The whole dynamic interactive process of graphics rendering achieved by the JavaScript language and AJAX .The JavaScript has no functions of graphics rendering .First of all we achieve this vector graphics library in accordance with the basic principles of computer graphics and algorithms. And then we can directly call the realized functions of the vector graphics rendering in the web pages. the basic principles of this vector graphics library is: As the JavaScript can not directly operate pixel point, so we use the unit pixel div object to simulate pixels, then through the simulated pixels we can generated basic graphics, such as linear, rectangular, oval, and so on, but also can be combined to create complex graphics, such as the human form. in the process, we mainly capture the events of the mouse, and through JavaScript to achieve the various events (such as the drawing of a straight line, mobile, put shrink, color size settings) and the complexity of the events (For example, on some combination of graphics, such as dolls, linear, rectangular, oval of the overall mobile). When the graphics is operated in IE browser, through the Ajax technology, the data is saved into the databaseasynchronously, this is realized without refreshing the whole page.In the aspect of the efficiency, it is not particularly high. The reasons are as follows: first, using the server, second, in the graphics rendering and control process, keeping returning and sending data between the servers, the client and database. Third, using div object to simulate pixels, the corresponding efficiency is not particularly high.Although the project has existing problems on the aspect of efficiency, but the project that can be only realized in the desktop now is achieved in the environment of the browser. In the future, through the development of the technology, we can use desktop application as now but need not to install the heavy client. Therefore, the study of the project has positive significance.Key Words: vector, graphics, AJAX, javascript第一章 绪论1.1 开发背景随着社会的发展，从互联网诞生，今天的因特网发生了翻天腹地的变化，最早它只有基于文本的简单浏览器。供科学家之间的研究交换心得，如今，它已经成为商务和信息中心，这期间，许多新技术和新方法相继登场，但是很少有人将web应用和桌面应用相联系起来。在最近的2005年2月，AJAX被Jesse James Garret首先提出来，因为从它提出以后，出现了很多讨论和爆炸了的问题关于如何应用AJAX和他的优缺点。这扪技术在现实得的网络设计中的应用与受欢迎度在Google Maps, Google Suggest, Grail, Yahoo Mail中得到了最有力的体现。而在以前，window live 他们主要的亮点是与客户端连接紧密，这与桌面应用非常类似。本课题就是在此背景下，针对上述问题，研究在无需任何第三方插件或控件前提下跨浏览器平台的直接在网页实现矢量图形动态交互绘制和类似的桌面应用（UML），从而实现“胖客户端”模式。该课题主要包括：基本矢量图形和复杂矢量图形的生成，如：矩形，圆，直线，人形等，以与图形的放大，缩小，移动。1.2 研究的现状目前关于用JavaScript脚本语言直接实现在浏览器中生成矢量图形与动态交互的研究还很少且主要集中在国外，如Walter Zorn、Mathieu Haller等人的研究。而在国，基本没什么这方面的研究。有的资料，也往往只是转述国外的一些研究结果。网页矢量图形要从研究转向大规模的应用和推广还有很长的路要走。1.3 研究意义通过Ajax技术和图形学基础来实现网页矢量基本图形（圆，直线，矩形，椭圆）和复杂图形（人形）的动态生成和交互（移动，伸缩，异步保存），实现类似桌面的UML应用。使用户无需安装庞大的客户端而只需要有一个可以联网的浏览器就可以使用该应用。大大方便了用户。1.4 开发工具课题中采用的代码编辑工具为Yaldex JSFactory。Yaldex JSFactory是一个JavaScript编辑器、验证器和调试器。它是一种网页设计工具软件，提供了大量的带有HTML标签、HTML属性、HTML事件、JavaScript事件和JavaScript函数的snippet库,置各种网页特效，你可以通过点击鼠标把这些效果插入到网页中，制作你喜欢的各种效果，并把他们传到你的上。图1.1 JSFactory Pro的整体界面1.5 应用软件介绍1.5.1 应用服务器Apache Tomcat/5.5.20Tomcat 服务器是一个免费的开放源代码的Web 应用服务器，目前最新版本是6.0.14。本系统用Apache Tomcat/5.5.20。Tomcat是Apache 软件基金会（Apache Software Foundation）的Jakarta 系统中的一个核心系统，由Apache、Sun和其他一些公司与个人共同开发而成。由于有了Sun 的参与和支持，最新的Servlet 和JSP 规总是能在Tomcat 中得到体现，Tomcat 5 支持最新的Servlet 2.4 和JSP 2.0 规。因为Tomcat 技术先进、性能稳定，而且免费，因而深受Java 爱好者的喜爱并得到了部分软件开发商的认可，成为目前比较流行的Web 应用服务器。1.5.2 数据库服务器MySQL Server 5.0MySQL是一个小型关系型数据库管理系统，开发者为瑞典MySQL AB公司。目前MySQL被广泛地应用在Internet上的中小型中。由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，许多中小型为了降低总体拥有成本而选择了MySQL作为数据库。第二章 相关技术简介2.1 矢量图形和位图位图图形由排列在网格中称为“像素”的点组成。编辑位图图形时，修改的是像素，而不是线条和曲线。位图图形与分辨率有关，这意味着描述图像的数据被固定到一个特定大小的网格中。放大位图图形将使这些像素在网格中重新进行分布，这通常会使图像的边缘呈锯齿状。矢量图形使用称为“矢量”（包含颜色和位置信息）的线条和曲线呈现图像。编辑矢量图形时，修改的是描述其形状的线条和曲线的属性。矢量图形与分辨率无关，这意味着您除了可以在分辨率不同的输出设备上显示它以外，还可以对其执行移动、调整大小、更改形状或更改颜色等操作，而不会改变其外观品质。2.2 JavaScript语言简介JavaScript语言的前身叫做Live script。自从Sun公司推出著名的Java语言之后，Netscape公司引进了Sun公司有关Java的程序概念，将自己原有的Live script 重新进行设计，并改名为JavaScript。JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript，可使网页变得生动。使用它的目的是与HTML超文本标识语言、Java 脚本语言一起实现在一个网页中多个对象，与网络客户交互作用，从而可以开发客户端的应用程序。它是通过嵌入或调入在标准的HTML语言中实现的。JavaScript具有很多优点： 1 简单性 JavaScript是一种脚本编写语言，它采用小程序段的方式实现编程，像其它脚本语言一样，JavaScript同样已是一种解释性语言，它提供了一个简易的开发过程。它的基本结构形式与C、C+、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。 2 动态性 JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页中执行了某种操作所产生的动作，就称为”事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。3 跨平台性 JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可以正确执行.JavaScript是一种基于客户端浏览器的语言，用户在浏览中填表、验证的交互过程只是通过浏览器对调入HTML文档中的JavaScript源代码进行解释执行来完成的，即使是必须调用CGI的部分，浏览器只将用户输入验证后的信息提交给远程的服务器，大大减少了服务器的开销。 2.3 JavaScript事件处理机制（1）单击事件onClick当用户单击鼠标按钮时，产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生：l button（按钮对象）l checkbox（复选框）或（检查列表框）l radio （单选钮） l reset buttons（重要按钮） l submit buttons（提交按钮） 例如可通过下列按钮激活change()文件： 在onClick事件触发后，可以使用自己编写的函数作为事件处理程序，也可以使用JavaScript中部的函数。还可以直接使用JavaScript的代码等。例：Input type=button value= onclick=alert(这是一个例子)。（2）onChange改变事件 当利用text或texturea元素输入字符值改变时发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件。例： （3）选中事件onSelect 当Text或Textarea对象中的文字被加亮后，引发该事件。 （4）获得焦点事件onFocus 当用户单击Text或textarea以与select对象时，产生该事件。此时该对象成为前台对象。 （5）失去焦点onBlur 当text对象或textarea对象以与select对象不再拥有焦点、而退到后台时，引发该文件，它与onFocas事件是一个对应的关系。 （6）载入文件onLoad 当文档载入时，产生该事件。onLoad一个作用就是在首次载入一个文档时检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用。 （7）卸载文件onUnload 当Web页面退出时引发onUnload事件，并可更新Cookie的状态。2.4 AJAX技术2.4.1 AJAX技术简介Ajax不是一个技术，它实际上是几种技术，每种技术都有其独特这处，合在一起就成了一个功能强大的新技术。Ajax包括:u HTML和CSSu 使用文档对象模型(Document Object Model)作动态显示和交互u 使用XML和XSLT做数据动态进行交互和操作u 使用XML Request进行异步数据接收u 使用JavaScript将它们绑定在一起Ajax的优点:u 适用不同浏览器和跨平台的能力u Ajax应用使用开放标准的技术，而不用使用专用软件u 开发花费小u 代码能够优化和分开u 更丰富的交互。u 刷新等待的时间短、更快的速度u Ajax被广泛的采用u 与其他技术的无缝连接2.4.2 AJAX工作原理在客户端的AJAX应用有三层组成：第一层，用户界面，第二层，JavaScript代码，第三层，AJAX引擎。在用户界面这一层中要用到XHTML, CSS和DOM。XHTML通过标签来显示网页的容。CSS通过消除网页的冗余提供网页容和样式的显示。CSS在不同的文件中的规则不同在实现。DOM规提供一种方法进行网页容的动态访问，样式的更新和结构的变化。当客户端所有的被重载时。事件接听器和XHR被创建和激活。用户的交互产生事件，事件被叫做事件接听器的JavaScript函数捕捉，如果事件有特殊的代码要执行，那么这些事件将被不同的JavaScript函数执行。第二副图显示这一过程。在这一个例子中，事件接听器把数据发给更新函数，这些函数利用DOM和CSS来更新容，显示形式或者数据结构。这不是一个外部调用，这只是在客户端而且结果立刻显示出来。在第二种情况中，事件接听器把数据传给XHR，XHR对象的创建在不同的浏览器的不同而不同，IE用Active Object,类。Frefox和Safari用XML Request对象。虽然这些有不同的方法，但是结果一样。XHR通过 或者 S协议异步的给服务器发送请求。当 请求被服务器端处理时，他被分成物五种状态：未被接受，正在，完成。交互，结束。XHR对象通过事件来告诉我们各个状态的变化。当服务器端在处理网络应用的时候，数据的验证是必要的。特别是要访问数据库时尤其重要。数据库和网络应用可以通过访问控制，密码，和用户规则来加以保护。当数据库返回新的数据给网络应用时，数据被转化为特定的形式（HTML，XTHML等等）。然后网络应用给客户端的XHR对象回复。当回复结束时，状态变为完成，XHR把回复结果发给JavaScript函数来解析。数据通过特定的数据结构更新函数通过DOM和CSS将数据加到网页中。在这个模型中，具有简洁的代码和单独的JavaScript函数完成。图 2.2: 传统Web应用的同步交互过程(上)和Ajax应用的异步交互过程的比较(下).2.5 点和直线的生成算法点和直线是描绘图形的最基本和最常用的元素，许多复杂的图形都是由点和直线段构成的。在数学上，点是一个抽象的坐标位置，没有面积或大小。数学上定义的直线是由无数个点构成的。它只有长度而没有宽度。在光栅图形中，点是由有一定大小和面积的像素来表示的；而由扫描转换得到的直线段，则是在有限个像素构成的阵列中确定的最佳逼近该直线段的一个像素序列。 由于光栅显示器的特点，是得除了特殊的情况外，不可能从离散单元中一个像素到另一个像素直接画一条精确的直线。直线只能用一系列靠近直线的像素近似表示。只有当直线是水平，竖直或者45度时，它才是像素组成的直线，其他指向都成阶梯状。这种现象称为走样或者锯齿现象。 根据光栅图形的特点，为直线的生成设计绘制算法应该满足一下4个要求：(1) 所绘制的直线应该是直的，不应出现阶梯效应。(2) 所绘制的直线应该具有精确的起点和终点。(3) 所显示的亮度或颜色应该在其长度上是均匀不变的，与直线的长度和方向无关。(4) 直线生成的速度要快。第三章 交互式图形绘制处理系统的原理与若干关键技术分析3.1 AJAX工作流程3.1.1 初始化对象并发出XML Request请求为了让JavaScript可以向服务器发送 请求，必须使用XML Request对象。使用之前，要先将XML Request对象实例化。但是各个浏览器对这个实例化过程实现不同，为了让编写的程序能够跨浏览器运行，可以写成：If(window. XML Request) XML Req=new XML Request(); else if(window.ActiveXObject) try XML Req=new ActiveXObject(“Msxml2.XML ”); catch(e) try XML Req=newActiveXObject(“Microsoft. XML ”); catch(e) 3.1.2 指定响应处理函数接下来要指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XML Request对象的onreadystatechange属性就可以了。比如：XML Req. Onreadystatechangefunction（）；3.1.3 发出 请求指定相应处理函数之后，就可以向服务器发出 请求了。这一步调用XML Request对象的open和send方法。XML Req.open（”GET”,url,true）；XML Req.send（null）；3.1.4 处理服务器返回的信息在第二步我们已经指定了响应处理函数，这一步是用来描述处理函数具体应该做的事情。首先，它要检查XML Request对象的readyState值，判断请求目前的状态。当readyState值为4的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面容了。例如：if(XML Req.readyState=4)/信息已经返回，可以开始处理else/信息还没有返回，等待服务器返回信息后，还需要判断返回的 状态码，确定返回的页面没有错误。其中，200代表页面正常，基本程序结构如下：if(XML Req.staus=200)/页面正常，可以开始处理信息else/页面有问题3.1.5 XML Request对成功返回的信息有两种处理方式一种是resonseText：即将传回的信息当字符串使用；另一种为responseXML：即将传回的信息当XML文档使用，可以用DOM处理。这个系统中，在刚打开页面进行初始化时，要从数据库中提取每个图形的相关的数据，考虑到传输的次数和性能，所有选择了使用responseXML。因为responseXML可以将全部数据一次性的传到客户端上。然后在客户端通过使用DOM技术，将各个图形的数据分类出来。3.2 后台处理程序这里为了提高程序以后的维护性，在后台编写了四个.java程序与图形异步交互的控制。以下是对这四个程序的简单介绍。DbManager.java：主要是处理连接数据库，和一些相关的操作：查询和修改数据。GetServlet.java： 是将数据传输过来的函数，传输的类型是xml。MessageEO.java：这里使用了面向对象的概念。一个MessageEO代表一个图形的全部参数。1、通过使用DbManager到数据库中提取相关图形的所有的数据。2、对相关的数据进行类型的转变。3、通过使用getXXXID()来获取数据，使用setXXXID(类型 XXXID)来修改数据。SendServlet.java：将传过来的数据写入到数据库中。使用request.getParameter(参数);来取出从客户端传过来的数据，并将这些数据的类型改成响应的类型，并通过调用MessageEO将数据写入数据库中3.3 点的生成原理点是描绘图形的最基本和最常用的元素，许多复杂的图形都是由点构成的。在数学上，点是一个抽象的坐标位置，没有面积或大小。在光栅图形中，点是由有一定大小和面积的像素来表示的。光栅图形中点也称为像素（Pixel），它与帧存中的地址单元是一一对应的。如果是光栅显示器。则在屏幕上相对应的坐标位置上选中那个像素，并将其颜色或其他属性值装入帧存中的相应单元。在浏览器中，JavaScript语言并不能去掌控像素点。在这里，用足够小的div元素来模拟像素点。在页面中生成一个div元素，把它的长宽属性都设置为单位像素，把得到的这个div元素作为模拟的像素点。3.4 直线生成算法3.4.1 中点画线算法 中点画线算法是在画直线的过程中，当直线前一像素点为（xp，yp），下一个像素点可选择点P1(xp+1 , yp)或者P2(xp+1 ,yp+1)，若点M为P1P2的中点，Q为理想直线与x=xp+1垂线的交点。若M在Q的下方，则P2应为下一个像素点；M在Q的上方，则P1为下一像素点。这就是中点画线的基本原理。图3.1 中点画直线法每步迭代涉与的像素和中点示意图实现步骤：1) 令直线L(P0(x0 ,y0)P1(x1, y1),其方程为F（x，y）=ax+by+c=0，a=y0-y1, b=x1-x0 ,c=x0y1-x1y0; 点和L的关系：on：F(x,y)=0; up:F(x,y)0;down: :F(x,y)0.所以判断中点在理想点的上放还是下方，只要将点M(xp+1 , yp+0.5)代入F(x,y)看其符号。构成方程式：D=F(M)=F(xp+1 , yp+0.5)2) 判断D是否小于零，如果D0，则取P1为下一像素。3.4.2 Bresenhanm画线算法 Bresenhanm画线算法是由Bresenhanm提出的一种直线生成算法。与中点画线算法类似， 先考虑0m1时，直线的扫描转换过程。在这种情况下，沿直线路径的像素位置在x方向以单位间距取样。从给定的线段起点开始，每步x方向向右移动一个单位，并在扫描线的方向向右移动一个单位，并在扫描线的y值最接近直线轨迹的那个像素上绘出该点。现在要讨论的是如何确定y的取值。假如扫描转换已进行到第k步，其像素在（, ）位置上，下一步是要确定在列+1上应绘制的像素究竟应该选P1(+1, )还是P2（+1, +1）位置，如图3.2所示。在取样位置处（显然，=+1），定义参数和来描述和像素分别与理想直线路径的垂直偏移量，在像素位置+1处理想直线的y坐标值为：图 3.2像素下一步取值的选择y=m(+1)+b (3-1) 有：=y- (3-2)=m(+1)+b-(3-3)=(+1)-y (3-4)=+1-m(+1)-b (3-5)它们的差为：-=2m(+1)-2+2b-1 (3-6)根据式子(3-6)有： (3-7)可得第k步的决策参数: (3-8) (3-9其中，c为一常量，值为,它与像素位置的选择无关。可见，当时，0，位置上的像素比+1处的更接近理想直线段，取点；否则，应取点。 (3-10)式(2-10) 减去式(2-9)，有： (3-11)因为，有： (3-12)其中，()项可取0或取1，如果0，则=0；否则=1。由前面式子推出： (3-13)从线段的起点坐标开始，在每个x参数位置对决策参数PI进行递归运算，就可确定关于该直线的点的序列。下面给出的是|m|1时的Bresenhanm画线算法描述。(1) 输入所定义直线段的两个端点。(2) 将左端点装入帧缓冲器,画出第一个点。(3) 计算，2和2-2的值，并得到初步决策参数。(4) 从k=0开始，沿直线在每个处进行下列测试：如果0）的直线,如果直线的斜率小于1，应取x的坐标单位步长为1，然后计算相应的y值的坐标值。这里不能取y坐标变化量为1，否则y的变化量会产生很大的x变化量： (3-17)对于斜率大于1的直线，应把x和y交换，否则x的单位变化量可能引起很大的y坐标变化量。这时把y单位步长改为单位1，然后计算相应的x的值：（3-18）上述两式均假设点沿直线从左到右，如果端点顺序到过来，则开始端点在右端，结束端点在左端，则=1.且 (3-19) 或者当斜率大于1时，=1，且（3-20）DDA算法的描述如下：(1) 该算法以给定的直线段的两个端点作为输入参数。(2) 初始化，将初值和各加上0.5，以保证计算精度。(3) 将两端点间的水平和垂直差值赋予参数dx和dy，。(4) 选取dx和dy中绝对值大的一个最为步数length。(5) 从像素位置(,)开始，确定生成下一个像素位置每步所需增量，如果绝对值大于绝对值，且小于，那么x与y方向的增量分别为1和m;假如x方向变化大，但大于，那么就采用减量-1和-m作为其“增量”；在其他情况下，y方向使用单位增量（或减量），x方向使用1/m作为增量（或减量）。(6) 重复第（5）步length次。(7) 将获得的位置坐标值取整，作为像素的坐标值，并将像素颜色值存入与之相对的帧缓冲器单元中去。这几种算法各有其特点，数值微分画线算法的实现相对比较简单，计算工作量较少，运算类型也比较单纯.但由于这个算法中y与m必须是浮点数，而且每一步运算都必须对y进行舍入取整,这就使得它不利于用硬件实现。中点画线算法和Bresenhanm画线算法都隐含着对逼近过程中误差项的处理，这样就使得直线生成更精确，有效，而且还避免了小数运算。使得实现过程更简单，快速。3.5 椭圆生成算法由于椭圆的特征使得椭圆的算法跟画圆的算法思想一样，这里先介绍下Bresenham画圆算法。为了不是一般性，我们假设圆心在原点否则可以把求到圆上的点做坐标变换： （3-21）（3-22）通过以上的变换便可得到圆心在任一点的圆上的坐标。在这里我们考虑第一象限八分之一圆弧的画法。这个算法的思想是在每一步都选择一个距离圆周最近点，使其误差项：（3-23）在每一步达到最小。假设是第一象限八分之一圆弧的第一个像素点，根据圆弧的走向，下一个像素点应从或者中一个，选择离圆弧最近的像素点作为下一个点，并对一下误差项进行比较：（3-24）（3-25）引入一下判别式：（3-26） 当d=0时， 则选择，d0时，则选择。由于（3-26）涉与平方且绝对值运算，所以效率很低，我们可以用如下方法进行简化，由图形分析，八分之一画圆过程只有如下五种情况：图 3.3像素下一步取值的选择 1, H与L在圆，D（）0, D（）0.根据图形分析，最理想的应该为。2，在圆上，在圆，D（）=0, D（）0, D（）0.4，在圆外，在圆上，D（）=0, D（）0，最理想的点为。5，在圆外，在圆外，D（）0, D（）0, D（）0.因此，（3-26） 可以改写为： （3-27）对于情况1，2由于D（）0, D（）0, D（）0。代入（3-27）得，按照判别条件，应该先则。这和从图上分析是一致的，所以可以用（3-27）作为判别式。3.6 矩形生成算法矩形就是四条直线段围成，而且是四条特殊的直线段，它们是垂直和水平的，所以矩形的绘制很简单，在得到矩形宽度后，直接调用画点函数或者调用画线函数四次就可以实现矩形的绘制，要注意的就是各个直线段之间顶点的衔接，也就是参数的设置要整齐。第四章 系统的设计与实现4.1 总体设计此系统包括两个大的部分，一是矢量图形的生成部分，主要涉与简单图形的函数的绘制，通过计算机图形学中相应的图形绘制思想，实现交互式图形绘制处理系统的函数，这些函数都是放在一个 graphics.js文件中，在这个js文件中是实现图形绘制的各个函数，如绘制直线的函数mklin()，绘制矩形的函数mkRect()等等。然后在系统的运行时，每次画图都会创建一个jsGraphics对象，在jsGraphics对象的构造函数中看到它的很多方法，这些方是用来绘制各种基本图形的，它们通过直接被赋予函数值来实现。要使用的时候只要引入 js文件，就可以在引入的文件中直接使用 js中的函数；二是矢量图形的绘制和控制部分，在网页上通过JavaScript事件机制来绘制图形，以与对已经显示在网页上的矢量图形进行控制（移动，放大，缩小，改变颜色和线条的粗细）。在响应鼠标事件绘制相应的图形时，所绘制的图形的信息就被记住，然后，可以对绘制好的图形进行移动操作，改变颜色操作和改变宽度操作。最终目的是利用这些图形的绘制和控制实现在浏览器的简单桌面应用。本系统主要实现UML的用例图的应用。4.2 功能分析在该系统中用到的各个矢量图形的绘图函，主要包括以下几个功能模块：(1) 生成直线方法 drawLine(x1,y1,x2,y2)。drawLine方法是通过mkLin ()函数实现的，根据stroke值得不同设置，给drawLine赋予不同的函数。而这些对方法使用者来说是透明的，使用者根据自己的绘制需求设置好stroke,就可以直接去调用drawLine()。drawLine的四个参数的值分别为第一个点的横坐标、第一个点的纵坐标标、第二个点的横坐标、第二个点的纵坐标。(2) 生成矩形方法 drawRect(x,y,w,h)。与drawLine()类似，它通过函数mkRect()来实现的，。方法的参数x代表举行左上角顶点的横坐标，参数y代表左上角点的纵坐标，参数w代表矩形的长，参数h代表矩形的宽。(3) 生成椭圆方法 drawEllipse(x,y,w,h)drawEllipse()方法用来绘制椭圆。任意一个椭圆可以由它的外切矩形确定，这个方法的四个参数是使它的外切矩形的信息。这四个参数分别代表外切矩形的左上角顶点的横坐标、纵坐标、外切矩形的长、外切矩形的宽。(4) 生成复杂图形人形的方法 drawRren(x1,y1,x2,y2)第五章总结5.1AJAX组件授权 所有的AJAX组件授权方案在现在被逻辑地分成两组。具体地说，第一组用于与基于HTML的UI定义的无缝集成。第二组把HTML当作一个UI定义语言以支持某种XML。在此，从第一组中来展示一种方法；虽然它存在于浏览器之中却是类似于JSP标签。这些浏览器特定的组件授权扩展在IE情形下称作元素行为，而在最近版本的Firefox，Mozilla和Netscape 8情形下称作可扩展的绑定。 5.2定制标签Internet Explorer，从版本5.5开始，支持定制的客户端HTML元素的java script授权。不象JSP标签，这些对象并没有在服务器端被预处理到HTML script授权。不象JSP标签，这些对象并没有在服务器端被预处理到HTML中。而是，它们成为一标准HTML对象模型的合法扩展，并且包括构造控件在的一切事情，都是动态地发生在客户端的。同样，基于Gecko引擎的浏览器能够用一个可重用功能动态地装饰任何现有的HTML元素。 因此，有可能用具有HTML语法的方法、事件和属性来构建一个具有丰富UI组件的库。这样的组件可以被自由地混合于标准HTML中。在部，这些组件将会与应用程序服务器进行通信，即AJAX风格。换句话说，使用者有可能（并且相对简单地）构建自己的AJAX对象模型。24 / 24