基于AJAX技術(shù)的交互式圖形繪制處理系統(tǒng)的設(shè)計(jì)研究

1、. . . . 基于AJAX技術(shù)的交互式圖形繪制處理系統(tǒng)的設(shè)計(jì)研究摘 要 基于AJAX技術(shù)的交互式圖形繪制處理系統(tǒng)主要利用JavaScript技術(shù)和AJAX技術(shù)來(lái)實(shí)現(xiàn)鼠標(biāo)的點(diǎn)擊來(lái)生成一些基本矢量圖形和這些基本矢量圖形組成的復(fù)雜圖形，如：直線，圓，橢圓，矩形，人形。以與這些圖形的移動(dòng)，調(diào)整大小和改變顏色等簡(jiǎn)單操作，利用這些圖形在瀏覽器實(shí)現(xiàn)簡(jiǎn)單的桌面應(yīng)用。整個(gè)動(dòng)態(tài)交互繪制圖形的過(guò)程由JavaScript語(yǔ)言和AJAX來(lái)實(shí)現(xiàn)。在JavaScript語(yǔ)言中并沒(méi)有圖形繪制函數(shù)，我們首先根據(jù)計(jì)算機(jī)圖形學(xué)的基本原理和算法實(shí)現(xiàn)這個(gè)矢量圖形函數(shù)庫(kù)，再在網(wǎng)頁(yè)中的直接調(diào)用庫(kù)函數(shù)來(lái)實(shí)現(xiàn)矢量圖形的繪制。這個(gè)矢量圖形庫(kù)的

2、基本原理：由于JavaScript語(yǔ)言不能直接地操作像素點(diǎn)，所以由單位像素的div對(duì)象來(lái)模擬像素點(diǎn)，進(jìn)而通過(guò)模擬的像素點(diǎn)生成各種基本圖形，如直線、矩形、橢圓等；而且也可以組合生成一些復(fù)雜的圖形，比如人形。在對(duì)圖形的控制的過(guò)程當(dāng)中，主要是對(duì)鼠標(biāo)的各種事件進(jìn)行捕捉，并通過(guò)JavaScript來(lái)實(shí)現(xiàn)各種簡(jiǎn)單事件（比如對(duì)一條直線的繪制，移動(dòng)，放縮，顏色大小設(shè)置）和復(fù)雜的事件（比如對(duì)一些組合圖形，如人形、直線、矩形、橢圓的整體移動(dòng)）。當(dāng)圖形在IE瀏覽器上面進(jìn)行操作時(shí)，通過(guò)Ajax技術(shù)，將數(shù)據(jù)通過(guò)服務(wù)器異步的寫入數(shù)據(jù)庫(kù)，從而實(shí)現(xiàn)網(wǎng)頁(yè)無(wú)刷新的過(guò)程。而在從數(shù)據(jù)庫(kù)讀數(shù)據(jù)的過(guò)程，也是通過(guò)Ajax技術(shù)來(lái)刷新只有被修

3、改的頁(yè)面部分（在回傳的過(guò)程中是使用XML語(yǔ)言來(lái)傳數(shù)據(jù)）。在效率方面，總體來(lái)講，不是特別的高。1使用到服務(wù)器，2在圖形繪制和控制過(guò)程中，要不斷的和服務(wù)器，數(shù)據(jù)庫(kù)來(lái)傳送和回傳數(shù)據(jù)，3 由于是使用div來(lái)模擬像素點(diǎn)，所有在用JavaScript語(yǔ)言來(lái)繪制時(shí)，相應(yīng)的效率也不會(huì)是特別的高?；贏JAX技術(shù)的交互式圖形繪制處理系統(tǒng)的研究雖然存在效率問(wèn)題，但是由于它是在瀏覽器的環(huán)境中實(shí)現(xiàn)的桌面應(yīng)用，所以通過(guò)技術(shù)的發(fā)展未來(lái)用戶計(jì)算機(jī)只要能夠上網(wǎng)和有相應(yīng)的瀏覽器就可以像現(xiàn)在一樣使用桌面應(yīng)用而無(wú)需再安裝相應(yīng)的客戶端。所以基于AJAX技術(shù)的交互式圖形繪制處理系統(tǒng)的研究有積極的意義。關(guān)鍵詞：矢量圖形，事件處理，對(duì)象捕

4、獲，異步保存，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 c

5、an 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 rende

6、ring .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

7、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. i

8、n 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, rect

9、angular, 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 follo

10、ws: 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 pro

11、blems 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 stud

12、y of the project has positive significance.Key Words: vector, graphics, AJAX, javascript第一章 緒論1.1 開發(fā)背景隨著社會(huì)的發(fā)展，從互聯(lián)網(wǎng)誕生，今天的因特網(wǎng)發(fā)生了翻天腹地的變化，最早它只有基于文本的簡(jiǎn)單瀏覽器。供科學(xué)家之間的研究交換心得，如今，它已經(jīng)成為商務(wù)和信息中心，這期間，許多新技術(shù)和新方法相繼登場(chǎng)，但是很少有人將web應(yīng)用和桌面應(yīng)用相聯(lián)系起來(lái)。在最近的2005年2月，AJAX被Jesse James Garret首先提出來(lái)，因?yàn)閺乃岢鲆院?，出現(xiàn)了很多討論和爆炸了的問(wèn)題關(guān)于如何應(yīng)用AJAX和他的優(yōu)缺

