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

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

2、理： rh t* javascript語言不能直接地操作像索點，所以rfl單位像索的div 對象來模擬像素點，進而通過模擬的像素點生成各種基本圖形，如直 線、矩形、橢圓等；而且也可以組合生成一些復(fù)雜的圖形，比如人形。 在對圖形的控制的過程當中，主要是對鼠標的各種事件進行捕捉，并 通過javascript來實現(xiàn)各種簡單事件（比如對一條直線的繪制，移動, 放縮，顏色大小設(shè)置）和復(fù)雜的事件（比如對一些組合圖形，如人形、 直線、矩形、橢圓的整體移動）。當圖形在ie瀏覽器上面進行操作時, 通過ajax技術(shù)，將數(shù)據(jù)通過服務(wù)器異步的寫入數(shù)據(jù)庫，從而實現(xiàn)網(wǎng) 頁無刷新的過程。而在從數(shù)據(jù)庫讀數(shù)據(jù)的過程，也是通過a

3、jax技術(shù) 來刷新只有被修改的頁面部分（在回傳的過程中是使用xml語言來 傳數(shù)據(jù)）。在效率方面，總體來講，不是特別的高。1使用到服務(wù)器，2在 圖形繪制和控制過程中，要不斷的和服務(wù)器，數(shù)據(jù)庫來傳送和回傳數(shù) 據(jù)，3由于是使用div來模擬像素點，所有在用javascript語言來繪 制時，相應(yīng)的效率也不會是特別的高?；赼jax技術(shù)的交互式圖形繪制處理系統(tǒng)的研究雖然存在效 率問題，但是由于它是在瀏覽器的環(huán)境中實現(xiàn)的桌面應(yīng)用，所以通過 技術(shù)的發(fā)展未來用戶計算機只要能夠上網(wǎng)和有相應(yīng)的瀏覽器就可以 像現(xiàn)在一樣使用桌面應(yīng)用而無需再安裝相應(yīng)的客戶端。所以基于 ajax技術(shù)的交互式圖形繪制處理系統(tǒng)的研究有積極的

4、意義。關(guān)鍵詞：矢量圖形，事件處理，對象捕獲，異步保存，ajax,javascriptabstractin 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

5、 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 function

6、s 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 graphi

7、cs 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

8、 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 d

9、olls, 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 pagein the aspect of the efficiency, it is not particularly high. the re

10、asons 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

11、 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. th

12、erefore, the study of the project has positive significance.key words: vector, graphics, ajax, javascript第一章緒論1.1 開發(fā)背景隨著社會的發(fā)展，從互聯(lián)網(wǎng)誕生，今天的因特網(wǎng)發(fā)生了翻天腹地的變化，最 早它只有基于文本的簡單瀏覽器。供科學(xué)家z間的研究交換心得，如今，它已經(jīng) 成為商務(wù)和信息中心，這期間，許多新技術(shù)和新方法相繼登場，但是很少冇人將 web應(yīng)用和桌面應(yīng)用相聯(lián)系起來。在最近的2005年2月，ajax被jesse james garret首先提岀來，因為從它提出以后，出現(xiàn)了很多討論和爆炸

13、了的問題關(guān)于如 何應(yīng)用ajax和他的優(yōu)缺點。這捫技術(shù)在現(xiàn)實得的網(wǎng)絡(luò)設(shè)計屮的應(yīng)用與受歡迎度 在 google maps, google suggest, grail, yahoo mail 中得到了最有力的體現(xiàn)。而在 以前，window live他們主要的亮點是與客戶端連接緊密，這與桌面應(yīng)用非常類 似。本課題就是在此背景下，針對上述問題，研究在無需任何第三方插件或控件 前捉下跨瀏覽器平臺的直接在網(wǎng)頁實現(xiàn)矢量圖形動態(tài)交互繪制和類似的桌而應(yīng) 用（uml）,從而實現(xiàn)“胖客戶端”模式。該課題主要包括：基本矢量圖形和復(fù) 雜矢量圖形的生成，如：矩形，圓，直線，人形等，以及圖形的放犬，縮小，移 動。1.2研究

