Xamarin.iOS イメージの描画

SIN

2015.11.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 イメージの描画

Xamarin.iOSでは、UIImageクラスを使用して、画像を描画することができます。

UIIｍageには、Draw()及び、DrawAsPatternInRect()という２つの描画メソッドがあり、それぞれ次のようなパラメータが指定可能です。

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()とは、ちょっと扱いが違うようです。なお、今回、ブレンドモードについては例示してませんが、これは、ネイティブのものと全く同じです。