Canvas回転覚書

以前書いた記事に画像回転のアドバイスしてもらったので試してみた。

期待する実行結果

描画処理

	@Override
	public void draw(Canvas canvas) {
		super.draw(canvas);
		canvas.rotate(90, rotateX, rotateY);
		this.drawble1.draw(canvas);
		// 90度傾いてるので表示されない
		this.drawble2.draw(canvas);

		// canvas.save();
		// canvas.rotate(90, rotateX, rotateY);
		// this.drawble1.draw(canvas);
		// canvas.restore();
		// this.drawble2.draw(canvas);
	}

Canvas使って画像を描画するときにcanvasを回転させると２枚目以降の画像が上手くいかない。
実際の実行結果

Canvasが回転しているからこうなる

正しい位置に２枚目以降も描画するときはCanvas#saveとCanvas#restoreを使う

package com.example.canvasample;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.view.View;

public class MyView extends View {

	private BitmapDrawable drawble1;
	private BitmapDrawable drawble2;
	private Rect rect1;
	private Rect rect2;
	private int rotateX; // 回転の中心のX
	private int rotateY; // 回転の中心のy

	public MyView(Context context) {
		super(context);
		setBackgroundColor(Color.WHITE);

		// 画像1枚目
		this.drawble1 = (BitmapDrawable) context.getResources().getDrawable(
				R.drawable.android1_img1);
		rect1 = new Rect(0, 0, this.drawble1.getIntrinsicWidth(), this.drawble1
				.getIntrinsicHeight());
		this.drawble1.setBounds(rect1);

		this.rotateX = this.drawble1.getIntrinsicWidth() / 2;
		this.rotateY = this.drawble1.getIntrinsicHeight() / 2;

		// 画像2枚目
		this.drawble2 = (BitmapDrawable) context.getResources().getDrawable(
				R.drawable.android1_img1);
		rect2 = new Rect(0, this.drawble1.getIntrinsicHeight(), this.drawble1
				.getIntrinsicWidth(), this.drawble1.getIntrinsicHeight() * 2);
		this.drawble2.setBounds(rect2);

	}

	@Override
	public void draw(Canvas canvas) {
		canvas.save();
		canvas.rotate(90, rotateX, rotateY);
		this.drawble1.draw(canvas);
		canvas.restore();
		this.drawble2.draw(canvas);
	}
}

これでもOK

	@Override
	public void draw(Canvas canvas) {
		canvas.rotate(90, rotateX, rotateY); //90度傾ける
		this.drawble1.draw(canvas);
		canvas.rotate(-90, rotateX, rotateY);//逆方向に90度傾けて元に戻す
		this.drawble2.draw(canvas);
	}