14、的現(xiàn)狀目前關(guān)于用javascript腳木語言直接實現(xiàn)在瀏覽器中生成矢量圖形及動態(tài)交 互的研究還很少且主要集屮在國外，如walter zorn> mathieu haller等人的研究。 而在國內(nèi)，基本沒什么這方而的研究。有的資料，也往往只是轉(zhuǎn)述國外的-些研 究結(jié)果。網(wǎng)頁矢量圖形要從研究轉(zhuǎn)向大規(guī)模的應(yīng)用和推廣還有很長的路要走。1.3研究意義通過ajax技術(shù)和圖形學(xué)基礎(chǔ)來實現(xiàn)網(wǎng)頁矢量基本圖形（圓，直線，矩形， 橢圓）和復(fù)雜圖形（人形）的動態(tài)生成和交互（移動，仲縮，異步保存），實現(xiàn) 類似桌面的uml應(yīng)用。使用戶無需安裝龐大的客戶端而只需要有一個可以聯(lián)網(wǎng) 的瀏覽器就可以使用該應(yīng)用。大大方便了用戶

15、。1.4開發(fā)工具課題中采用的代碼編輯工具為yaldex jsfactoryo yaldex jsfactory是一個 javascript編輯器、驗證器和調(diào)試器。它是一種網(wǎng)頁設(shè)計工具軟件，提供了大量 的帶有html標簽、html屬性、html事件、javascript事件和javascript函 數(shù)的snippet庫,內(nèi)置各種網(wǎng)頁特效，你可以通過點擊鼠標把這些效果插入到網(wǎng)貝 屮，制作你喜歡的各種效果，并把他們傳到你的網(wǎng)站上。yaldex1）:范履林孕業(yè)設(shè)汁卜“i二 lj| j sj 加 fw 0丨 爭b browser, display user informal s o buttons an

16、d links effects dates a nd clocksedocument effectss o forms effectslogins and passwordse o menus and navigalion±i 二 miscellaneousm 二 mouse cursorsel 厲 popup windows o status effectss o text effectsel o title bar effects® o window effectsxdraw.htm12345678910111213141516<head><t itl

17、ex/title><script src=rruz_jsgraphics jsrr t.ype=,ftext/javascriptrr></script></head><body><script src=rrwz_dragdrop . jsrr type=text/javascript></ script><table><tr><td width=rr30rr>zjfile edit view html atements functions history jscript lool