13、點(diǎn)。這捫技術(shù)在現(xiàn)實(shí)得的網(wǎng)絡(luò)設(shè)計(jì)中的應(yīng)用與受歡迎度在Google Maps, Google Suggest, Grail, Yahoo Mail中得到了最有力的體現(xiàn)。而在以前，window live 他們主要的亮點(diǎn)是與客戶端連接緊密，這與桌面應(yīng)用非常類似。本課題就是在此背景下，針對(duì)上述問(wèn)題，研究在無(wú)需任何第三方插件或控件前提下跨瀏覽器平臺(tái)的直接在網(wǎng)頁(yè)實(shí)現(xiàn)矢量圖形動(dòng)態(tài)交互繪制和類似的桌面應(yīng)用（UML），從而實(shí)現(xiàn)“胖客戶端”模式。該課題主要包括：基本矢量圖形和復(fù)雜矢量圖形的生成，如：矩形，圓，直線，人形等，以與圖形的放大，縮小，移動(dòng)。1.2 研究的現(xiàn)狀目前關(guān)于用JavaScript腳本語(yǔ)言直接實(shí)現(xiàn)在

14、瀏覽器中生成矢量圖形與動(dòng)態(tài)交互的研究還很少且主要集中在國(guó)外，如Walter Zorn、Mathieu Haller等人的研究。而在國(guó)，基本沒(méi)什么這方面的研究。有的資料，也往往只是轉(zhuǎn)述國(guó)外的一些研究結(jié)果。網(wǎng)頁(yè)矢量圖形要從研究轉(zhuǎn)向大規(guī)模的應(yīng)用和推廣還有很長(zhǎng)的路要走。1.3 研究意義通過(guò)Ajax技術(shù)和圖形學(xué)基礎(chǔ)來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)矢量基本圖形（圓，直線，矩形，橢圓）和復(fù)雜圖形（人形）的動(dòng)態(tài)生成和交互（移動(dòng)，伸縮，異步保存），實(shí)現(xiàn)類似桌面的UML應(yīng)用。使用戶無(wú)需安裝龐大的客戶端而只需要有一個(gè)可以聯(lián)網(wǎng)的瀏覽器就可以使用該應(yīng)用。大大方便了用戶。1.4 開發(fā)工具課題中采用的代碼編輯工具為Yaldex JSFactor

15、y。Yaldex JSFactory是一個(gè)JavaScript編輯器、驗(yàn)證器和調(diào)試器。它是一種網(wǎng)頁(yè)設(shè)計(jì)工具軟件，提供了大量的帶有HTML標(biāo)簽、HTML屬性、HTML事件、JavaScript事件和JavaScript函數(shù)的snippet庫(kù),置各種網(wǎng)頁(yè)特效，你可以通過(guò)點(diǎn)擊鼠標(biāo)把這些效果插入到網(wǎng)頁(yè)中，制作你喜歡的各種效果，并把他們傳到你的上。圖1.1 JSFactory Pro的整體界面1.5 應(yīng)用軟件介紹1.5.1 應(yīng)用服務(wù)器Apache Tomcat/5.5.20Tomcat 服務(wù)器是一個(gè)免費(fèi)的開放源代碼的Web 應(yīng)用服務(wù)器，目前最新版本是6.0.14。本系統(tǒng)用Apache Tomcat/5.

16、5.20。Tomcat是Apache 軟件基金會(huì)（Apache Software Foundation）的Jakarta 系統(tǒng)中的一個(gè)核心系統(tǒng)，由Apache、Sun和其他一些公司與個(gè)人共同開發(fā)而成。由于有了Sun 的參與和支持，最新的Servlet 和JSP 規(guī)總是能在Tomcat 中得到體現(xiàn)，Tomcat 5 支持最新的Servlet 2.4 和JSP 2.0 規(guī)。因?yàn)門omcat 技術(shù)先進(jìn)、性能穩(wěn)定，而且免費(fèi)，因而深受Java 愛(ài)好者的喜愛(ài)并得到了部分軟件開發(fā)商的認(rèn)可，成為目前比較流行的Web 應(yīng)用服務(wù)器。1.5.2 數(shù)據(jù)庫(kù)服務(wù)器MySQL Server 5.0MySQL是一個(gè)小型關(guān)系型

