矩形を描写する

矩形を描く
矩形とは長方形のことです
矩形を描くにも円や線と同様にPaintクラスで描写します
矩形はdrawRectを使用して
（始点のx座標 , 始点のy座標 , 終点のx座標 , 終点のy座標 , paint）
を指定します

		 protected void onDraw(Canvas canvas) {
		     super.onDraw(canvas);
		
			//この間にグラフィック描画のコードを記述する
			Paint paint = new Paint();
			//色を設定
			paint.setColor(Color.GRAY);
			//線の太さを指定
			paint.setStrokeWidth(5);
			// 線で矩形を描く
			paint.setStyle(Paint.Style.STROKE);
			canvas.drawRect(50, 50, 200, 100, paint);
			// 矩形の内部を塗りつぶす
			paint.setStyle(Paint.Style.FILL);
			canvas.drawRect(250, 50, 350, 100, paint);

		     //終了
        }

setStyleで線のみか、内部を塗りつぶすか、線で描く内部を塗りつぶすかを指定するのは円と変わりません
ちなみに線で円を描き内部を塗りつぶすには
paint.setStyle(Paint.Style.STROKE);を使用します

角の丸い矩形を描く
角の丸い矩形を作るにはdrawRoundRectを使用します
RectF（始点のx座標 , 始点のy座標 , 終点のx座標 , 終点のy座標）
でまず座標を指定し（これをdrawRectで使用することも可能）
つぎにdrawRoundRectで座標と角の丸みを指定します

		 protected void onDraw(Canvas canvas) {
		     super.onDraw(canvas);
		
			//この間にグラフィック描画のコードを記述する
			Paint paint = new Paint();
			//色を設定
			paint.setColor(Color.LTGRAY);
			//線の太さを指定
			paint.setStrokeWidth(5);
			// 線で矩形を描く
			paint.setStyle(Paint.Style.STROKE);
			//表示する座標指定
			RectF rect = new RectF(50, 50, 200, 100);
			canvas.drawRoundRect(rect, 40,10,paint);
			
			// 矩形の内部を塗りつぶす
			paint.setStyle(Paint.Style.FILL);
			//表示する座標指定
			rect = new RectF(250, 50, 350, 100);
			canvas.drawRoundRect(rect, 10,40,paint);
		     //終了
        }

drawRoundRectでは
（座標 , 丸み始めるx座標 , 丸み始めるy座標 , paint）としています

スポンサードリンク

円・楕円を描写する

円を描く
円を描くにはdrawCircleを使用します
また、setStyleで
・線のみ
・内部を塗りつぶす
・線で描きその内部を塗りつぶす
を指定できます

		 protected void onDraw(Canvas canvas) {
		     super.onDraw(canvas);
		
			//この間にグラフィック描画のコードを記述する
			Paint paint = new Paint();
			//色を設定
			paint.setColor(Color.CYAN);
			//大きさを設定
			paint.setStrokeWidth(10);
			
			//線で円を描く
			paint.setStyle(Paint.Style.STROKE);
			canvas.drawCircle(50, 50, 30, paint);
			
			// 円の内部を塗りつぶす
			paint.setStyle(Paint.Style.FILL);
			canvas.drawCircle(150, 50, 30, paint);
			
			// 線で円を描き, 内部を塗りつぶす
			paint.setStyle(Paint.Style.FILL_AND_STROKE);
			canvas.drawCircle(50, 150, 30, paint);
		     //終了
        }

幅や色指定は基本的に同じです
drawCircleによって
（中心のx座標 , 中心のy座標 , 半径 , paint）を指定して描写します
よくよく見ると右側の円が少し雑になって見えます
対策としてはpaintにアンチエイリアス（ピクセルのギザギザを滑らかにする）を設定します
paint.setAntiAlias(true);を追加してみると・・・


なめらかに描写されているのがわかります
楕円を描く
楕円は矩形をあらわすRectクラス（float型のRectF）と
楕円を描くdrawOvalによって描写します

		 protected void onDraw(Canvas canvas) {
		     super.onDraw(canvas);
		
			//この間にグラフィック描画のコードを記述する
			Paint paint = new Paint();
			//色を設定
			paint.setColor(Color.CYAN);
			//大きさを設定
			paint.setStrokeWidth(10);
			paint.setAntiAlias(true);
			
			// 楕円を描く
			paint.setStyle(Paint.Style.STROKE);
			//範囲を指定
			RectF rect = new RectF(30, 30, 150, 100);
			canvas.drawOval(rect, paint);
			// 楕円の内部を塗りつぶす
			paint.setStyle(Paint.Style.FILL);
			//範囲を指定
			rect.set(30, 180, 100, 300);
			canvas.drawOval(rect, paint);
		     //終了
        }

