この記事で示した例の実行を開始するには、JDK 1.2 以降 ( http://java.sun.com ) が必要です。 JSP をサポートする Web サーバーも必要です。この例を Tomcat でテストしました。そこでは、 com.sun.image.codec.jpegクラス (Sun Java 2 SDK でリリース) を使用してグラフィックス データをエンコードしました。
利用可能な背景が必要なため、タイトル領域や外枠などのレイアウトを管理する Java クラスを作成する必要があります。図Aに示すように。
図A
ご覧のとおり、タイトル領域と外側の境界線の両方に影を付けました。タイトルには 1 ピクセル幅の白い枠線があり、グラフィックス領域には細い黒い枠線が表示されます。これらの境界線は影に輪郭を与えます。
境界線は簡単に作成できます。 Graphics2D オブジェクトのFill()メソッドを使用して青いタイトル四角形を塗りつぶし、 draw()メソッドを使用して別の色で境界線を描画します。
影効果の作成も非常に簡単です。まず、 fill()メソッドを使用して影を描画します。次に、7 ピクセルのオフセットでタイトルを描画します。このオフセットにより 3 次元効果が作成され、シャドウ効果が生じます。
農産物を販売する会社があり、売上を示すためにヒストグラムが必要だとします。実際のアプリケーションでは、データベースまたは XML ファイルからこのデータを取得する必要がありますが、簡単にするために、売上データが次の 2 つの配列に格納されていると仮定します。
String datanames[] = {"リンゴ"、"オレンジ"、"ピーチ"、"レモン"、"グレープフルーツ"};
int datavalues[] = {11, 62, 33, 102, 50};
最初の配列には、会社が販売するさまざまな農産物の項目が保持されます。 2 番目の配列は、各農産物に対応する販売数量です。
ヒストグラムは JPEG 形式で表示および保存されるため、コンテンツ タイプである MIME を正しく設定する必要があります。ブラウザは MIME タイプを使用して、どのように反応するかを決定します。次のコードは MIME タイプを設定します。
response.setContentType("画像/jpeg");
次に、画像を表すオブジェクトが必要です。 Java 2D API はBufferedImageクラスをサポートしており、ピクセル データをメモリに保存および管理する方法を提供します。グラフィックスをカラーにしたいので、 TYPE_INT_RGBグラフィックス タイプを使用します。 2 つの整数データWIDTHとHEIGHT は、画像の幅と高さをピクセル単位で指定するために使用されます。
BufferedImage bi = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
BufferedImage オブジェクトができたので、オブジェクトのcreateGraphics()メソッドを呼び出してGraphics2Dの内容を設定できます。
Graphics2D biContext = bi.createGraphics();
グラフを作成したプログラマは、グラフの重要性とページ全体のレイアウトに基づいてWIDTHパラメータを設定する必要があります。グラフィック要素は、グラフィック幅の変更に応じて自動的にサイズ変更されます。
タイトルの幅と境界領域、およびグラフィックの最も長い直線の正方形は、 WIDTHパラメータに基づいて計算する必要があります。この目的は、すべてのグラフィック要素がグラフィックの幅を超えず、グラフィックの右の境界線を越えないようにすることです。
表示する必要があるデータ項目の数によって、グラフのHEIGHTパラメーターが決まります。新しい要素がdatavalues[] 配列とdatanames[]配列に追加される場合、必要な表示領域サイズに合わせてグラフィックの高さもそれに応じて大きくなる必要があります。
最大パラメータは、最も長い直線の正方形に使用されます。次に、他の長方形ブロックの幅が最大値を基準にして計算されます。
int barWidth = (innerWIDTH * currentValue) / 最大値;
上記のアルゴリズムは、最大値とグラフィックのinnerWIDTH (グラフィック領域) の 2 つの値を使用して、 WIDTH値の変更に応じて四角形が自動的に拡大および縮小されるようにします。
グラフィックを表示するには、背景画像を作成し、グラフィック データを追加する必要があります。まず、 graphBGオブジェクトを作成し、そのdraw()メソッドを呼び出します。
グラフBG gr = 新しいグラフBG();
gr.draw(biContext, WIDTH, HEIGHT, "農産物", "全体の平均: " + 平均);
draw()メソッドのパラメータには、グラフィック コンテンツ、 biContext 、 WIDTHおよびHEIGHTが含まれます。graphBGクラスはこれらを使用して、タイトルおよびグラフィック領域の幅と高さを決定します。最後に、平均データ値が計算され、タイトルに表示されるテキストに追加されます。
各長方形ブロックの垂直座標 (y 軸) 位置は、次の式に従って計算されます: y_pos = i * displayHeight + headerOffset 。 displayHeight は、直線の正方形のテキストの高さに直線の正方形の高さを加えたものに等しく、 headerOffset は、タイトル領域と影の高さを含む、グラフィックの上部からの垂直距離を表します。
前にタイトル枠を作成したのと同じ手法を使用して、これらの長方形とその枠線を作成しました。四角形の境界線の幅と高さから 1 ピクセルを差し引いて、各四角形に赤い境界線があるように見せ、白い背景に内側の境界線を描画することで減算効果を簡単にしました。
メモリ内に画像を作成しました。次に、それをエンコードしてユーザーに表示します。デフォルトの JSP 出力ストリームを使用して JPEG を処理することはできないため、 response.getOutputStream() を使用して応答オブジェクトからストリームを取得する必要があります。出力ストリームを使用してJPEGImageEncoderオブジェクトを作成し、そのencode()を呼び出して、前に作成したBufferedImageオブジェクトを渡します。
JPEGImageEncoder エンコーダ = JPEGCodec.createJPEGEncoder(出力);
エンコーダ.エンコード(bi);
結果として得られるイメージは比較的小さく、占有容量はわずか 13.7 キロバイトです。図B は最終的な効果を示します:
図 B
どちらの場合も、 index.jspの出力は JPEG 画像です。デスクトップに保存するか、PrintScreen キーを押してスクリーンショットを撮ることができます。同じページに複数のグラフィックを表示する必要がある場合、または他のコンテンツにグラフィックを導入する必要がある場合は、HTML imgタグ (< img src = ”index.jsp"> ) を使用し、必要に応じてグラフィックを配置します。形状。
おそらく、動的に生成されるグラフィックスのための最も古いインターネット テクノロジの 1 つは、画像の表示以外のタスクも実行できます。この画像の閲覧者数を記録する必要があると想像してください (広告のクリック数を記録するのと同様)。その後、クリック数のカウント、データベースまたはファイルへのアクセスなどのタスクをIndex.jspに実装する必要があり、次のような処理が可能です。これらのタスクはバックグラウンドで実行されます。ユーザーに対してバッファーされたページ切り替えを使用する必要はありません。
この論文では、きれいで見栄えの良いヒストグラムを生成する方法を検討しました。私たちは、グラフィックのサイズ変更と JPEG 形式へのエンコードを巧みに処理し、結果の画像をページ上の別の場所に配置するために HTML コードを変更することについて話し合いました。