17、數(shù)據(jù)庫(kù)管理系統(tǒng)，開發(fā)者為瑞典MySQL AB公司。目前MySQL被廣泛地應(yīng)用在Internet上的中小型中。由于其體積小、速度快、總體擁有成本低，尤其是開放源碼這一特點(diǎn)，許多中小型為了降低總體擁有成本而選擇了MySQL作為數(shù)據(jù)庫(kù)。第二章 相關(guān)技術(shù)簡(jiǎn)介2.1 矢量圖形和位圖位圖圖形由排列在網(wǎng)格中稱為“像素”的點(diǎn)組成。編輯位圖圖形時(shí)，修改的是像素，而不是線條和曲線。位圖圖形與分辨率有關(guān)，這意味著描述圖像的數(shù)據(jù)被固定到一個(gè)特定大小的網(wǎng)格中。放大位圖圖形將使這些像素在網(wǎng)格中重新進(jìn)行分布，這通常會(huì)使圖像的邊緣呈鋸齒狀。矢量圖形使用稱為“矢量”（包含顏色和位置信息）的線條和曲線呈現(xiàn)圖像。編輯矢量圖形時(shí)，修

18、改的是描述其形狀的線條和曲線的屬性。矢量圖形與分辨率無(wú)關(guān)，這意味著您除了可以在分辨率不同的輸出設(shè)備上顯示它以外，還可以對(duì)其執(zhí)行移動(dòng)、調(diào)整大小、更改形狀或更改顏色等操作，而不會(huì)改變其外觀品質(zhì)。2.2 JavaScript語(yǔ)言簡(jiǎn)介JavaScript語(yǔ)言的前身叫做Live script。自從Sun公司推出著名的Java語(yǔ)言之后，Netscape公司引進(jìn)了Sun公司有關(guān)Java的程序概念，將自己原有的Live script 重新進(jìn)行設(shè)計(jì)，并改名為JavaScript。JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)并具有安全性能的腳本語(yǔ)言，有了JavaScript，可使網(wǎng)頁(yè)變得生動(dòng)。使用它的目的是與HT

19、ML超文本標(biāo)識(shí)語(yǔ)言、Java 腳本語(yǔ)言一起實(shí)現(xiàn)在一個(gè)網(wǎng)頁(yè)中多個(gè)對(duì)象，與網(wǎng)絡(luò)客戶交互作用，從而可以開發(fā)客戶端的應(yīng)用程序。它是通過(guò)嵌入或調(diào)入在標(biāo)準(zhǔn)的HTML語(yǔ)言中實(shí)現(xiàn)的。JavaScript具有很多優(yōu)點(diǎn)： 1 簡(jiǎn)單性 JavaScript是一種腳本編寫語(yǔ)言，它采用小程序段的方式實(shí)現(xiàn)編程，像其它腳本語(yǔ)言一樣，JavaScript同樣已是一種解釋性語(yǔ)言，它提供了一個(gè)簡(jiǎn)易的開發(fā)過(guò)程。它的基本結(jié)構(gòu)形式與C、C+、VB、Delphi十分類似。但它不像這些語(yǔ)言一樣，需要先編譯，而是在程序運(yùn)行過(guò)程中被逐行地解釋。它與HTML標(biāo)識(shí)結(jié)合在一起，從而方便用戶的使用操作。 2 動(dòng)態(tài)性 JavaScript是動(dòng)態(tài)的，它可

20、以直接對(duì)用戶或客戶輸入做出響應(yīng)，無(wú)須經(jīng)過(guò)Web服務(wù)程序。它對(duì)用戶的反映響應(yīng)，是采用以事件驅(qū)動(dòng)的方式進(jìn)行的。所謂事件驅(qū)動(dòng)，就是指在主頁(yè)中執(zhí)行了某種操作所產(chǎn)生的動(dòng)作，就稱為”事件”。比如按下鼠標(biāo)、移動(dòng)窗口、選擇菜單等都可以視為事件。當(dāng)事件發(fā)生后，可能會(huì)引起相應(yīng)的事件響應(yīng)。3 跨平臺(tái)性 JavaScript是依賴于瀏覽器本身，與操作環(huán)境無(wú)關(guān)，只要能運(yùn)行瀏覽器的計(jì)算機(jī)，并支持JavaScript的瀏覽器就可以正確執(zhí)行.JavaScript是一種基于客戶端瀏覽器的語(yǔ)言，用戶在瀏覽中填表、驗(yàn)證的交互過(guò)程只是通過(guò)瀏覽器對(duì)調(diào)入HTML文檔中的JavaScript源代碼進(jìn)行解釋執(zhí)行來(lái)完成的，即使是必須調(diào)用CGI

21、的部分，瀏覽器只將用戶輸入驗(yàn)證后的信息提交給遠(yuǎn)程的服務(wù)器，大大減少了服務(wù)器的開銷。 2.3 JavaScript事件處理機(jī)制（1）單擊事件onClick當(dāng)用戶單擊鼠標(biāo)按鈕時(shí)，產(chǎn)生onClick事件。同時(shí)onClick指定的事件處理程序或代碼將被調(diào)用執(zhí)行。通常在下列基本對(duì)象中產(chǎn)生：l button（按鈕對(duì)象）l checkbox（復(fù)選框）或（檢查列表框）l radio （單選鈕） l reset buttons（重要按鈕） l submit buttons（提交按鈕） 例如可通過(guò)下列按鈕激活change()文件： 在onClick事件觸發(fā)后，可以使用自己編寫的函數(shù)作為事件處理程序，也可以使用Ja

