文档介绍：项目:
基于AJAX的网页图形动态交互绘制一
图形绘制
基于AJAX的网页图形动态交互绘制--图形绘制
摘要
基于AJAX的网页矢量图形动态交互绘制主要利用JavaScript技术和AJAX技术来实现鼠标的点击来生成一些基本矢量图形和这些基本矢量图形组成的复杂图形,如:直线,圆,椭圆,矩形,人形。以及这些图形的移动,调整大小和改变颜色等简单操作,利用这些图形在浏览器实现简单的桌面应用。
整个动态交互绘制图形的过程由JavaScript语言和AJAX来实现。在JavaScript语言中并没有图形绘制函数,我们首先根据计算机图形学的基本原理和算法实现这个矢量图形函数库,再在网页中的直接调用库函数来实现矢量图形的绘制。这个矢量图形库的基本原理:由于JavaScript语言不能直接地操作像素点,所以由单位像素的div对象来模拟像素点,进而通过模拟的像素点生成各种基本图形,如直线、矩形、椭圆等;而且也可以组合生成一些复杂的图形,比如人形。在对图形的控制的过程当中,主要是对鼠标的各种事件进行捕捉,并通过JavaScript来实现各种简单事件(比如对一条直线的绘制,移动,放缩,颜色大小设置)和复杂的事件(比如对一些组合图形,如人形、直线、矩形、椭圆的整体移动)。当图形在IE浏览器上面进行操作时,通过Ajax技术,将数据通过服务器异步的写入数据库,从而实现网页无刷新的过程。而在从数据库读数据的过程,也是通过Ajax技术来刷新只有被修改的页面部分(在回传的过程中是使用XML语言来传数据)。
在效率方面,总体来讲,不是特别的高。1使用到服务器,2在图形绘制和控制过程中,要不断的和服务器,数据库来传送和回传数据,3 由于是使用div来模拟像素点,所有在用JavaScript语言来绘制时,相应的效率也不会是特别的高。
该项目的研究虽然存在效率问题,但是由于它是在浏览器的环境中实现的桌面应用,所以通过技术的发展未来用户计算机只要能够上网和有相应的浏览器就可以像现在一样使用桌面应用而无需再安装相应的客户端。所以该项目的研究有积极的意义。
关键词:矢量图形,事件处理,对象捕获,异步保存,Ajax,JavaScript
AJAX-BASED GRAPHICS DYNAMICLY GENERATING AND CONTROLLING ON THE WEB
PAGE - GRAPHICS GENERATING
ABSTRACT
In this application we use JavaScript and AJAX technology to generate some of the basic vector graphics plex posed 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 puter 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