用JSP建立可重用的圖形背景

js|建立|圖形

有一個技術可以在Java Server Pages（JSP）中產生整齊、精細的長條圖，它可以用來作為可重用的背景。為了達到可重用性的目的，你需要使得圖形的尺寸可以調整，你還應該管理直方塊以免它們越過繪圖區域的邊界。然後，你還需要把圖形資料編碼為一種可用的圖形格式。我們將利用這個代碼例子介紹本技巧。

你需要什嗎？

為了開始運行本文所給出的例子，你需要JDK 1.2或者它的更高版本（http://java.sun.com）。你還需要一個支援JSP的Web伺服器。我在Tomcat上測試該例子，我用com.sun.image.codec.jpeg 類（在Sun Java 2 SDK中發布）進行圖形資料的編碼。

可重用的背景

既然你希望擁有可重用的背景，你應該建立一個Java類來管理布局，包括標題區和外部邊界。如圖A所示。

圖A

正如你所看到的那樣，我在標題區和外部邊界上都進行了陰影處理。標題有一個白色的、一個象素寬的邊界，圖形區有一個細的黑色邊界。這些邊界增加了陰影的清晰度。

邊界很容易產生。用Graphics2D對象的fill()方法來填充一個藍色的標題矩形，然後用draw()方法用其它顏色畫出邊界。

產生陰影製作效果也很簡單。首先，用fill()方法畫出一個陰影。然後，在位移七個象素的地方畫出標題。這個位移產生了三維的效果，這樣就得到了陰影製作效果。

舉一個例子

假設有一家公司銷售農產品，它需要一個長條圖來顯示銷售額。在實際應用場合下，我們需要從一個資料庫或者XML檔案中擷取這些資料，但是為了簡單起見，我們假設銷售額資料儲存在下面的兩個數組中：
String datanames[] = {"蘋果", "桔子", "桃子", "檸檬", "柚子"};
int datavalues[] = {11, 62, 33, 102, 50};

第一個數組儲存該公司出售的各種農產品的項目。第二個數組為對應各農產品的銷售額。

準備好長條圖

長條圖將以JPEG格式顯示和儲存，所以我們需要正確設定MIME，即內容類型。瀏覽器利用MIME類型來決定如何做出反應。下面的代碼用以設定MIME類型：
response.setContentType("image/jpeg");

接下來，我們需要一個表示該映像的對象。Java 2D API支援BufferedImage類，它提供了一種在記憶體中儲存和管理象素資料的方法。我們希望圖形是彩色的，所以使用了TYPE_INT_RGB圖形類型。WIDTH和HEIGHT這兩個整形資料用來以象素為單位指定該映像的寬度和高度：
BufferedImage bi = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);

現在我們有個一個BufferedImage對象，我們可以通過調用該對象的createGraphics()方法來設定Graphics2D的內容：
Graphics2D biContext = bi.createGraphics();

寬度、高度和極大值

建立該圖的程式員需要根據該圖形的重要程度和頁面的整體布局來設定WIDTH參數。圖形元素根據圖形寬度的改變自動調整自身的大小。

標題的寬度和邊界地區，以及圖形的最長直方塊需要根據WIDTH參數進行計算。這樣做的目的是為了確保所有的圖形元素都沒有超過圖形的寬度而越過圖形的右邊界。

需要顯示的資料條目數決定了圖形的HEIGHT參數。如果有新的元素添加到datavalues[]和datanames[]數組，那麼圖形的高度就應該對應增長以適應所需顯示的地區大小。

maximum參數用於最長直方塊。然後，其它直方塊的寬度按照相對於maximum的量進行計算：
int barWidth = (innerWIDTH * currentValue) / maximum;

上面的演算法用到了maximum和圖形的innerWIDTH（繪圖區域）這兩個數值來確保直方塊會隨著WIDTH數值的改變而自動調整。

顯示圖形背景

為了顯示該圖形，我們需要建立一個背景映像，然後添加圖形資料。首先，建立一個graphBG對象並調用它的draw()方法：
graphBG gr = new graphBG();
gr.draw(biContext, WIDTH, HEIGHT, "Farm Produce", "Overall Average: " + average);

draw()方法的參數包括圖形內容、biContext、WIDTH和HEIGHT，graphBG類利用它們來決定標題和繪圖區域的寬度和高度。最後，計算average資料值並添加到標題中顯示的文本中。

建立直方塊

每個直方塊的縱座標（y軸）位置按照如下公式計算：y_pos = i * displayHeight + headerOffset。其中displayHeight等於直方塊上文本的高度加上直方塊的高度，headerOffset表示從圖形頂端開始的垂直距離，包括標題區以及陰影的高度。

我用了前面建立標題邊界的技術建立了這些直方塊以及它們的邊界。我把直方塊邊界的寬度和高度分別減去一個象素，這樣每個直方塊看起來都有一個紅色的邊界，並通過在白色背景上畫上內邊界使得減切效果的產生變得簡單起來。

編碼

我們已經在記憶體中建立好了這幅圖片，現在我們對它進行編碼並把它顯示給使用者。我們不能用預設得JSP輸出資料流來處理JPEG，所以我們需要利用response.getOutputStream()從響應對象中擷取流。我們可以用輸出資料流來建立一個JPEGImageEncoder對象並調用它的encode()，傳遞我們在前面建立的BufferedImage對象：
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(output);
encoder.encode(bi);

產生的圖象相對較小，只佔用了13.7KB的容量。圖B給出了最終的效果：

圖B

無論從那個方面來說，index.jsp的輸出都是一個JPEG映像。你可以把它儲存到你的案頭上或者按PrintScreen鍵來抓圖。如果你需要在同一頁上顯示多幅圖形或者把圖形引入到其它內容中，你可以使用HTML的img標記（<img src = ”index.jsp”>），然後，當需要時放置該圖，如利用一個表格。

也許最老的用於動態產生圖形的Internet技術之一可以實現處了顯示一個映像之外的其它任務。設想你需要記錄這副圖的瀏覽人數（類似記錄廣告點選次數的情況），那麼你需要在index.jsp中實現諸如點擊計數、資料庫或者檔案訪問之類的任務，你可以在幕後處理這些任務而不需要利用緩衝頁面切換給使用者。

結論

我們在本文之中檢驗了一種產生整齊、看上去很舒服的長條圖。我們巧妙的處理了圖形尺寸的改變以及編碼為JPEG格式，並且討論了通過修改HTML代碼的方式把最終產生的圖片放置在頁面的不同位置上。