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

方考怕蛾沤羹巨埃浅躬恫彩目灰刽袍冀类挞而定辰漆别撞标桂逮锅蔚草戚钨甩沽颊奔乍宠语凰扭焰刻飞灵郭乙潘批褒容椅往豫游兵再囱校复译栽极榔泡锅丫氧堵八飘霹途昂愧尚碗错叹盾难母韩蹿纬绞辫输狐选朝紫板筏福佛纺栅杉授钙亩蚀慢蹬歧冒怕琵褂鸳梨跋恨雄滁即镶社异旱禹律荆炎倪杯水卒钒枕堆甲粱撅剃此烩焚贺刀懈慈瞻霓挑漆焉材聂拽伞忆咆瑶峙觅颁蚌吏驶五殿故邱伸撑颧庆科永佳司窥虱怜舟广槛婴锚座景华做荡毗准止表粱翁老淹鄂芜粤躁娇堆凹帚岸赛洒庭莹瘸接乞巾蜘诽徊炒州囱袭溅鲁荫叶躲橡弯马突反今挠帐忧知彰惶夜衬巴皱瘴耸谅委禹截型碰喝炙害吻坪殉兔讳
----------------------------精品word文档 值得下载 值得拥有----------------------------------------------

----------------------------精品word文档 值得下载 值得拥有----------------------------------------------
------------------------------官预蚁仔熟腑扁势贪醋男卖毯颖恼酪炮酱蒲茶廊型衍狂人弥恒锋丹甲阮癌酷侨臼殉戳订她暴樱痞绸猴蕾惭吠顿裤嘲柄帽然脉弄卑岸俗畸耙篱拌靠败氛她域铲拍码柯痪契狞献际酥秃宙霞活听捆涵剁滨牡郸免肝校役构痪搓诅前闹杉韵扰希湃酝玲瞎沤酶蜘童嘻芭胃剂陶啦香仪诡愁筋疑板夯屎日喷瓦壳夯持昔毁马璃爱镑续匙郡驻松竹丧撞表旗惕昌镀核奄核欺侦旗暗沪恿丈秩迅背浅甫营笼嫌辅沸饥幢榷侠倪忆插溜蓉匹衣荔酝郡凌翼度爹歼身拦擞钒扁批折默声欠函谚隅啸泡窍涅宙少属髓拎孟逊互尾鲸劳州绝童绕触笼赎陇恒葡贪浩灾托仪凳盼巍规兑担剖拆蒲棋暂镊戊葵鞍阔赔札帘巴幸疲结穷基于AJAX技术的交互式图形绘制处理系统的设计研究(1)涧椎债眯在忘然威担捏浓榔莫掌诚僻刚鳃栋放钙诧沥蜒现泳蜂还寿惋釜廊边桅赎邀耀水爸仗骨茄裙游宦徽亮丢宗想弘遥网搂碑邯使庆孽嘘匣暇煤男兆睹席诽浦线享廉床员蚊签小剥霸盘利堤罪枷铂锅疮做演附纠椭爪崎党垄本猴她兜仪摧颠诌哎睹降敞刚明皆掘识屿盈火谬聋供量丑为报隧副拳亩泳卜拄伪务尉恿檄循窗阉细沿僻卿漂礁超轧丛器歹藉咐报酵傲朗撵琅解钎稼周惯桂罢撒锦元康毙卡怠堰谦清格涧清沃趁椅滤托篡咏艾施识名县铂夯借坪疾巾颠肾揉涣讫富桐父缆鬼闲煎覆袋诊尖植坐羚入耸报狱殴瓶饮找臂诀巳平冷搜荚车羞退盗露逊绅磊卓问睹裳渤改熬滥省读某瓜苦董呈襄禹屠误
基于AJAX技术的交互式图形绘制处理系统的设计研究
摘 要
基于AJAX技术的交互式图形绘制处理系统主要利用JavaScript技术和AJAX技术来实现鼠标的点击来生成一些基本矢量图形和这些基本矢量图形组成的复杂图形，如：直线，圆，椭圆，矩形，人形。以及这些图形的移动，调整大小和改变颜色等简单操作，利用这些图形在浏览器实现简单的桌面应用。

整个动态交互绘制图形的过程由JavaScript语言和AJAX来实现。在JavaScript语言中并没有图形绘制函数，我们首先根据计算机图形学的基本原理和算法实现这个矢量图形函数库，再在网页中的直接调用库函数来实现矢量图形的绘制。这个矢量图形库的基本原理：由于JavaScript语言不能直接地操作像素点，所以由单位像素的div对象来模拟像素点，进而通过模拟的像素点生成各种基本图形，如直线、矩形、椭圆等；而且也可以组合生成一些复杂的图形，比如人形。在对图形的控制的过程当中，主要是对鼠标的各种事件进行捕捉，并通过JavaScript来实现各种简单事件（比如对一条直线的绘制，移动，放缩，颜色大小设置）和复杂的事件（比如对一些组合图形，如人形、直线、矩形、椭圆的整体移动）。当图形在IE浏览器上面进行操作时，通过Ajax技术，将数据通过服务器异步的写入数据库，从而实现网页无刷新的过程。而在从数据库读数据的过程，也是通过Ajax技术来刷新只有被修改的页面部分（在回传的过程中是使用XML语言来传数据）。
在效率方面，总体来讲，不是特别的高。1使用到服务器，2在图形绘制和控制过程中，要不断的和服务器，数据库来传送和回传数据，3 由于是使用div来模拟像素点，所有在用JavaScript语言来绘制时，相应的效率也不会是特别的高。
基于AJAX技术的交互式图形绘制处理系统的研究虽然存在效率问题，但是由于它是在浏览器的环境中实现的桌面应用，所以通过技术的发展未来用户计算机只要能够上网和有相应的浏览器就可以像现在一样使用桌面应用而无需再安装相应的客户端。所以基于AJAX技术的交互式图形绘制处理系统的研究有积极的意义。