22、vaScript中部的函數(shù)。還可以直接使用JavaScript的代碼等。例：Input type=button value= onclick=alert(這是一個(gè)例子)。（2）onChange改變事件 當(dāng)利用text或texturea元素輸入字符值改變時(shí)發(fā)該事件，同時(shí)當(dāng)在select表格項(xiàng)中一個(gè)選項(xiàng)狀態(tài)改變后也會(huì)引發(fā)該事件。例： （3）選中事件onSelect 當(dāng)Text或Textarea對(duì)象中的文字被加亮后，引發(fā)該事件。 （4）獲得焦點(diǎn)事件onFocus 當(dāng)用戶單擊Text或textarea以與select對(duì)象時(shí)，產(chǎn)生該事件。此時(shí)該對(duì)象成為前臺(tái)對(duì)象。 （5）失去焦點(diǎn)onBlur 當(dāng)text對(duì)

23、象或textarea對(duì)象以與select對(duì)象不再擁有焦點(diǎn)、而退到后臺(tái)時(shí)，引發(fā)該文件，它與onFocas事件是一個(gè)對(duì)應(yīng)的關(guān)系。 （6）載入文件onLoad 當(dāng)文檔載入時(shí)，產(chǎn)生該事件。onLoad一個(gè)作用就是在首次載入一個(gè)文檔時(shí)檢測(cè)cookie的值，并用一個(gè)變量為其賦值，使它可以被源代碼使用。 （7）卸載文件onUnload 當(dāng)Web頁(yè)面退出時(shí)引發(fā)onUnload事件，并可更新Cookie的狀態(tài)。2.4 AJAX技術(shù)2.4.1 AJAX技術(shù)簡(jiǎn)介Ajax不是一個(gè)技術(shù)，它實(shí)際上是幾種技術(shù)，每種技術(shù)都有其獨(dú)特這處，合在一起就成了一個(gè)功能強(qiáng)大的新技術(shù)。Ajax包括:u HTML和CSSu 使用文檔對(duì)象模型

24、(Document Object Model)作動(dòng)態(tài)顯示和交互u 使用XML和XSLT做數(shù)據(jù)動(dòng)態(tài)進(jìn)行交互和操作u 使用XML Request進(jìn)行異步數(shù)據(jù)接收u 使用JavaScript將它們綁定在一起Ajax的優(yōu)點(diǎn):u 適用不同瀏覽器和跨平臺(tái)的能力u Ajax應(yīng)用使用開放標(biāo)準(zhǔn)的技術(shù)，而不用使用專用軟件u 開發(fā)花費(fèi)小u 代碼能夠優(yōu)化和分開u 更豐富的交互。u 刷新等待的時(shí)間短、更快的速度u Ajax被廣泛的采用u 與其他技術(shù)的無(wú)縫連接2.4.2 AJAX工作原理在客戶端的AJAX應(yīng)用有三層組成：第一層，用戶界面，第二層，JavaScript代碼，第三層，AJAX引擎。在用戶界面這一層中要用到XH

25、TML, CSS和DOM。XHTML通過(guò)標(biāo)簽來(lái)顯示網(wǎng)頁(yè)的容。CSS通過(guò)消除網(wǎng)頁(yè)的冗余提供網(wǎng)頁(yè)容和樣式的顯示。CSS在不同的文件中的規(guī)則不同在實(shí)現(xiàn)。DOM規(guī)提供一種方法進(jìn)行網(wǎng)頁(yè)容的動(dòng)態(tài)訪問(wèn)，樣式的更新和結(jié)構(gòu)的變化。當(dāng)客戶端所有的被重載時(shí)。事件接聽器和XHR被創(chuàng)建和激活。用戶的交互產(chǎn)生事件，事件被叫做事件接聽器的JavaScript函數(shù)捕捉，如果事件有特殊的代碼要執(zhí)行，那么這些事件將被不同的JavaScript函數(shù)執(zhí)行。第二副圖顯示這一過(guò)程。在這一個(gè)例子中，事件接聽器把數(shù)據(jù)發(fā)給更新函數(shù)，這些函數(shù)利用DOM和CSS來(lái)更新容，顯示形式或者數(shù)據(jù)結(jié)構(gòu)。這不是一個(gè)外部調(diào)用，這只是在客戶端而且結(jié)果立刻顯示出來(lái)