RectFによって（始点のx座標 , 始点のy座標 , 終点のx座標 , 終点のy座標）
を設定しています

スポンサードリンク

点・直線を描写する

点を描く
前回CustomViewという独自クラスを作成しました
Viewクラスへのグラフィックの描画
今回はここに点を描写してみたいと思います

		 protected void onDraw(Canvas canvas) {
		     super.onDraw(canvas);
		
			//この間にグラフィック描画のコードを記述する
			//開始
		     //paintを新規作成
		     Paint paint = new Paint();
		     //色を設定
		     paint.setColor(Color.RED);
		     //大きさを設定
		     paint.setStrokeWidth(10);
		     //座標を設定
		     canvas.drawPoint(50, 50, paint);
		     //終了
        }

drawPointでの座標は左上を（0,0）としてのものです
今回は（50,50）を指定しています
setColorで色を指定していますが使える色はこちら
色を指定する

点を複数描く
複数配置する場合も基本的には同じです
drawPointで座標を指定するときにx,yを個数分指定すればOKです

		 protected void onDraw(Canvas canvas) {
		     super.onDraw(canvas);
		
			//この間にグラフィック描画のコードを記述する
			//開始
		     //paintを新規作成
		     Paint paint = new Paint();
		     //色を設定
		     paint.setColor(Color.RED);
		     //大きさを設定
		     paint.setStrokeWidth(10);
			// 複数の点を描く
			float[] xy ={20,20,40,40,100,100};
			canvas.drawPoints(xy, paint);
		     //終了
        }

あとはdrowPointがdrawPointsになってるぐらいですかねｗ

線を描く
次は直線を描いてみたいと思います

		 protected void onDraw(Canvas canvas) {
		     super.onDraw(canvas);
		
			//この間にグラフィック描画のコードを記述する
			//開始
		     //paintを新規作成
		     Paint paint = new Paint();
		     //色を設定
		     paint.setColor(Color.RED);
		     //大きさを設定
		     paint.setStrokeWidth(10);
			// 線を描く座標を指定
		     canvas.drawLine(10,10,100,100,paint);
		     //終了
        }

drawLineでの４つの数字はそれぞれ
（始点x座標 , 始点のy座標 , 終点のx座標 , 終点のy座標 , paint）
となっています

線を複数描く
複数線を描く場合も複数点を描く場合とほぼ同じです

		 protected void onDraw(Canvas canvas) {
		     super.onDraw(canvas);
		
			//この間にグラフィック描画のコードを記述する
			//開始
		     //paintを新規作成
		     Paint paint = new Paint();
		     //色を設定
		     paint.setColor(Color.RED);
		     //大きさを設定
		     paint.setStrokeWidth(10);
		     //座標を複数指定
		     float[] xy = {10,10,100,100,40,10,200,200};
			// 線を描く座標を指定
		     canvas.drawLines(xy,paint);
		     //終了
        }

座標指定を1つ目の線の座標、2つ目の線の座標・・・としていけばOKです
あとはdrawLinesぐらいです

スポンサードリンク

Viewクラスへのグラフィックの描画

アンドロイド画面に色々な図形を描写していきたいと思います
たくさんの機能があるそうなのですこしづつまとめていきたいと思ってます

Viewクラスへのグラフィックの描画
まずは基本となるViewクラスの独自クラスを作成します
Activityの名前をDrawActivityとしました

package draw.test;

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.os.Bundle;
import android.view.View;

public class DrawActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //カスタムビューを表示
        setContentView(new CustomView(this));
	    }
	}
	
	//独自クラス
	class CustomView extends View {
	    public CustomView(Context context) {
	        super(context);
	        setFocusable(true);
	    }
	 
	    protected void onDraw(Canvas canvas) {
	        super.onDraw(canvas);
	 
	        //この間にグラフィック描画のコードを記述する
	        //開始
	 
	        //終了
	    }
	}

CustomViewという独自クラスを作成しその中で
onDrawメソッドをオーバーライトして
そこにグラフィックを描画するコードを記述します
この部分を変更して様々なグラフィックを書いていきたいと思います

スポンサードリンク