androidでお絵かきアプリ(簡単な描画編)

2014年1月20日開発

「いつでもかんたんおえかき」改め、「からふるかんたんおえかき」となりました。

カラフルというくらいなので、色ボタンを長押しすると、色調を変えることができます。

バージョンアップ情報はここまでで、今回はどのようにお絵かきアプリを作ったかを紹介します。

Viewクラスを継承したクラスを作成

まずはViewを継承したクラスを作成します。

public class MyView extends View{

Viewクラスを継承したらonDrawメソッドをオーバーライドします。

eclipseを使っている場合は、

右クリック>ソース>メソッドの追加

などでオーバーライドのメソッドを作成することができます。

	private Paint pen;
	private Path myPath;
	private ArrayList<Path> draw_List = new ArrayList<Path>();
	@Override
	protected void onDraw(Canvas canvas) {
		// TODO 自動生成されたメソッド・スタブ
		for (int i = 0; i < draw_List.size(); i++) {
			Path pt = draw_List.get(i);
			canvas.drawPath(pt, pen);
		}
		// current
		if (myPath != null) {
			canvas.drawPath(myPath, pen);
		}
	}

onDrawをオーバーライドする理由は、canvasに線を描くためです。

お絵かきアプリなどで描画をする場合はcanvasが適しているためcanvasを使います。

draw_List配列を作り、描かれたpathを配列として所持しています。

こうすることで、「1つ戻る」などの処理が簡単にできます。

また、最後に書いた線はdraw_listで描けないため、myPathで別に描画をします。

pathを追加するタッチイベントの実装

配列にpathを追加していくのは、タッチイベントの処理で行います。

	private float pos_x, pos_y;

	public boolean onTouchEvent(MotionEvent event) {
		if (event.getAction() == MotionEvent.ACTION_DOWN) {
			pos_x = event.getX();
			pos_y = event.getY();
			myPath = new Path();
			myPath.moveTo(pos_x, pos_y);
		}
		if (event.getAction() == MotionEvent.ACTION_MOVE) {
			pos_x += event.getX();
			pos_y += event.getY();
			myPath.lineTo(pos_x, pos_y);
			invalidate();
		}
		if (event.getAction() == MotionEvent.ACTION_UP) {
			myPath.lineTo(event.getX(), event.getY());
			draw_List.add(myPath);
			invalidate();
		}
		return true;
	}

viewをタッチするごとに新しいpathを作り、指を離したときにdraw_listにpathを追加します。

onDrawは直接呼ぶことができないため、invalidate()を使います。

あとは適当にpenをセットしておきます。

	//ペンをセット
	protected void setPen(int selColor, float penWidth){
		pen = new Paint();
		pen.setAntiAlias(true);
		pen.setColor(selColor);
		pen.setStyle(Paint.Style.STROKE);
		pen.setStrokeWidth(penWidth);
		pen.setStrokeCap(Paint.Cap.ROUND);
		pen.setStrokeJoin(Paint.Join.ROUND);
	}

onCreate()なんかでペンをセットしておくといいと思います。

参考リンクは以下です。

Android で再開する Java プログラミング(8) – 手書きメモを作る

うまく動かない場合は上記のサイトを参照すれば分かりやすいかもしれません。

とりあえずここまでで簡単なお絵かきができるかと思います。

お絵かきアプリを作成
お絵かきアプリを作成

2014年1月20日開発android,Canvas,onDraw,View,お絵かき,アプリ作成

Posted by ラン