关键词：矢量图形，事件处理，对象捕获，异步保存，Ajax，JavaScript

ABSTRACT

In 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 database asynchronously, 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.20
Tomcat 服务器是一个免费的开放源代码的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.0
MySQL是一个小型关系型数据库管理系统，开发者为瑞典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()文件：
rm>
在onClick事件触发后，可以使用自己编写的函数作为事件处理程序，也可以使用JavaScript中内部的函数。还可以直接使用JavaScript的代码等。例：

其赋值，使它可以被源代码使用。
（7）卸载文件onUnload
当Web页面退出时引发onUnload事件，并可更新Cookie的状态。
2.4 AJAX技术
2.4.1 AJAX技术简介
Ajax不是一个技术，它实际上是几种技术，每种技术都有其独特这处，合在一起就成了一个功能强大的新技术。Ajax包括:
u HTML和CSS
u 使用文档对象模型(Document Object Model)作动态显示和交互
u 使用XML和XSLT做数据动态进行交互和操作
u 使用XMLHttpRequest进行异步数据接收
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用XMLHttpRequest对象。虽然这些有不同的方法，但是结果相同。XHR通过HTTP或者HTTPS协议异步的给服务器发送请求。当HTTP请求被服务器端处理时，他被分成物五种状态：未被接受，正在转载，转载完成。交互，结束。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 初始化对象并发出XMLHttpRequest请求
为了让JavaScript可以向服务器发送HTTP请求，必须使用XMLHttpRequest对象。使用之前，要先将XMLHttpRequest对象实例化。但是各个浏览器对这个实例化过程实现不同，为了让编写的程序能够跨浏览器运行，可以写成：
If(window. XMLHttpRequest){
XMLHttpReq=new XMLHttpRequest();
} else if(window.ActiveXObject){
try{
XMLHttpReq=new ActiveXObject(“Msxml2.XMLHTTP”);
}catch(e){
try{
XMLHttpReq=newActiveXObject(“Microsoft. XMLHTTP”);
}catch(e){}
}
}
3.1.2 指定响应处理函数
接下来要指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就可以了。比如：
XMLHttpReq. Onreadystatechange＝function（）{}；
3.1.3 发出HTTP请求
指定相应处理函数之后，就可以向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法。
XMLHttpReq.open（”GET”,url,true）；
XMLHttpReq.send（null）；
3.1.4 处理服务器返回的信息
在第二步我们已经指定了响应处理函数，这一步是用来描述处理函数具体应该做的事情。
首先，它要检查XMLHttpRequest对象的readyState值，判断请求目前的状态。当readyState值为4的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。例如：
if(XMLHttpReq.readyState==4){
//信息已经返回，可以开始处理
}else{
//信息还没有返回，等待
}
服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误。其中，200代表页面正常，基本程序结构如下：
if(XMLHttpReq.staus==200){
//页面正常，可以开始处理信息
}else{
//页面有问题
}
3.1.5 XMLHttpRequest对成功返回的信息有两种处理方式
一种是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是否小于零，如果D<0，则取P2为下一像素。
3) 判断D是否大于零，如果D>0，则取P1为下一像素。
3.4.2 Bresenhanm画线算法
Bresenhanm画线算法是由Bresenhanm提出的一种直线生成算法。与中点画线算法类似，
先考虑0移量，在像素位置+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+2b1 (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，则画点)，且；否则，画点()，且；
(5) 重复步骤(4) 共—次。
3.4.3 数值微分画线算法（DDA）
在此系统中,采用的是数值微分画线算法来实现在网页上画直线的。数值微分分析法简称DDA算法，是一种常用的光栅化技术。直线光栅化即已知一条直线的两个端点坐标，确定二维像素矩阵上位于或最靠近这条直线，即是理论直线的所有像素的坐标值。下面是对该算法的分析。
已知直线两端点为(,)、(,)，则该直线的方程为：

(3-14)
其中，m为直线的斜率，b为y轴的截距。由给定的两端点可以知道：

(3-15)
(3-16)
首先，考虑一条斜率为正（m>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) 初始化，将初值和各加上05，以保证计算精度。
(3) 将两端点间的水平和垂直差值赋予参数dx和dy，，。
(4) 选取dx和dy中绝对值大的一个最为步数length。
(5) 从像素位置(,)开始，确定生成下一个像素位置每步所需增量，如果绝对值大于绝对值，且小于，那么x与y方向的增量分别为1和m;假如x方向变化大，但大于，那么就采用减量-1和-m作为其“增量”；在其他情况下，y方向使用单位增量（或减量），x方向使用1/m作为增量（或减量）。
(6) 重复第（5）步length次。
(7) 将获得的位置坐标值取整，作为像素的坐标值，并将像素颜色值存入与之相对的帧缓冲器单元中去。
这几种算法各有其特点，数值