Xamarin.iOS イメージの描画

2015.11.07

この記事は公開されてから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));
        
    }
}

iOSDrawImage001

(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));
    }
}

iOSDrawImage002

(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));
    }
}

iOSDrawImage005

(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));
        
    }
}

iOSDrawImage004

(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;
        }
    }
}

iOSDrawImage003

3 まとめ

今回は、Xamarin.iOSによるイメージの描画について纏めてみました。 ネイティブ(Objective-CやSwift)で書く場合の、drawInRect()、drawAtPoint()とは、ちょっと扱いが違うようです。 なお、今回、ブレンドモードについては例示してませんが、これは、ネイティブのものと全く同じです。

4 参考リンク

iPhoneアプリ開発の虎の巻

MonoTouch.UIKit.UIImage Class

MonoTouch.CoreGraphics.CGBlendMode Enumeration

Xamarin記事一覧(SAPPOROWORKSの覚書)