26、。在第二種情況中，事件接聽器把數(shù)據(jù)傳給XHR，XHR對(duì)象的創(chuàng)建在不同的瀏覽器的不同而不同，IE用Active Object,類。Frefox和Safari用XML Request對(duì)象。雖然這些有不同的方法，但是結(jié)果一樣。XHR通過(guò) 或者 S協(xié)議異步的給服務(wù)器發(fā)送請(qǐng)求。當(dāng) 請(qǐng)求被服務(wù)器端處理時(shí)，他被分成物五種狀態(tài)：未被接受，正在，完成。交互，結(jié)束。XHR對(duì)象通過(guò)事件來(lái)告訴我們各個(gè)狀態(tài)的變化。當(dāng)服務(wù)器端在處理網(wǎng)絡(luò)應(yīng)用的時(shí)候，數(shù)據(jù)的驗(yàn)證是必要的。特別是要訪問(wèn)數(shù)據(jù)庫(kù)時(shí)尤其重要。數(shù)據(jù)庫(kù)和網(wǎng)絡(luò)應(yīng)用可以通過(guò)訪問(wèn)控制，密碼，和用戶規(guī)則來(lái)加以保護(hù)。當(dāng)數(shù)據(jù)庫(kù)返回新的數(shù)據(jù)給網(wǎng)絡(luò)應(yīng)用時(shí)，數(shù)據(jù)被轉(zhuǎn)化為特定的形式（HTM

27、L，XTHML等等）。然后網(wǎng)絡(luò)應(yīng)用給客戶端的XHR對(duì)象回復(fù)。當(dāng)回復(fù)結(jié)束時(shí)，狀態(tài)變?yōu)橥瓿?，XHR把回復(fù)結(jié)果發(fā)給JavaScript函數(shù)來(lái)解析。數(shù)據(jù)通過(guò)特定的數(shù)據(jù)結(jié)構(gòu)更新函數(shù)通過(guò)DOM和CSS將數(shù)據(jù)加到網(wǎng)頁(yè)中。在這個(gè)模型中，具有簡(jiǎn)潔的代碼和單獨(dú)的JavaScript函數(shù)完成。圖 2.2: 傳統(tǒng)Web應(yīng)用的同步交互過(guò)程(上)和Ajax應(yīng)用的異步交互過(guò)程的比較(下).2.5 點(diǎn)和直線的生成算法點(diǎn)和直線是描繪圖形的最基本和最常用的元素，許多復(fù)雜的圖形都是由點(diǎn)和直線段構(gòu)成的。在數(shù)學(xué)上，點(diǎn)是一個(gè)抽象的坐標(biāo)位置，沒(méi)有面積或大小。數(shù)學(xué)上定義的直線是由無(wú)數(shù)個(gè)點(diǎn)構(gòu)成的。它只有長(zhǎng)度而沒(méi)有寬度。在光柵圖形中，點(diǎn)是由有一

28、定大小和面積的像素來(lái)表示的；而由掃描轉(zhuǎn)換得到的直線段，則是在有限個(gè)像素構(gòu)成的陣列中確定的最佳逼近該直線段的一個(gè)像素序列。 由于光柵顯示器的特點(diǎn)，是得除了特殊的情況外，不可能從離散單元中一個(gè)像素到另一個(gè)像素直接畫一條精確的直線。直線只能用一系列靠近直線的像素近似表示。只有當(dāng)直線是水平，豎直或者45度時(shí)，它才是像素組成的直線，其他指向都成階梯狀。這種現(xiàn)象稱為走樣或者鋸齒現(xiàn)象。 根據(jù)光柵圖形的特點(diǎn)，為直線的生成設(shè)計(jì)繪制算法應(yīng)該滿足一下4個(gè)要求：(1) 所繪制的直線應(yīng)該是直的，不應(yīng)出現(xiàn)階梯效應(yīng)。(2) 所繪制的直線應(yīng)該具有精確的起點(diǎn)和終點(diǎn)。(3) 所顯示的亮度或顏色應(yīng)該在其長(zhǎng)度上是均勻不變的，與直線的

29、長(zhǎng)度和方向無(wú)關(guān)。(4) 直線生成的速度要快。第三章 交互式圖形繪制處理系統(tǒng)的原理與若干關(guān)鍵技術(shù)分析3.1 AJAX工作流程3.1.1 初始化對(duì)象并發(fā)出XML Request請(qǐng)求為了讓JavaScript可以向服務(wù)器發(fā)送 請(qǐng)求，必須使用XML Request對(duì)象。使用之前，要先將XML Request對(duì)象實(shí)例化。但是各個(gè)瀏覽器對(duì)這個(gè)實(shí)例化過(guò)程實(shí)現(xiàn)不同，為了讓編寫的程序能夠跨瀏覽器運(yùn)行，可以寫成：If(window. XML Request) XML Req=new XML Request(); else if(window.ActiveXObject) try XML Req=new Activ

30、eXObject(“Msxml2.XML ”); catch(e) try XML Req=newActiveXObject(“Microsoft. XML ”); catch(e) 3.1.2 指定響應(yīng)處理函數(shù)接下來(lái)要指定當(dāng)服務(wù)器返回信息時(shí)客戶端的處理方式。只要將相應(yīng)的處理函數(shù)名稱賦給XML Request對(duì)象的onreadystatechange屬性就可以了。比如：XML Req. Onreadystatechangefunction（）；3.1.3 發(fā)出 請(qǐng)求指定相應(yīng)處理函數(shù)之后，就可以向服務(wù)器發(fā)出 請(qǐng)求了。這一步調(diào)用XML Request對(duì)象的open和send方法。XML Req.o

