Androidアプリ作成講座 7-キャンバス上で描画する

2018年8月10日2022年10月18日

それではSurfaceView上に描画を行います。描画はSurfaceにあるキャンバスの上に書き込みます。キャンバスの考え方は、昔からデバイスやOS、言語でありました。最近ではHTML5にもキャンバスがありますね。この上で図形を描画することになります。

今回の講座では円を描画するのですが、とりあえず文字の表示を行います。

Contents

1. 1.SurfaceViewソース
2. 2.ライブラリの追加
3. 3.描画用関数(myDraw)の作成
4. 4.実行してみる
5. 5.キャンバスに図形をいろいろ描画すればOK
6. (LIST)Androidアプリ作成講座

1.SurfaceViewソース

package kunimiyasoft.circletest;

import android.content.Context;
import android.view.SurfaceView;

import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Color;

import android.view.SurfaceHolder;
import android.view.SurfaceHolder.Callback;

public class MySurfaceView extends SurfaceView implements SurfaceHolder.Callback {

    private SurfaceHolder holder;

    public MySurfaceView(Context context) {
        super(context);

        holder = getHolder();
        holder.addCallback(this);
    }

    // 変化があった時
    @Override
    public void surfaceChanged(SurfaceHolder holder, int f, int w, int h) {
        myDraw() ;
    }

    // 作成された時
    @Override
    public void surfaceCreated(SurfaceHolder holder) {
    }

    // 破棄される時
    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {
    }

    public void myDraw() {
        Canvas canvas = holder.lockCanvas();

        Paint paint = new Paint();
        paint.setColor(Color.BLACK);
        paint.setTextSize(50);

        canvas.drawText("My Draw !!", 100, 100, paint);

        holder.unlockCanvasAndPost(canvas);
    }
}

2.ライブラリの追加

キャンバスやブラシ、色などを使うためにライブラリを設定します。

import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Color;

3.描画用関数(myDraw)の作成

今回は、描画関数を作って、それをSurfaceChangedで呼び出す仕様にします。onDraw関数をオーバーライドする方が簡単なようですが、今後の処理を考えて今回の仕様にしました。

キャンバスを取得する

Canvas canvas = holder.lockCanvas();

キャンバスを取得します。同時にロックして、他でキャンバスを使わせないようにします。

ブラシをセットする

Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setTextSize(50);

ペイントクラスで、ブラシの定義をします。ペイントクラスのインスタンスを作り、ブラシの色を黒にして、テキストの高さを50にしています。

デバイスによって解像度は大きく違うため、文字の大きさも大きく変わります。本来は調整が必要ですが、ここでは固定値を使います。必要に応じて、50の値を変えてみてください。

文字を表示する

canvas.drawText(“My Draw !!", 100, 100, paint);

X軸とY軸のそれぞれが100の位置に、文字列「My Draw !!」を表示します。

キャンバスを解放する

holder.unlockCanvasAndPost(canvas);

キャンバスを占有して使用したので、開放します。

4.実行してみる

このように、画面が表示されればOKです。

5.キャンバスに図形をいろいろ描画すればOK

これで文字の描画ができました。今回は文字を表示しましたが、次の投稿で円を描画しますし、ビットマップを表示しても良いでしょう。キャンバスの上に描画することによって、Androidの画面上に自由にグラフィックを表示することができます。

次の投稿では、円を描いていきます。

(LIST)Androidアプリ作成講座

Android開発Android Studio,Androidアプリ作成講座,プログラミング教育

Posted by kunimiyasoft

Androidアプリ作成講座 8-円を描画する

Androidアプリ作成講座 6-SurfaceViewがイベントを受け取れるようにする