18、s debugging help0八曰0 1 x ri 1 >9* 丨 * 興當 ® a g (21 vb z uul ol f+ f口 口 葩亙 h1 9(7 (7<s> fun if if.e for f .in whi dojm swi with tryoutputain 6icol 6insert31.42 kb|ffjm |cap|scrl2007-6-101232112/70 unchanged圖1.1 jsfactory pro的整體界面1.5應(yīng)用軟件介紹1.5.1 應(yīng)用服務(wù)器 apache tomcat/5.5.20tomcat服務(wù)器是一個免費的開放

19、源代碼的web應(yīng)用服務(wù)器，目前最新版 木是 6.0.14。木系統(tǒng)用 apache tomcat/5.5.20。tomcat 是 apache 軟件基金會(apache software foundation)的 jakarta 系 統(tǒng)中的一個核心系統(tǒng)，由apache> sun和jt他一些公司及個人共同開發(fā)而成。 由于有了 sun的參與和支持,最新的servlet和jsp規(guī)范總是能在tomcat中得 到體現(xiàn)，tomcat 5支持最新的servlet 2.4和jsp 2.0規(guī)范。因為tomcat技術(shù)先 進、性能穩(wěn)定，而且免費，因而深受java愛好者的喜愛并得到了部分軟件開發(fā) 商的認可，成為目

20、前比較流行的web應(yīng)用服務(wù)器。1.5.2 數(shù)據(jù)庫服務(wù)器 mysql server 5.0mysql是一個小型關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，開發(fā)者為瑞典mysql ab公司。 目前mysql被廣泛地應(yīng)用在internet ±的中小型網(wǎng)站中。市-丁淇體積小、速度 快、總體擁有成木低，尤其是開放源碼這一特點，許多中小型網(wǎng)站為了降低網(wǎng)站 總體擁有成本而選擇了 mysql作為網(wǎng)站數(shù)據(jù)庫。第二章相關(guān)技術(shù)簡介2.1矢量圖形和位圖位圖圖形由排列在網(wǎng)格屮稱為“像素''的點組成。編輯位圖圖形時，修改的是 像素，而不是線條和曲線。位圖圖形與分辨率有關(guān)，這意味著描述圖像的數(shù)據(jù)被 固定到一個特定大小的

21、網(wǎng)格中。放大位圖圖形將使這些像索在網(wǎng)格中重新進行分 布，這通常會使圖像的邊緣呈鋸齒狀。矢量圖形使用稱為“矢量”（包含顏色和位置信息）的線條和曲線呈現(xiàn)圖像。 編輯矢量圖形時，修改的是描述其形狀的線條和曲線的屈性。矢量圖形與分辨率 無關(guān)，這意味著您除了可以在分辨率不同的輸出設(shè)備上顯示它以外，還可以對其 執(zhí)行移動、調(diào)整大小、更改形狀或更改顏色等操作，而不會改變具外觀品質(zhì)。2.2 javascript 語言簡介javascript語言的前身叫做live scripto自從sun公司推出著名的java語言 之后，netscape公司引進了 sun公司有關(guān)java的程序概念，將自己原有的live scri

22、pt重新進行設(shè)計，并改名為javascript®javascript是一種基于對象和事件驅(qū)動并具有安全性能的腳本語言，有了 javascript,可使網(wǎng)頁變得生動。使用它的口的是與html超文本標識語言、java 腳本語言一起實現(xiàn)在一個網(wǎng)頁中鏈接多個對象，與網(wǎng)絡(luò)客戶交互作用，從而町以 開發(fā)客戶端的應(yīng)用程序。它是通過嵌入或調(diào)入在標準的html語言中實現(xiàn)的。javascript具有很多優(yōu)點：1簡單性 javascript是一種腳本編寫語言，它采用小程序段的方式實現(xiàn)編 程，像其它腳本語言一樣javascript同樣已是一種解釋性語言，它捉供了一個 簡易的開發(fā)過程。它的基本結(jié)構(gòu)形式與c、c+

23、、vb、delphi十分類似。但它不 像這些語言一樣，需耍先編譯，而是在程序運行過程中被逐行地解釋。它與html 標識結(jié)合在一起，從而方便用戶的使用操作。2動態(tài)性 javascript是動態(tài)的，它可以直接對用戶或客戶輸入做出響 應(yīng)，無須經(jīng)過web服務(wù)程序。它對用戶的反映響應(yīng)，是采用以事件張動的方式 進行的。所謂事件驅(qū)動，就是指在主頁屮執(zhí)行了某種操作所產(chǎn)生的動作，就稱為” 事件"。比如按卜-鼠標、移動窗口、選擇菜單等都可以視為事件。當事件發(fā)生后, 可能會引起相應(yīng)的事件響應(yīng)。3跨平臺性javascript是依賴于瀏覽器本身，與操作環(huán)境無關(guān)，只要能運行瀏覽器的計算機，并支持javascri

24、pt的瀏覽器就可以正確執(zhí)行.javascript是一種基于客戶端瀏覽器的語言，用戶在瀏覽屮填表、驗證的交 互過程只是通過瀏覽器對調(diào)入html文檔中的javascript源代碼進行解釋執(zhí)行來 完成的，即使是必須調(diào)用cgi的部分，瀏覽器只將用戶輸入驗證后的信息提交 給遠程的服務(wù)器，大大減少了服務(wù)器的開銷。2.3 javascript事件處理機制（1）單擊事件onclick當用戶單擊鼠標按鈕時，產(chǎn)生onclick事件。同時onclick指定的事件處理 程序或代碼將被調(diào)用執(zhí)行。通常在下列基本對象中產(chǎn)生： button （按鈕對彖） checkbox （復(fù)選框）或（檢查列表框） radio （單選鈕）

25、reset buttons （重要按鈕） submit buttons （提交按鈕）例如可通過卜列按鈕激活change（）文件：<form><input type二"button” value="" onclick="change（）',></form>在onclick事件觸發(fā)后，可以使用自己編寫的函數(shù)作為事件處理程序，也可 以使用javascript中內(nèi)部的函數(shù)。還可以直接使用javascript的代碼等。例:<input type="button" value=h " o

26、nclick=alert(h這是一個例子”)。(2) onchange改變事件當利用text或texturea元素輸入字符值改變時發(fā)該事件，同時當在select表 格項屮一個選項狀態(tài)改變后也會引發(fā)該事件。例：<form><input type="textn nanie=ntest" value=ntestn oncharge=,'check(,this.test)"></form>(3) 選中事件onselect當text或textarea對彖屮的文字被加亮后，引發(fā)該事件。(4) 獲得焦點事件onfocus當用戶單擊te

27、xt或textarea以及select對象吋，產(chǎn)生該事件。此時該對象成 為前臺對象。(5) 失去焦點onblur當text對彖或textarea對彖以及select對彖不再擁冇焦點、而退到后臺時， 引發(fā)該文件，它與onfocas事件是一個對應(yīng)的關(guān)系。(6) 載入文件onload當文檔載入?yún)?，產(chǎn)生該事件。onload 一個作用就是在首次載入一個文檔吋 檢測cookie的值，并用一個變量為其賦值，使它可以被源代碼使用。(7) 卸載文件onunload當web頁面退出時引發(fā)onunload事件，并可更新cookie的狀態(tài)。2.4 ajax 技術(shù)2.4.1 ajax技術(shù)簡介ajax不是一個技術(shù)，它實際

28、上是兒種技術(shù)，每種技術(shù)都有其獨特這處，合在一 起就成了一個功能強大的新技術(shù)。ajax包描： html 和 css 使用文檔對象模型(document object model)作動態(tài)顯示和交互使用xml和xslt做數(shù)據(jù)動態(tài)進行交互和操作使用xmlhttprequest進行異步數(shù)據(jù)接收使用javascript將它們綁定在一起ajax的優(yōu)點：適用不同瀏覽器和跨平臺的能力 ajax應(yīng)用使用開放標準的技術(shù)，而不用使用專用軟件開發(fā)花費小代碼能夠優(yōu)化和分開更豐富的交互。刷新等待的時間短、更快的速度 ajax被廣泛的采用與其他技術(shù)的無縫連接2.4.2 ajax工作原理在客戶端的ajax應(yīng)用有三層組成：第一層

29、，用戶界面，第二層javascript 代碼，第三層，ajax引擎。在用戶界面這一層中要用到xhtml, css和domo xhtml通過標簽來顯 示網(wǎng)頁的內(nèi)容。css通過消除網(wǎng)頁的冗余提供網(wǎng)頁內(nèi)容和樣式的顯示。css在不 同的文件小的規(guī)則不同在實現(xiàn)。dom規(guī)范提供-種方法進行網(wǎng)頁內(nèi)容的動態(tài)訪 問，樣式的更新和結(jié)構(gòu)的變化。當客戶端所有的被重載時。事件接聽器和xhr 被創(chuàng)建和激活。用戶的交互產(chǎn)生事件，事件被叫做事件接聽器的javascript函數(shù) 捕捉，如果事件有特殊的代碼要執(zhí)行，那么這些事件將被不同的javascript函數(shù) 執(zhí)行。第二副圖顯示這一過程。在這一個例子中，事件接聽器把數(shù)據(jù)發(fā)給更新

30、函 數(shù)，這些函數(shù)利用dom和css來更新內(nèi)容，顯示形式或者數(shù)據(jù)結(jié)構(gòu)。這不是 一個外部調(diào)用，這只是在客戶端而ii結(jié)果立刻顯示出來。在第二種情況中，事件 接聽器把數(shù)據(jù)傳給xhr, xhr對象的創(chuàng)建在不同的瀏覽器的不同而不同，ie用 active object,類。frefox 和 safari 用 xmlhttprequest 對象。雖然這些有不同的 方法，但是結(jié)果相同。xhr通過http或者https協(xié)議異步的給服務(wù)器發(fā)送請求。當http請求被服務(wù)器端處理時，他被分成物五種狀態(tài)：未被接受，正在轉(zhuǎn) 載，轉(zhuǎn)載完成。交互，結(jié)束。xhr對象通過事件來告訴我們各個狀態(tài)的變化。當服務(wù)器端在處理網(wǎng)絡(luò)應(yīng)用的吋候

31、，數(shù)據(jù)的驗證是必要的。特別是要訪問數(shù)據(jù)庫 時尤其重要。數(shù)據(jù)庫和網(wǎng)絡(luò)應(yīng)用可以通過訪問控制，密碼，和用戶規(guī)則來加以保 護。當數(shù)據(jù)庫返回新的數(shù)據(jù)給網(wǎng)絡(luò)應(yīng)用時，數(shù)據(jù)被轉(zhuǎn)化為特定的形式（html, xthml等等）。然后網(wǎng)絡(luò)應(yīng)用給客戶端的xhr對象回復(fù)。當回復(fù)結(jié)束時，狀 態(tài)變?yōu)橥瓿?，xhr把回復(fù)結(jié)果發(fā)給javascript函數(shù)來解析。數(shù)據(jù)通過特定的數(shù)據(jù) 結(jié)構(gòu)更新函數(shù)通過dom和css將數(shù)據(jù)加到網(wǎng)頁屮。在這個模型屮，具有簡潔 的代碼和單獨的javascript函數(shù)完成。system processinguser activltyclassic web application model (synchron

32、ous) die ntsystem processinguser activityuser activityserverajax web application model (asynchronous) clientekent-side processingiff圖2.2:傳統(tǒng)web應(yīng)川的同步交互過程（上）和ajax應(yīng)川的異步交互過程的比較（下）.2.5點和直線的生成算法點和直線是描繪圖形的最基本和最常用的元索，許多復(fù)雜的圖形都是由點和 直線段構(gòu)成的。在數(shù)學(xué)上，點是一個抽彖的坐標位置，沒有而積或大小。數(shù)學(xué)上 定義的直線是由無數(shù)個點構(gòu)成的。它只有長度而沒有寬度。在光柵圖形中，點是 由有一定大小和

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

34、和方 向無關(guān)。(4) 直線生成的速度要快。第三章交互式圖形繪制處理系統(tǒng)的原理及若干關(guān)鍵技術(shù)分析3.1 ajax工作流程3.1.1初始化對象并發(fā)出xmlhttprequest請求為了訃javascript可以向服務(wù)器發(fā)送http請求，必須使用xmlhttprequest 對象。使用么前，要先將xmlhttprequest對象實例化。但是各個瀏覽器對這個 實例化過程實現(xiàn)不同，為了讓編寫的程序能夠跨瀏覽器運行，可以寫成： if(window. xmlhttprequest) xmlhttpreq=new xmlhttprequest(); else if(window.activexobject)t

35、ryxmlhttpreq=new activexobject(“msxml2.xmlhttp");catch(e)try xmlhttpreq=newactivexobject(umicrosoft.xmlhttp);catch(e)3.1.2指定響應(yīng)處理函數(shù)接下來要指定當服務(wù)器返回信息時客戶端的處理方式。只耍將相應(yīng)的處理函 數(shù)名稱賦給xmlhttprequest對象的onreadystatechange屬性就町以了。比如：xmlhttpreq. onreadystatechange=function () ； 3.1.3 發(fā)出http請求指定相應(yīng)處理函數(shù)z后，就可以向服務(wù)器發(fā)出ht

36、tp請求了。這一步調(diào)用 xmlhttprequest 對象的 open 和 send 方法。xmlhttpreq.open ("get'',url,true)； xmlhttpreq.send (null)；3.1.4處理服務(wù)器返回的信息在第二步我們已經(jīng)指定了響應(yīng)處理函數(shù)，這一步是用來描述處理函數(shù)具體應(yīng) 該做的事情。首先，它要檢查xmlhttprequest對彖的readystate值，判斷請求目前的狀 態(tài)。當readystate值為4的時候，代表服務(wù)器已經(jīng)傳回所冇的信息，可以開始處 理信息并更新頁面內(nèi)容了。例如：if(xmlhttpreq.readystate=4)

37、信息已經(jīng)返冋，可以開始處理else信息還沒冇返回，等待服務(wù)器返回信息后，還需要判斷返回的http狀態(tài)碼，確定返回的頁面沒冇錯誤。 其屮，200代表頁面正常，基木程序結(jié)構(gòu)如下：if(xmlhttpreq.staus=200) 頁而正常，可以開始處理信息else頁面冇問題3.1.5 xmlhttprequest對成功返回的信息有兩種處理方式一種是resonsetext：即將傳回的信息當字符串使用；另一種為responsexml： 即將傳回的信息當xml文檔使用，可以用dom處理。這個系統(tǒng)中，在剛打開 頁面進行初始化時，要從數(shù)據(jù)庫中提取每個圖形的相關(guān)的數(shù)據(jù)，考慮到傳輸?shù)拇?數(shù)和性能，所有選擇了使用r

38、esponsexmlo因為responsexml可以將全部數(shù)據(jù) 一次性的傳到客戶端上。然后在客戶端通過使用dom技術(shù)，將各個圖形的數(shù)據(jù) 分類岀來。3-2后臺處理程序這里為了捉高程序以后的維護性，在后臺編寫了四個.java程序與圖形異步 交互的控制。以卜是對這四個程序的簡單介紹。dbmanager.java：主要是處理連接數(shù)據(jù)庫，和一些相關(guān)的操作：查詢和修改數(shù)據(jù)。 getservlet.java：是將數(shù)據(jù)傳輸過來的函數(shù)，傳輸?shù)念愋褪莤ml。messageeo.java：這里使用了面向?qū)ο蟮母拍?。一個messagee0代表一個圖形的 金部參數(shù)。1、通過使用dbmanager到數(shù)據(jù)庫中提取相關(guān)圖形的

