|
|
你需要什么？
為了開始運行本文所給出的例子，你需要JDK 1.2或者它的更高版本（http://Java.sun.com）。你還需要一個支持JSP的Web服務(wù)器。我在Tomcat上測試該例子，我用com.sun.image.codec.jpeg 類（在Sun Java 2 SDK中發(fā)布）進行圖形數(shù)據(jù)的編碼。
可重用的背景
既然你希望擁有可重用的背景，你應(yīng)該創(chuàng)建一個Java類來管理布局，包括標題區(qū)和外部邊界。如圖A所示。
圖A
正如你所看到的那樣，我在標題區(qū)和外部邊界上都進行了陰影處理。標題有一個白色的、一個象素寬的邊界，圖形區(qū)有一個細的黑色邊界。這些邊界增加了陰影的清晰度。
邊界很容易產(chǎn)生。用Graphics2D對象的fill()方法來填充一個藍色的標題矩形，然后用draw()方法用其它顏色畫出邊界。
產(chǎn)生陰影效果也很簡單。首先，用fill()方法畫出一個陰影。然后，在偏移七個象素的地方畫出標題。這個偏移產(chǎn)生了三維的效果，這樣就得到了陰影效果。
舉一個例子
假設(shè)有一家公司銷售農(nóng)產(chǎn)品，它需要一個直方圖來顯示銷售額。在實際應(yīng)用場合下，我們需要從一個數(shù)據(jù)庫或者XML文件中獲取這些數(shù)據(jù)，但是為了簡單起見，我們假設(shè)銷售額數(shù)據(jù)保存在下面的兩個數(shù)組中：
String datanames[] = {"蘋果", "桔子", "桃子", "檸檬", "柚子"};
int datavalues[] = {11, 62, 33, 102, 50};
第一個數(shù)組保存該公司出售的各種農(nóng)產(chǎn)品的項目。第二個數(shù)組為對應(yīng)各農(nóng)產(chǎn)品的銷售額。
準備好直方圖
直方圖將以JPEG格式顯示和保存，所以我們需要正確設(shè)置MIME，即內(nèi)容類型。瀏覽器利用MIME類型來決定如何做出反應(yīng)。下面的代碼用以設(shè)置MIME類型：
response.setContentType("image/jpeg");
接下來，我們需要一個表示該圖像的對象。Java 2D API支持BufferedImage類，它提供了一種在內(nèi)存中保存和管理象素數(shù)據(jù)的方法。我們希望圖形是彩色的，所以使用了TYPE_INT_RGB圖形類型。WIDTH和HEIGHT這兩個整形數(shù)據(jù)用來以象素為單位指定該圖像的寬度和高度：
BufferedImage bi = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
現(xiàn)在我們有個一個BufferedImage對象，我們可以通過調(diào)用該對象的createGraphics()方法來設(shè)置Graphics2D的內(nèi)容：
Graphics2D biContext = bi.createGraphics();
寬度、高度和極大值
創(chuàng)建該圖的程序員需要根據(jù)該圖形的重要程度和頁面的整體布局來設(shè)置WIDTH參數(shù)。圖形元素根據(jù)圖形寬度的改變自動調(diào)整自身的大小。
標題的寬度和邊界區(qū)域，以及圖形的最長直方塊需要根據(jù)WIDTH參數(shù)進行計算。這樣做的目的是為了確保所有的圖形元素都沒有超過圖形的寬度而越過圖形的右邊界。
需要顯示的數(shù)據(jù)條目數(shù)決定了圖形的HEIGHT參數(shù)。如果有新的元素添加到datavalues[]和datanames[]數(shù)組，那么圖形的高度就應(yīng)該對應(yīng)增長以適應(yīng)所需顯示的區(qū)域大小。
maximum參數(shù)用于最長直方塊。然后，其它直方塊的寬度按照相對于maximum的量進行計算：
int barWidth = (innerWIDTH * currentValue) / maximum;
上面的算法用到了maximum和圖形的innerWIDTH（圖形區(qū)域）這兩個數(shù)值來確保直方塊會隨著WIDTH數(shù)值的改變而自動伸縮。
顯示圖形背景
為了顯示該圖形，我們需要創(chuàng)建一個背景圖像，然后添加圖形數(shù)據(jù)。首先，創(chuàng)建一個graphBG對象并調(diào)用它的draw()方法：
graphBG gr = new graphBG();
gr.draw(biContext, WIDTH, HEIGHT, "Farm Produce", "Overall Average: " + average);
draw()方法的參數(shù)包括圖形內(nèi)容、biContext、WIDTH和HEIGHT，graphBG類利用它們來決定標題和圖形區(qū)域的寬度和高度。最后，計算average數(shù)據(jù)值并添加到標題中顯示的文本中。
創(chuàng)建直方塊
每個直方塊的縱坐標（y軸）位置按照如下公式計算：y_pos = i * displayHeight + headerOffset。其中displayHeight等于直方塊上文本的高度加上直方塊的高度，headerOffset表示從圖形頂端開始的垂直距離，包括標題區(qū)域以及陰影的高度。
我用了前面創(chuàng)建標題邊界的技術(shù)創(chuàng)建了這些直方塊以及它們的邊界。我把直方塊邊界的寬度和高度分別減去一個象素，這樣每個直方塊看起來都有一個紅色的邊界，并通過在白色背景上畫上內(nèi)邊界使得減切效果的產(chǎn)生變得簡單起來。
編碼
我們已經(jīng)在內(nèi)存中建立好了這幅圖片，現(xiàn)在我們對它進行編碼并把它顯示給用戶。我們不能用默認得JSP輸出流來處理JPEG，所以我們需要利用response.getOutputStream()從響應(yīng)對象中獲取流。我們可以用輸出流來創(chuàng)建一個JPEGImageEncoder對象并調(diào)用它的encode()，傳遞我們在前面創(chuàng)建的BufferedImage對象：
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(output);
encoder.encode(bi);
產(chǎn)生的圖象相對較小，只占用了13.7千字節(jié)的容量。圖B給出了最終的效果：
圖B
無論從那個方面來說，index.jsp的輸出都是一個JPEG圖像。你可以把它保存到你的桌面上或者按PrintScreen鍵來抓圖。如果你需要在同一頁上顯示多幅圖形或者把圖形引入到其它內(nèi)容中，你可以使用HTML的img標記（<img src = ”index.jsp”>），然后，當需要時放置該圖，如利用一個表格。
也許最老的用于動態(tài)產(chǎn)生圖形的InterNET技術(shù)之一可以實現(xiàn)處了顯示一個圖像之外的其它任務(wù)。設(shè)想你需要記錄這副圖的瀏覽人數(shù)（類似記錄廣告點擊次數(shù)的情況），那么你需要在index.jsp中實現(xiàn)諸如點擊計數(shù)、數(shù)據(jù)庫或者文件訪問之類的任務(wù)，你可以在后臺處理這些任務(wù)而不需要利用緩沖頁面切換給用戶。
結(jié)論
我們在本文之中檢驗了一種產(chǎn)生整齊、看上去很舒服的直方圖。我們巧妙的處理了圖形尺寸的改變以及編碼為JPEG格式，并且討論了通過修改HTML代碼的方式把最終產(chǎn)生的圖片放置在頁面的不同位置上。
jsp技術(shù)：用JSP創(chuàng)建可重用的圖形背景，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