31、pen（”GET”,url,true）；XML Req.send（null）；3.1.4 處理服務(wù)器返回的信息在第二步我們已經(jīng)指定了響應(yīng)處理函數(shù)，這一步是用來(lái)描述處理函數(shù)具體應(yīng)該做的事情。首先，它要檢查XML Request對(duì)象的readyState值，判斷請(qǐng)求目前的狀態(tài)。當(dāng)readyState值為4的時(shí)候，代表服務(wù)器已經(jīng)傳回所有的信息，可以開始處理信息并更新頁(yè)面容了。例如：if(XML Req.readyState=4)/信息已經(jīng)返回，可以開始處理else/信息還沒(méi)有返回，等待服務(wù)器返回信息后，還需要判斷返回的 狀態(tài)碼，確定返回的頁(yè)面沒(méi)有錯(cuò)誤。其中，200代表頁(yè)面正常，基本程序結(jié)構(gòu)如下：if

32、(XML Req.staus=200)/頁(yè)面正常，可以開始處理信息else/頁(yè)面有問(wèn)題3.1.5 XML Request對(duì)成功返回的信息有兩種處理方式一種是resonseText：即將傳回的信息當(dāng)字符串使用；另一種為responseXML：即將傳回的信息當(dāng)XML文檔使用，可以用DOM處理。這個(gè)系統(tǒng)中，在剛打開頁(yè)面進(jìn)行初始化時(shí)，要從數(shù)據(jù)庫(kù)中提取每個(gè)圖形的相關(guān)的數(shù)據(jù)，考慮到傳輸?shù)拇螖?shù)和性能，所有選擇了使用responseXML。因?yàn)閞esponseXML可以將全部數(shù)據(jù)一次性的傳到客戶端上。然后在客戶端通過(guò)使用DOM技術(shù)，將各個(gè)圖形的數(shù)據(jù)分類出來(lái)。3.2 后臺(tái)處理程序這里為了提高程序以后的維護(hù)性，在

33、后臺(tái)編寫了四個(gè).java程序與圖形異步交互的控制。以下是對(duì)這四個(gè)程序的簡(jiǎn)單介紹。DbManager.java：主要是處理連接數(shù)據(jù)庫(kù)，和一些相關(guān)的操作：查詢和修改數(shù)據(jù)。GetServlet.java： 是將數(shù)據(jù)傳輸過(guò)來(lái)的函數(shù)，傳輸?shù)念愋褪莤ml。MessageEO.java：這里使用了面向?qū)ο蟮母拍睢Ｒ粋€(gè)MessageEO代表一個(gè)圖形的全部參數(shù)。1、通過(guò)使用DbManager到數(shù)據(jù)庫(kù)中提取相關(guān)圖形的所有的數(shù)據(jù)。2、對(duì)相關(guān)的數(shù)據(jù)進(jìn)行類型的轉(zhuǎn)變。3、通過(guò)使用getXXXID()來(lái)獲取數(shù)據(jù)，使用setXXXID(類型 XXXID)來(lái)修改數(shù)據(jù)。SendServlet.java：將傳過(guò)來(lái)的數(shù)據(jù)寫入到數(shù)據(jù)庫(kù)

34、中。使用request.getParameter(參數(shù));來(lái)取出從客戶端傳過(guò)來(lái)的數(shù)據(jù)，并將這些數(shù)據(jù)的類型改成響應(yīng)的類型，并通過(guò)調(diào)用MessageEO將數(shù)據(jù)寫入數(shù)據(jù)庫(kù)中3.3 點(diǎn)的生成原理點(diǎn)是描繪圖形的最基本和最常用的元素，許多復(fù)雜的圖形都是由點(diǎn)構(gòu)成的。在數(shù)學(xué)上，點(diǎn)是一個(gè)抽象的坐標(biāo)位置，沒(méi)有面積或大小。在光柵圖形中，點(diǎn)是由有一定大小和面積的像素來(lái)表示的。光柵圖形中點(diǎn)也稱為像素（Pixel），它與幀存中的地址單元是一一對(duì)應(yīng)的。如果是光柵顯示器。則在屏幕上相對(duì)應(yīng)的坐標(biāo)位置上選中那個(gè)像素，并將其顏色或其他屬性值裝入幀存中的相應(yīng)單元。在瀏覽器中，JavaScript語(yǔ)言并不能去掌控像素點(diǎn)。在這里，用足夠