39、所有的數(shù)據(jù)。2、對相 關(guān)的數(shù)據(jù)進行類型的轉(zhuǎn)變。3、通過使用getxxxido來獲取數(shù)據(jù)，使用 setxxxid（類型xxxid）來修改數(shù)據(jù)。sendservlet.java：將傳過來的數(shù)據(jù)寫入到數(shù)據(jù)庫中。使用request.getparameter（參數(shù)）;來取出從客戶端傳過來的數(shù)據(jù)，并將這些數(shù) 據(jù)的類型改成響應(yīng)的類型，并通過調(diào)用messageeo將數(shù)據(jù)寫入數(shù)據(jù)庫中3.3 點的生成原理點是描繪圖形的最基本和最常用的元索，許多復(fù)雜的圖形都是由點構(gòu)成的。 在數(shù)學(xué)上，點是一個抽彖的坐標位置，沒有面積或大小。在光柵圖形中，點是由 有一定大小和面積的像素來表示的。光柵圖形中點也稱為像素（pixel）,它

40、與幀 存中的地址單元是一一對應(yīng)的。如果是光柵顯示器。則在屏幕上相對應(yīng)的坐標位 置上選中那個像素，并將其顏色或其他屬性值裝入幀內(nèi)存中的相應(yīng)單元。在瀏覽器中javascript語言并不能去掌控像素點。在這里，用足夠小的div 元索來模擬像索點。在頁面中生成一個div元索，把它的長寬屬性都設(shè)置為單位 像素，把得到的這個div元素作為模擬的像素點。3.4直線生成算法3.4.1中點畫線算法小點畫線算法是在畫直線的過程小，當直線前一像素點為(xp, yp),下一 個像素點可選擇點pi(xp+1 , yp)或者p2(xp+l必+1),若點m為pip2的中點，q為 理想直線與x二xp+1垂線的交點。若m在q的

