この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
1 イメージの描画
Xamarin.Androidでは、CanvasのDrawBitmapを使用して、画像を描画することができます。
DrawBitmap()は、各種のパラメータを取得できます。
- DrawBitmap(Bitmap, Single, Single, Paint) // 位置指定
- DrawBitmap(Bitmap, Rect, Rect, Paint) // クリッピングと拡大縮小
- DrawBitmap(Bitmap, Rect, RectF, Paint) // クリッピングと拡大縮小
- DrawBitmap(Bitmap, Matrix, Paint) // Matrixを使用
サンプルは、ViewクラスのDraw()メソッドをオーバーライドしたものになっています。Xamarin.AndroidでViewのサブクラス化がピンとこない場合は、下記をご参照ください。
Xamarin.Android テンプレート(Blank App)
2 Bitmapの生成
DrawBitmapで使用する、Bitmapオブジェクトは、リソースファイルから生成できます。 なお、ここで注意が必要なのは、「拡張子を指定しない」事です。 ネイティブと同じく、各種解像度の画像を準備できるため、.(ドット)が含まれるファイル名はやめた方が賢明です。
class MyView : View {
Bitmap _bitmap = null;
public MyView(Context context) : base(context) {
// リソース名に拡張子が不要
var res_id = context.Resources.GetIdentifier("classmethod", "drawable", context.PackageName);
if (res_id != 0) {
_bitmap = BitmapFactory.DecodeResource(context.Resources, res_id);
}
}
public override void Draw(Canvas canvas) {
base.Draw(canvas);
// ここに描画コードを追加する
// canvas.DrawBitmap(_bitmap, 0, 0, null);
}
}
画像ファイルは、Resourcesの下のdrawableに配置します。
3 各種の描画例
それでは、各種の描画パターンを試してみます。
(1) 位置指定
DrawBitmapメソッドに描画の基準座標を与えて、サイズ変更することなく、そのまま描画します。
public override void Draw(Canvas canvas) {
base.Draw(canvas);
// 座標0,0に描画
canvas.DrawBitmap(_bitmap, 0, 0, null);
}
(2) サイズの取得
Bitmapオブジェクトは、サイズを取得する事ができるので、これを使用すると、元画像のサイズに比例したサイズ変更が可能です。 サンプルでは元画像のサイズを取得して、半分のサイズで描画しています。
public override void Draw(Canvas canvas) {
base.Draw(canvas);
// 座標0、0に半分のサイズで表示する
var r0 = new Rect(0, 0, _bitmap.Width, _bitmap.Height);
var r1 = new Rect(0, 0, _bitmap.Width/2, _bitmap.Height/2);
canvas.DrawBitmap(_bitmap, r0, r1, null);
}
(3) 拡大・縮小表示
描画範囲と、描画サイズを指定する事で拡大・縮小が可能です。
public override void Draw(Canvas canvas) {
base.Draw(canvas);
// 座標0、0にサイズ600×600で画像を表示する
var r0 = new Rect(0, 0, _bitmap.Width, _bitmap.Height);
var r1 = new Rect(0, 0, 600, 600);
canvas.DrawBitmap(_bitmap, r0, r1, null);
}
(4) 部分表示
範囲を同じにすれば、部分描画になります。元画像のサイズは変更されていません。
public override void Draw(Canvas canvas) {
base.Draw(canvas);
// 座標0、0・サイズ600×600で画像の一部を表示する(サイズ変更なし)
var rect = new Rect(0, 0, 600, 600);
canvas.DrawBitmap(_bitmap, rect, rect, null);
}
(5) 透過表示
Paintオブジェクトを生成して、そのAlpha値を変更することで、透過表示しています。
public override void Draw(Canvas canvas) {
base.Draw(canvas);
// 画像のオリジナルのサイズを取得
var r0 = new Rect(0, 0, _bitmap.Width, _bitmap.Height);
// アルファを変化させるため、Paintオブジェクトを用意する
var paint = new Paint();
paint.Alpha = 0;
var x = 0;
var y = 0;
var size = 300;
foreach (var n in Enumerable.Range(0, 5)) {
// 拡大後のサイズ
var r1 = new Rect(x, y, size, size);
canvas.DrawBitmap(_bitmap, r0, r1, paint);
// 表示座標をずらす
x += 40;
y += 40;
// サイズを少しずつ大きくする
size += 100;
// alpha値を0~255の範囲で徐々に変化させる
paint.Alpha += 255/5;
}
}
4 まとめ
今回は、Xamarin.Androidによるイメージの描画について纏めてみました。 こちらは、ネイティブの開発とほとんど変わるとこは無いようです。