この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
1 イメージの描画
Xamarin.iOSでは、UIImageクラスを使用して、画像を描画することができます。
UIImageには、Draw()及び、DrawAsPatternInRect()という2つの描画メソッドがあり、それぞれ次のようなパラメータが指定可能です。
- Draw(CGPoint) // 位置
- Draw(CGRect) // 位置・サイズ
- Draw(CGPoint,CGBlendMode,nfloat) // 位置・ブレンドモード・アルファ値
- Draw(CGRect,CGBlendMode,nfloat) // 位置・サイズ・ブレンドモード・アルファ値
- DrawAsPatternInRect(CGRect) // 位置・クリップサイズ
また、UIImageには、SIzeプロパティがあり、元画像のサイズを取得することができます。(読み込み専用)
なお、サンプルは、UIViewのDraw()への描画になっています。Xamarin.iOSでのUIViewのサブクラス化がピンとこない場合は、下記をご参照ください。
Xamarin.iOS テンプレート(Single View App)
2 各種の描画例
それでは、各種の描画パターンを試してみます。
(1) 位置指定
DrawメソッドにCGPointを与えて、サイズ変更することなく、そのまま描画します。
partial class MyView : UIView {
UIImage _image;
public MyView(IntPtr handle) : base(handle) {
_image = new UIImage("classmethod.png");
}
public override void Draw(CGRect rect) {
base.Draw(rect);
// 座標0、0に画像を表示する(サイズ変更なし)
_image.Draw(new CGPoint(0, 0));
}
}
(2) 拡大・縮小表示
DrawメソッドにCGRectを与えて、サイズを変更して描画します。
partial class MyView : UIView {
UIImage _image;
public MyView(IntPtr handle) : base(handle) {
_image = new UIImage("classmethod.png");
}
public override void Draw(CGRect rect) {
base.Draw(rect);
// 座標10、20にサイズ300×300で画像を表示する
_image.Draw(new CGRect(10, 20, 300, 300));
}
}
(3) サイズの取得
Sizeプロパティから元画像のサイズを取得して、半分のサイズで描画しています。
partial class MyView : UIView {
UIImage _image;
public MyView(IntPtr handle) : base(handle) {
_image = new UIImage("classmethod.png");
}
public override void Draw(CGRect rect) {
base.Draw(rect);
// 画像のサイズを取得
var size = _image.Size;
// 座標0、0に半分のサイズで画像を表示する
_image.Draw(new CGRect(0, 0, size.Width/2, size.Height/2));
}
}
(4) 部分表示
DrawAsPatternInRectでクリッピングして表示しています。元画像のサイズは変更されていません。
partial class MyView : UIView {
UIImage _image;
public MyView(IntPtr handle) : base(handle) {
_image = new UIImage("classmethod.png");
}
public override void Draw(CGRect rect) {
base.Draw(rect);
// 座標0、0・サイズ300×300で画像の一部を表示する(サイズ変更なし)
_image.DrawAsPatternInRect(new CGRect(0, 0, 300,300));
}
}
(5) 透過表示
Alpha値を変更することで、透過表示しています。
partial class MyView : UIView {
UIImage _image;
public MyView(IntPtr handle) : base(handle) {
_image = new UIImage("classmethod.png");
}
public override void Draw(CGRect rect) {
base.Draw(rect);
double alpha = 0;
var x = 0;
var y = 50;
var size = 10;
foreach(var n in Enumerable.Range(0, 5)) {
_image.Draw(new CGRect(x, y, size, size), CGBlendMode.Normal, new nfloat(alpha));
// 表示座標をずらす
x += 20;
y += 20;
// サイズを少しずつ大きくする
size += 60;
// alpha値を0~1の範囲で徐々に変化させる
alpha += 0.2;
}
}
}
3 まとめ
今回は、Xamarin.iOSによるイメージの描画について纏めてみました。 ネイティブ(Objective-CやSwift)で書く場合の、drawInRect()、drawAtPoint()とは、ちょっと扱いが違うようです。 なお、今回、ブレンドモードについては例示してませんが、これは、ネイティブのものと全く同じです。