41、下方，則p2應(yīng)為下一個像素點； m在q的上方，則pi為下一像素點。這就是中點畫線的基木原理。圖3.1屮點畫直線法每步迭代涉及的像索和屮點示意圖實現(xiàn)步驟：1) 令直線 l(po(xo ,yo) pi(xi, yi)»其方程為 f (x, y) =ax+by+c=o, a=y0-yi,b=x-x0 ,c=xoyi-xiyo； 點 和 l 的 關(guān)系：on ：f(x,y)=0;up:f(x,y)>0;down: :f(x,y)vo.所以判斷屮點在理想點的上放述是下方，只要 將點m(xp+1 , yp+0.5)代入f(x,y)看其符號。構(gòu)成方程式：d=f(m)=f(xp+1 , yp+0

42、.5)2) 判斷d是否小于零，如果dvo,則取p2為下一像素。3) 判斷d是否大于零，如果d>0,則取r為下一像索。3.4.2 bresenhanm 畫線算法bresenhanm畫線算法是由bresenhanm提出的一種直線牛成算法。與中點畫線算法類似，先考慮ovmvl時，直線的掃描轉(zhuǎn)換過程。在這種情況下，沿直線路徑的像 素位置在x方向以單位間距取樣。從給定的線段起點開始，每步x方向向右移動 一個單位，并在掃描線的方向向右移動一個單位，并在掃描線的y值最接近直線 軌跡的那個像素上繪出該點?，F(xiàn)在要討論的是如何確定y的取值。假如掃描轉(zhuǎn)換已進行到第k步，其像素 在(xk，yk)位置上，卜