35、小的div元素來(lái)模擬像素點(diǎn)。在頁(yè)面中生成一個(gè)div元素，把它的長(zhǎng)寬屬性都設(shè)置為單位像素，把得到的這個(gè)div元素作為模擬的像素點(diǎn)。3.4 直線生成算法3.4.1 中點(diǎn)畫線算法 中點(diǎn)畫線算法是在畫直線的過(guò)程中，當(dāng)直線前一像素點(diǎn)為（xp，yp），下一個(gè)像素點(diǎn)可選擇點(diǎn)P1(xp+1 , yp)或者P2(xp+1 ,yp+1)，若點(diǎn)M為P1P2的中點(diǎn)，Q為理想直線與x=xp+1垂線的交點(diǎn)。若M在Q的下方，則P2應(yīng)為下一個(gè)像素點(diǎn)；M在Q的上方，則P1為下一像素點(diǎn)。這就是中點(diǎn)畫線的基本原理。圖3.1 中點(diǎn)畫直線法每步迭代涉與的像素和中點(diǎn)示意圖實(shí)現(xiàn)步驟：1) 令直線L(P0(x0 ,y0)P1(x1, y1)

36、,其方程為F（x，y）=ax+by+c=0，a=y0-y1, b=x1-x0 ,c=x0y1-x1y0; 點(diǎn)和L的關(guān)系：on：F(x,y)=0; up:F(x,y)0;down: :F(x,y)0.所以判斷中點(diǎn)在理想點(diǎn)的上放還是下方，只要將點(diǎn)M(xp+1 , yp+0.5)代入F(x,y)看其符號(hào)。構(gòu)成方程式：D=F(M)=F(xp+1 , yp+0.5)2) 判斷D是否小于零，如果D0，則取P1為下一像素。3.4.2 Bresenhanm畫線算法 Bresenhanm畫線算法是由Bresenhanm提出的一種直線生成算法。與中點(diǎn)畫線算法類似， 先考慮0m1時(shí)，直線的掃描轉(zhuǎn)換過(guò)程。在這種情況下

37、，沿直線路徑的像素位置在x方向以單位間距取樣。從給定的線段起點(diǎn)開始，每步x方向向右移動(dòng)一個(gè)單位，并在掃描線的方向向右移動(dòng)一個(gè)單位，并在掃描線的y值最接近直線軌跡的那個(gè)像素上繪出該點(diǎn)?，F(xiàn)在要討論的是如何確定y的取值。假如掃描轉(zhuǎn)換已進(jìn)行到第k步，其像素在（, ）位置上，下一步是要確定在列+1上應(yīng)繪制的像素究竟應(yīng)該選P1(+1, )還是P2（+1, +1）位置，如圖3.2所示。在取樣位置處（顯然，=+1），定義參數(shù)和來(lái)描述和像素分別與理想直線路徑的垂直偏移量，在像素位置+1處理想直線的y坐標(biāo)值為：圖 3.2像素下一步取值的選擇y=m(+1)+b (3-1) 有：=y- (3-2)=m(+1)+b-(

38、3-3)=(+1)-y (3-4)=+1-m(+1)-b (3-5)它們的差為：-=2m(+1)-2+2b-1 (3-6)根據(jù)式子(3-6)有： (3-7)可得第k步的決策參數(shù): (3-8) (3-9其中，c為一常量，值為,它與像素位置的選擇無(wú)關(guān)?？梢?jiàn)，當(dāng)時(shí)，0，位置上的像素比+1處的更接近理想直線段，取點(diǎn)；否則，應(yīng)取點(diǎn)。 (3-10)式(2-10) 減去式(2-9)，有： (3-11)因?yàn)?，有?(3-12)其中，()項(xiàng)可取0或取1，如果0，則=0；否則=1。由前面式子推出： (3-13)從線段的起點(diǎn)坐標(biāo)開始，在每個(gè)x參數(shù)位置對(duì)決策參數(shù)PI進(jìn)行遞歸運(yùn)算，就可確定關(guān)于該直線的點(diǎn)的序列。下面給出

39、的是|m|1時(shí)的Bresenhanm畫線算法描述。(1) 輸入所定義直線段的兩個(gè)端點(diǎn)。(2) 將左端點(diǎn)裝入幀緩沖器,畫出第一個(gè)點(diǎn)。(3) 計(jì)算，2和2-2的值，并得到初步?jīng)Q策參數(shù)。(4) 從k=0開始，沿直線在每個(gè)處進(jìn)行下列測(cè)試：如果0）的直線,如果直線的斜率小于1，應(yīng)取x的坐標(biāo)單位步長(zhǎng)為1，然后計(jì)算相應(yīng)的y值的坐標(biāo)值。這里不能取y坐標(biāo)變化量為1，否則y的變化量會(huì)產(chǎn)生很大的x變化量： (3-17)對(duì)于斜率大于1的直線，應(yīng)把x和y交換，否則x的單位變化量可能引起很大的y坐標(biāo)變化量。這時(shí)把y單位步長(zhǎng)改為單位1，然后計(jì)算相應(yīng)的x的值：（3-18）上述兩式均假設(shè)點(diǎn)沿直線從左到右，如果端點(diǎn)順序到過(guò)來(lái)，則

