pirkak公式サイト|株式会社 オリエンタルアーツ
HOMEpirka TOP > サンプル集
pirka サンプル集

> 戻る

動的イメージの作り方


≪サンプル説明≫  

描画する丸の数を選択して描画ボタンをクリックすると指定された数の○が
存在するイメージが作成され描画されます。

ここで描画されるイメージは描画ボタンクリック後にサーバーで作成された動的なイメージです。


≪作成時注意点≫ 

・イメージを動的に作成して表示するにはname属性付きのIMGタグを使用します。

 【例】<img name="imageItem">

・Javaクラスのコンストラクタやサブミットボタン等がクリックされたときに動作する
 アクションメソッド内でsetImageメソッドを使用しイメージオブジェクトを設定します。

 【例】FieldMap field = getFieldMap();
  // イメージオブジェクトを登録
  field.setImage("imageItem", new ImageSample());

・イメージオブジェクトはPirkaImageから派生させて作成するクラスで以下の
  2つのメソッドを実装します。

  1) public byte[] getImage() throws IOException;
   表示するイメージのバイナリーイメージを戻します。

  2) public String getMimeType();
   MIMEタイプ名を戻します。
   PirkaImageクラスには代表的なイメージファイルのMIMEタイプ名が定義されています。

【例】class ImageSample extends PirkaImage {
 
   public byte[] getImage() throws IOException {
   BufferedImage img = new BufferedImage(100, 100, BufferedImage.TYPE_3BYTE_BGR);
   ByteArrayOutputStream baos = null;
   Graphics2D g = null;
   try {
   g = (Graphics2D) img.createGraphics();
   ・
   ・
   ・
    return baos.toByteArray();
   }
 
   public String getMimeType() {
   return PirkaImage.MIME_TYPE_PNG; // MIME=PNG
   }
  }


ソースファイル
ImageSample.html  サンプル画面のHTMLファイル

<html>
<head>
<title>pirka逆引きサンプル 動的イメージの作り方 </title>
</head>
<body>
<center>
<span style="color: #8080ff">pirka逆引きサンプル 動的イメージの作り方</span><br>
<hr>
<form name="formItem" method="post">
描画する丸の数:
<select name="count">
<option value="0"></option>
<option value="1">1個</option>
<option value="5">5個</option>
<option value="10">10個</option>
<option value="100">100個</option>
</select>
<input type="submit" name="draw" value="描画">
</form>
<br>
<img name="imageItem">
<hr>
<a name="returnWindow" href="">戻る</a>
</center>
</body>
</html>



ImageSample.java  サンプル画面のJavaソースファイル

package jp.oarts.pirka.sample.instruction.is101900;

import jp.oarts.pirka.core.kernel.FieldMap;
import jp.oarts.pirka.core.win.PirkaWindow;

/**
* pirka逆引きサンプル 動的イメージの作り方
*/
public class ImageSample extends PirkaWindow {

/**
* コンストラクタ
*/
public ImageSample() {
FieldMap field = getFieldMap();
// イメージオブジェクトを登録
field.setImage("imageItem", new ImageDrawSample(0));
}

/**
* 描画ボタン処理
*/
public void draw() {
FieldMap field = getFieldMap();
// 丸を描画する回数を取得
int count = field.getValueInt("count");
// イメージオブジェクトを登録
field.setImage("imageItem", new ImageDrawSample(count));
}

/**
* 戻るリンク
*
* @return
*/
public PirkaWindow returnWindow() {
return null;
}

}

ImageDrawSample.java  サンプルイメージ描画クラスのJavaソースファイル

package jp.oarts.pirka.sample.instruction.is101900;

import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;

import javax.imageio.ImageIO;

import jp.oarts.pirka.core.kernel.PirkaImage;

/**
* pirka逆引きサンプル 動的イメージの作り方 イメージ描画クラス
*/
class ImageDrawSample extends PirkaImage {

/** 丸の描画回数 */
int count;

/**
* コンストラクタ
* @param count 丸の描画回数
*/
public ImageDrawSample(int count) {
this.count = count;
}

/**
* イメージをバイト配列を取得します
*
* @return バイト配列
*/
@Override
public byte[] getImage() throws IOException {
int width = 300;
int height = 300;

BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_3BYTE_BGR);
ByteArrayOutputStream baos = null;
Graphics2D g = null;
try {
g = (Graphics2D) img.createGraphics();
paint(g, width, height, count);
baos = new ByteArrayOutputStream();
ImageIO.write(img, "png", baos);
baos.flush();

} finally {
if (g != null) {
g.dispose();
g = null;
}
img = null;
if (baos != null) {
baos.close();
}
}
return baos.toByteArray();

}

/**
* イメージを描画します
* @param g2 グフィック2D
* @param width 横幅
* @param height 縦幅
* @param drawCount ○の描画数
*/
private void paint(Graphics2D g2, int width, int height, int drawCount) {

int r = 20;
g2.setColor(new Color(0, 0, 0));
g2.fillRect(0, 0, width, height);

for (int i = 0; i < drawCount; i++) {
switch ((int) (4 * Math.random())) {
case 0:
g2.setColor(new Color(0xff, 0xc0, 0xc0));
break;
case 1:
g2.setColor(new Color(0xc0, 0xff, 0xc0));
break;
case 2:
g2.setColor(new Color(0xc0, 0xc0, 0xff));
break;
case 3:
g2.setColor(new Color(0xf0, 0xf0, 0xf0));
break;
}

int x = (int) ((width - r) * Math.random());
int y = (int) ((height - r) * Math.random());
g2.fillOval(x, y, r, r);
}
}

/**
* このクラスが扱うイメージのMIMEタイプを取得します
*
* @return MIMEタイプ
*/
@Override
public String getMimeType() {
return PirkaImage.MIME_TYPE_PNG;
}
}

ページのTOPへ このページの先頭へ
oriental arts pirka