43、9;一步是耍確定在列xk+i上應(yīng)繪制的像素究競應(yīng)該選pl(xk+1, yj 還是 p2(xk + i, yk+l)位置,如圖 3.2 所示。在取樣位置xk+i處(顯然，xk+1 = xk+l),定義參數(shù)4和d2來描述p和p2像素分別與理想直線路徑的垂直偏移量，在像素位置xk+1處理想直線的y坐標值 為：yk+1plyk1y1a /p2xkxkh圖3.2像素下一步取值的選擇y=m(xk+l)+b(3-1)di=y-yk(3-2)d| =m( xk +l)+b yk(3-3)d2=(yk+1)-y(3-4)d2 二 y k +1 -m( xk+l)-b(3-5)(3-6)它們的差為：dj-d2=2

44、m(xk +1)-2 yk +2b-l根據(jù)式子(36)有:可得第k步的決策參數(shù)pjpk = ax(dj -d2)(3-8)pk =2ay«xk -2ax «yk +c(3-9其中，c為一常量，值為24y + ax(2b-1),它與像索位置的選擇無關(guān)。可見，當山<山時，pk<0, yk位置上的像素比yk+1處的更接近理想直線段, 取r點;否則,應(yīng)取p?點。(3-10)(3-11)(3-12)pk+i=2ayxk+1-2ax>yk+1+c式(2-10)減去式(2-9),冇：pk+i-pk= 2ay(xk+1-xk)- 2ax(yk+1 - yk)因為忑+i二兀

45、+1，冇:a+i = a + 24v - 2心(兒+】一兒)其中，(畑一九)項可取0或取1,如果r <0,則兒+】一兒=0；否則畑一兒=1 o(3-13)由前面式子推出：p() = 2 ay - ax從線段的起點坐標開始，在每個x參數(shù)位置對決策參數(shù)pi進行遞歸運算， 就可確定關(guān)于該直線的點的序列。下面給出的是imlvl時的bresenhanm畫線算法描述。(1) 輸入所定義直線段的兩個端點。(2) 將左端點裝入幀緩沖器，畫出笫一個點。(3) 計算心，ay, 2心和2 ay-2 ax的值，并得到初步?jīng)Q策參數(shù)人。(4) 從k=0開始，沿直線在每個忑處進行下列測試：如果pk<0,則畫點

46、(xk +1, yk ),且 4+i=4+ 2ay ;否則，1刪點(xk +1,兒 +1 ),且人+】=人+2勺一2心；(5) 重復(fù)步驟(4)共一次。3.4.3數(shù)值微分畫線算法(dda)在此系統(tǒng)屮，采用的是數(shù)值微分應(yīng)線算法來實現(xiàn)在網(wǎng)頁上畫直線的。數(shù)值微 分分析法簡稱dda算法，是一種常用的光柵化技術(shù)。直線光柵化即己知一條直 線的兩個端點坐標，確定二維像素矩陣上位于或最靠近這條直線，即是理論直線 的所有像素的坐標值。卜面是對該算法的分析。已知直線兩端點為(西，燈)、(兀2,力)，則該直線的方程為：y = mx + b(3-14)其中，m為直線的斜率，b為y軸的截距。由給定的兩端點可以知道：=(3

47、 x2 -x,b = yj -mx(3-16)首先，考慮一條斜率為正(m>0)的直線，如果直線的斜率小于1,應(yīng) 取x的坐標單位步長為1,然后計算相應(yīng)的y值的坐標值。這里不能取y 坐標變化量為1,否則y的變化量會產(chǎn)生很大的x變化量：x+i = x + m(3-17)對于斜率大于1的直線，應(yīng)把x和y交換，否則x的單位變化量可能引起很 大的y坐標變化量。這時把y單位步長改為單位1,然后計算相應(yīng)的x的值：兀+i =兀+丄(3-18)m上述兩式均假設(shè)點沿直線從左到右，如果端點順序到過來，則開始端點在右 端，結(jié)束端點在左端，則心=1.且兀+】二開_加(3-19)或者當斜率大于1時，ay=-1,且&q

48、uot;v(3-20)dda算法的描述如f：(1) 該算法以給定的直線段的兩個端點作為輸入?yún)?shù)。(2) 初始化，將初值西和x各加上0.5,以保證計算精度。(3) 將兩端點間的水平和垂直差值賦予參數(shù)dx和dy, dx = x2-x!,dy = y2_y】。(4) 選取dx和dy中絕刈值大的一個最為步數(shù)length(5) 從像索位置(州,”)開始，確定生成下一個像索位置每步所需增量，如果dx絕對值大于dy絕對值，月.無小于兀2,那么x與y方向的增量分別為1和m;假如x方向變化大，但兀】大于吃，那么就采用減量1和m作為其“增 量"；在其他情況下，y方向使用單位增量(或減量)，x方向使用1/

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