40、開始端點(diǎn)在右端，結(jié)束端點(diǎn)在左端，則=1.且 (3-19) 或者當(dāng)斜率大于1時(shí)，=1，且（3-20）DDA算法的描述如下：(1) 該算法以給定的直線段的兩個(gè)端點(diǎn)作為輸入?yún)?shù)。(2) 初始化，將初值和各加上0.5，以保證計(jì)算精度。(3) 將兩端點(diǎn)間的水平和垂直差值賦予參數(shù)dx和dy，。(4) 選取dx和dy中絕對(duì)值大的一個(gè)最為步數(shù)length。(5) 從像素位置(,)開始，確定生成下一個(gè)像素位置每步所需增量，如果絕對(duì)值大于絕對(duì)值，且小于，那么x與y方向的增量分別為1和m;假如x方向變化大，但大于，那么就采用減量-1和-m作為其“增量”；在其他情況下，y方向使用單位增量（或減量），x方向使用1/m作

41、為增量（或減量）。(6) 重復(fù)第（5）步length次。(7) 將獲得的位置坐標(biāo)值取整，作為像素的坐標(biāo)值，并將像素顏色值存入與之相對(duì)的幀緩沖器單元中去。這幾種算法各有其特點(diǎn)，數(shù)值微分畫線算法的實(shí)現(xiàn)相對(duì)比較簡(jiǎn)單，計(jì)算工作量較少，運(yùn)算類型也比較單純.但由于這個(gè)算法中y與m必須是浮點(diǎn)數(shù)，而且每一步運(yùn)算都必須對(duì)y進(jìn)行舍入取整,這就使得它不利于用硬件實(shí)現(xiàn)。中點(diǎn)畫線算法和Bresenhanm畫線算法都隱含著對(duì)逼近過(guò)程中誤差項(xiàng)的處理，這樣就使得直線生成更精確，有效，而且還避免了小數(shù)運(yùn)算。使得實(shí)現(xiàn)過(guò)程更簡(jiǎn)單，快速。3.5 橢圓生成算法由于橢圓的特征使得橢圓的算法跟畫圓的算法思想一樣，這里先介紹下Bresenh

42、am畫圓算法。為了不是一般性，我們假設(shè)圓心在原點(diǎn)否則可以把求到圓上的點(diǎn)做坐標(biāo)變換： （3-21）（3-22）通過(guò)以上的變換便可得到圓心在任一點(diǎn)的圓上的坐標(biāo)。在這里我們考慮第一象限八分之一圓弧的畫法。這個(gè)算法的思想是在每一步都選擇一個(gè)距離圓周最近點(diǎn)，使其誤差項(xiàng)：（3-23）在每一步達(dá)到最小。假設(shè)是第一象限八分之一圓弧的第一個(gè)像素點(diǎn)，根據(jù)圓弧的走向，下一個(gè)像素點(diǎn)應(yīng)從或者中一個(gè)，選擇離圓弧最近的像素點(diǎn)作為下一個(gè)點(diǎn)，并對(duì)一下誤差項(xiàng)進(jìn)行比較：（3-24）（3-25）引入一下判別式：（3-26） 當(dāng)d=0時(shí)， 則選擇，d0時(shí)，則選擇。由于（3-26）涉與平方且絕對(duì)值運(yùn)算，所以效率很低，我們可以用如下方法進(jìn)

43、行簡(jiǎn)化，由圖形分析，八分之一畫圓過(guò)程只有如下五種情況：圖 3.3像素下一步取值的選擇 1, H與L在圓，D（）0, D（）0.根據(jù)圖形分析，最理想的應(yīng)該為。2，在圓上，在圓，D（）=0, D（）0, D（）0.4，在圓外，在圓上，D（）=0, D（）0，最理想的點(diǎn)為。5，在圓外，在圓外，D（）0, D（）0, D（）0.因此，（3-26） 可以改寫為： （3-27）對(duì)于情況1，2由于D（）0, D（）0, D（）0。代入（3-27）得，按照判別條件，應(yīng)該先則。這和從圖上分析是一致的，所以可以用（3-27）作為判別式。3.6 矩形生成算法矩形就是四條直線段圍成，而且是四條特殊的直線段，它們是垂直和水平的，所以矩形的繪制很簡(jiǎn)單，在得到矩形寬度后，直接調(diào)用畫點(diǎn)函數(shù)或者調(diào)用畫線函數(shù)四次就可以實(shí)現(xiàn)矩形的繪制，要注意的就是各個(gè)直線段之間頂點(diǎn)的銜接，也就是參數(shù)的設(shè)置要整齊。第四章 系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)4.1 總體設(shè)計(jì)此系統(tǒng)包括兩個(gè)大的部分，一是矢量圖形的生成部分，主要涉與簡(jiǎn)單圖形的函數(shù)的繪制，通過(guò)計(jì)算機(jī)圖形學(xué)中相應(yīng)的圖形繪制思想，實(shí)現(xiàn)交互式圖形繪制處理系統(tǒng)的函數(shù)，這些函數(shù)都是放在一個(gè) graphics.js文件中，在這個(gè)js文件中是實(shí)現(xiàn)圖形繪制的各個(gè)函數(shù)，如繪制