お絵描きソフトを作る第二回

 今回は描く色を選択できるようにします。 選べる色は、黒から白のグレースケールにして、 キャンバスの下の方に17段階のグレースケールを描いておきましょう。

・実行結果

 枠の中でマウスをドラッグしてみてください。 色は、下のグレースケールで選べます。

・キャンバスクラス

 グレースケールを描くのは簡単で、 RGBすべて同じにしたカラークラスを作れば良いですね。 色の成分を0から少しづつ増やしていって、 それで長方形を描いて並ベいけばグレースケールが出来ます。

  for (i=0;i<17;i++) {

	if (i==16)
		g_img.setColor(new Color(255,255,255));
	else
		g_img.setColor(new Color(i*16,i*16,i*16));

	g_img.fillRect(16+i*10,208,10,10);

  }
 上のプログラムでは、 各成分を0ー240の16段階では16づつ増やしながら描いた後、 最後だけは255にしています。これは、17番目のi は16なので16*16=256になってしまいますが、 色の成分は0ー255で指定する必要があるからです。

 グレースケールだけを描いても今どの色が選択されているのか分からないので、 選択されている色は赤で囲っておくと良いでしょう。そのためには、 選択されるたびにグレースケールを描き直す必要があります (赤く囲って行くだけだと、それまでに描いた赤い枠が残ってしまう)。 そこで、グレースケールの何番目が選択されたかを示す変数c を引数として

  private void drawGScale(int c) {

	int i;

	for (i=0;i<17;i++) { // グレースケール描画

		if (i==16)
			g_img.setColor(new Color(255,255,255));
		else
			g_img.setColor(new Color(i*16,i*16,i*16));

		g_img.fillRect(16+i*10,208,10,10);

	}

	g_img.setColor(Color.red); // 選択された部分を赤で囲う
	g_img.drawRect(16+c*10,208,9,9);

  }

 という関数を作りました。

 また、 グレースケールのある部分をクリックしたらその色が選択されるようにするには、 グレースケールの座標でmouseDown マウスダウンイベントが発生した時にその部分を選択すれば良いでしょう。 mouseDown イベントは、

  public boolean mouseDown(Event evt,int x,int y) { // マウスイベント

	int c;

	if (x>0 && y>0 && x<w-2 && y<h-2) { // キャンバス内

		g_img.fillRect(x,y,2,2);
		repaint();

		return true;

	}

	if (x>15 && y>207 && x<186 && y<218) { // グレースケール内

		c=(x-16)/10; // 何番目か調べる

		drawGScale(c); // グレースケール再描画

		if (c==16) // 描画色を選択された色に設定
			g_img.setColor(new Color(255,255,255));
		else
			g_img.setColor(new Color(c*16,c*16,c*16));

		repaint();

		return true;

	}

	return false;

  }

 とすれば良いわけです。グレースケールは、(16,208)-(185,217) の座標に描かれ、1つが横10ドットなので何番め(0から)が選ばれたかは、 (x-16)/10 を計算すればわかります(Javaでは、 整数同士の割り算だと計算結果の小数点以下が切り捨てられるのでしたね)。

 さあ、これでキャンバスの方は出来ました。 後は、メインクラスでキャンバスのオブジェクトを作って配置するだけです。

  public class Ged2 extends java.applet.Applet { // メインクラス

	Gedcv2 cv;

	public void init(){

		cv=new Gedcv2(createImage(200,264)); // キャンバス作成

		add(cv); // キャンバス配置

	}

  }

プログラムソース表示

戻る