50、 bresenham畫圓算法。為了不是一般性，我們假設(shè)圓心(譏，兒)在原點否則可以把求到圓上的點做 坐標變換：x - xc + x(3-21)y 二兒 + y(3-22)通過以上的變換便可得到圓心在任一點的圓上的坐標。在這里我們考慮第一象限八分之一圓弧的畫法。這個算法的思想是在每一步都選擇一個距離圓周最近點p(無,乳)，使其誤差 項：卩(£)| = |(兀；+ 0-尺2(3-23)在每一步達到最小。假設(shè)p(xz.,>)是第一象限八分z圓弧的第一個像素點，根據(jù)圓弧的走向，下一個像素點應(yīng)從ya+i,%)或者厶a+i，x -1)中一個，選擇離圓弧最近的像 素點作為下一個點，并對一下誤

51、并項進行比較：|d(h;.)| = |(x +1) 2+)_/(3-24)|d(厶)|=|(無+1)2+(兀-1)2/(3-25)引入一下判別式:d 嚴(3-26)當d>=0時，則選擇&, dvo時，則選擇弘。由于(3-26)涉及平方且絕對值運算，所以效率很低，我們可以用如下方法進行簡化，由圖形分析，八分之一畫圓過程只有如下五種情況：圖3.3像素下一步取值的選擇1, h與l在圓內(nèi)，d (弘)vo,d (厶)vo.根據(jù)圖形分析，最理想的應(yīng)該為2,/在圓上,厶在圓內(nèi),(0)=0,d(厶)<0,最理想的點為h,。3,厶在圓內(nèi),(/,)>0,d(&)<0.4,厶

52、在圓上,(/,)=0,d(厶)<0,最理想的點為厶。5,/在圓外,厶在圓外,(比)<0, d(厶)<0,最理想的點為厶。分析:對于情況3, d(/,) >0, d (厶)vo.因此，(326)可以改寫為:(3-27)對于情況1, 2由于d (0) <0,d (厶)<0o代入(3-27)得dt <0,按照 判別條件，應(yīng)該先則/。這和從圖上分析是一致的，所以可以用(3-27)作為 判別式。對于情況4, 5由于d (/,) >0,d (&) >0o代入(3-27)得仏>0,按照 判別條件，應(yīng)該先則厶。這和從圖上分析是一致的，所以可以用（327）作為判 別式。3.6矩形生成算法矩形就是