Androidの描画

Index

• 概要
• Canvas
  • オフスクリーンの生成
  • Path描画
  • 各種図形の描画
  • Text描画
  • 文字列の大きさを求める
  • Bitmapの描画
• Bitmap
  • Bitmapのピクセルを直接操作
  • Bitmapの生成
  • リソースからBitmap読込み
  • Bitmapの保存
  • ViewからBitmapを取得
  • OpenGLでBitmapを生成
• SurfaceView

概要

• Androidの描画に関する備忘録としてのメモ

Canvas

• 表示画面に描画する場合は、ViewのonDrawメソッドで渡されるCanvasに対して、
• Paintを設定してから、各種図形を描画する

public void onDraw(Canvas canvas) {
        c.drawColor(Color.BLACK);

        Paint paint = new Paint();

        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.BLUE);
        canvas.drawRect(500f, 500f, 1000f, 1000f, paint);

        fill_paint.setColor(Color.RED);
        canvas.drawOval(new RectF(0f, 0f, 500f, 500f), paint);
}

オフスクリーンの生成

• 表示用のCanvasとは別に、同じ大きさのCanvasを用意する。
• 実際に描画する実体のBitmapを生成して、Canvasに貼り付ける感じ

  Bitmap bitmap = Bitmap.createBitmap(width,height,Bitmap.Config.ARGB_8888);
  Canvas canvas = new Canvas(bitmap);
  Paint paint = new Paint();
  

Path描画

paint.setAntiAlias(true);
paint.setStrokeWidth(5);
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.argb(255, 255, 255, 255));

Path path = new Path();
path.moveTo(100, 100);
path.lineTo(500, 100);
path.lineTo(500, 500);
path.lineTo(100, 500);
path.lineTo(100, 100);

canvas.drawPath(path, paint);

各種図形の描画

• 点の描画

paint.setColor(0xffffffff);
paint.setStrokeWidth(10);
paint.setStrokeCap(Paint.Cap.SQUARE);
canvas.drawPoint(100,100, paint);

float[] pts = {200, 200, 400, 400};
paint.setStrokeCap(Paint.Cap.ROUND);
canvas.drawPoints(pts, paint);

• 線の描画

paint.setStrokeWidth(5);
canvas.drawLine(100,100, 500,500, paint);

• 破線の描画

paint.setPathEffect(new DashPathEffect(new float[]{ 5.0f, 5.0f }, 0));
paint.setStyle(Paint.Style.STROKE);
canvas.drawLine(600,100, 1000,500, paint);

• 矩形の描画

canvas.drawRect(100,100, 500,500, paint);

• 円の描画

canvas.drawCircle(300,300, 200, paint);

Text描画

• 単純にTextを描画してみる

paint.setTextSize(50);                          // Textサイズの指定
paint.setStyle(Style.FILL);                     // Textを塗潰しにする
paint.setShadowLayer(1.5f,4f,4f,Color.BLACK);   // Textに影をつける

canvas.drawText("ABC",x,y,paint);               // Textの描画

文字列の大きさを求める

• 文字列の幅と高さを求める

String text = "ABC";

float tw = paint.measureText(text);                             // 文字列の幅を求める
float th = paint.getFontMetrics(null);                          // 文字列の高さを求める

• フォントの基準は、baselineを基準とした高さで表される

• Canvasのy座標は下方向に増加するので、baselineが基準で零、top,ascentは負の値、descent,bottomは正の値となる

• 従って、文字列の高さは、以下の方法でも計算できる

Paint.FontMetrics fontMetrics = paint.getFontMetrics();
float top = fontMetrics.top;
float ascent = fontMetrics.ascent;
float descent = fontMetrics.descent;
float bottom = fontMetrics.bottom;
float th = descent - ascent;                                    // 文字列の高さを求める

Bitmapの描画

• CanvasのBitmapに、別のBitmapを描画することも出来る

• 座標x,yにbitmapを描画

canvas.drawBitmap(bitmap, x, y, paint);

• bitmapのsrcrectの範囲を、Canvasのdstrectに描画
• 拡大・縮小して描画できる

  Rect srcrect = new Rect(0, 0, bitmap.getWidth()/2, bitmap.getHeight()/2);
  Rect dstrect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
  dstrect.offset(100, 100);
  paint.setFilterBitmap(true);
  canvas.drawBitmap(bitmap, srcrect, dstrect, paint);
  

Bitmap

Bitmapのピクセルを直接操作

• 32x32のBitmapを生成して、直接、赤丸を描いてみる

Bitmap bmp = Bitmap.createBitmap(32, 32, Bitmap.Config.ARGB_8888);

for (int y = 0;y < 32;y++) {
    for (int x = 0;x < 32;x++) {
        int xx=x-16;
        int yy=y-16;
        if (xx*xx+yy*yy<225)
            bmp.setPixel(x, y, Color.argb(255, 255, 0, 0));
    }
}

Bitmapの生成

• Bitmap.Config.ARGB_8888というのは、Bitmapの１ピクセルあたりのデータを定義している
• これ以外にも、以下のようなBitmapを定義することが出来る

リソースからBitmap読込み

• drawableに画像ファイルを用意しておき、bitmapに読み込む

Bitmap bmpx = BitmapFactory.decodeResource(context.getResources(),R.drawable.image_file);

• 画像ファイル形式は、jpg, gif, png に対応している
• リソース名は、拡張子を含まないものとする

Bitmapの保存

• Canvasに描画したものを、そのまま画像ファイルとして保存する

  public static void png_out(String fname) {
            try {
                // 出力ファイルの準備
                FileOutputStream fos = new FileOutputStream(new File(fname+".png"));
                // PNG形式で出力
                bitmap.compress(CompressFormat.PNG, 100, fos);
                fos.close();
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
  }

• Bitmap.Save()メソッドというのも、あるらしい。

ViewからBitmapを取得

public Bitmap getViewBitmap(View view){
    view.setDrawingCacheEnabled(true);
    Bitmap cache = view.getDrawingCache();
    if(cache == null){
        return null;
    }
    Bitmap bitmap = Bitmap.createBitmap(cache);
    view.setDrawingCacheEnabled(false);
    return bitmap;
}

• 特定のViewをBitmapとして取得

OpenGLでBitmapを生成

• OpenGLでは、フレームバッファを読み込む必要がある

private Bitmap capture(int width, int height) {

        final int pixels[] = new int[width * height];
        final IntBuffer buffer = IntBuffer.wrap(pixels);
        buffer.position(0);

        GLES20.glReadPixels(0, 0, width, height, GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, buffer);

        return GLES20Utils.createBitmap(pixels, width, height, Bitmap.Config.ARGB_8888);
}

• 参考： OrangeSignalブログの記事

SurfaceView

• SurfaceViewによる高速描画