Xamarin.iOS 図形（四角・円）の描画

1 はじめに

Xamarin.iOS、図形（四角・円）の描画です。

サンプルは、UIViewのDraw()への描画になっています。Xamarin.iOSでのUIViewのサブクラス化がピンとこない場合は、下記をご参照ください。

Xamarin.iOS テンプレート(Single View App)

なお、描画に必要な「グラフィックコンテキストの取得」や、四角や円を描画する際に指定するボーダーに関する諸元（色・太さなど）の指定については、「Xamarin.iOS 図形（直線）の描画」で紹介したものと同じです。

2 塗りつぶし

コンテキストに塗りつぶしの色を指定するのは、SetFillColor()です。 SetStrokeColor()の時と同じく、パラメータはRGBAやCGColorとなります。

    context.SetFillColor(255,0,0,0.2f);//塗りつぶし色の指定（薄い赤色）
    //context.SetFillColor(UIColor.Orange.CGColor);//塗りつぶし色の指定（オレンジ色）

3 四角

四角形のパスは、「図形（直線）の描画」で紹介した折れ線（MoveTo,AddLinePoint）でも指定することが可能ですが、AddRect()を使用すると、一発で四角形のパスを指定できます（①）。 また。コンテキストへのパス追加には、AddPath()というのも利用でき、パラメータにCGRectを指定して四角形が指定可能です（②）。

パス指定後の線の描画は、StrokePath()または、DrawPath(CGPathDrawingMode.Stroke)で行います。

塗りつぶしの四角は、FillRect()で行います（③）。パスを指定して、DrawPath(CGPathDrawingMode.Fill)でも構いません（④）。

ボーダ付の四角を描画する場合は、四角形のパス指定をしたのちに DrawPath(CGPathDrawingMode.FillStroke)で、線と塗りつぶしを一気に描画します（⑤）。

最後に、角丸の四角の場合ですが、こちらは、AddPath()にCGPath.FromRoundedRect()を指定してパスの指定を行います（⑥）。

結局、全部、パスの指定と出力（描画）だけです。

// UIViewのDrawメソッドをオーバーライドする
public override void Draw(CGRect rect) {
    base.Draw(rect);
        // グラフィックコンテキストの取得
        using (var context = UIGraphics.GetCurrentContext()) {

            var width = 100;
            var height = 100;

            //赤色の四角を描画する
            int x = 40;
            int y = 40;
            context.SetLineWidth(3);
            context.SetStrokeColor(UIColor.Red.CGColor);//線色の指定（赤色）
            context.AddRect(new CGRect(x, y, width, height)); //①
            context.StrokePath();//線の描画
            //下記でも同じ
            //context.AddPath(CGPath.FromRect(new CGRect(x, y, width, height)));//②
            //context.DrawPath(CGPathDrawingMode.Stroke);//線の描画

            //薄い赤色の塗りつぶし四角を描画する
            y += 120; //下へずらす
            context.SetFillColor(255, 0, 0, 0.2f);//塗りつぶし色の指定（薄い赤色）
            context.FillRect(new CGRect(x, y, width, height));//③塗りつぶしの描画
            //下記でも同じ
            //context.AddPath(CGPath.FromRect(new CGRect(x, y, width, height)));
            //context.DrawPath(CGPathDrawingMode.Fill);//④塗りつぶしの描画 

            //ボーダ付き四角を描画する
            y += 120; //下へずらす
            context.AddPath(CGPath.FromRect(new CGRect(x, y, width, height)));
            context.DrawPath(CGPathDrawingMode.FillStroke);//⑤ 線と塗りつぶしの描画

            //角丸のボーダ付四角を描画する
            var corner = 20;//角丸のサイズ
            y += 120; //下へずらす
            context.AddPath(CGPath.FromRoundedRect(new CGRect(x, y, width, height), corner, corner));//⑥
            context.DrawPath(CGPathDrawingMode.FillStroke);//線と塗りつぶしの描画
        }
    }
}

4 円

四角と同じ要領で、円を書いてみます。

線のみの円は、AddEllipseInRect()でパスを指定して、StrokePath()で描画します（①）。

塗りつぶしの円は FillEllipseInRect()です（②）。 AddEllipseInRect()でパスを指定して、DrawPath(CGPathDrawingMode.Fill)でも構いません（③）。

ボーダ付の塗りつぶしは、四角形を描画した時と、まったく要領は同じです。 AddEllipseInRect()でパスを指定して、DrawPath(CGPathDrawingMode.FillStroke)です（④）。

最後に楕円ですが、矩形として長方形を与えるだけです（⑤）。

// UIViewのDrawメソッドをオーバーライドする
public override void Draw(CGRect rect) {
    base.Draw(rect);
        // グラフィックコンテキストの取得
        using (var context = UIGraphics.GetCurrentContext()) {
            var width = 100;
            var height = 100;

            //青色の円を描画する
            int x = 40;
            int y = 40;
            context.SetStrokeColor(UIColor.Blue.CGColor);//線色の指定（青色）
            context.SetLineWidth(3);//線の太さ
            context.AddEllipseInRect(new CGRect(x, y, width, height));
            context.StrokePath();//① 線の描画

            //薄い青色の塗りつぶし円を描画する
            y += 120; //下へずらす
            context.SetFillColor(0, 0, 255, 0.2f);//塗りつぶし色の指定（薄い青色）
            context.FillEllipseInRect(new CGRect(x, y, width, height));//② 塗りつぶし円の描画
            //下記でも同じ
            //context.AddEllipseInRect(new CGRect(x, y, width, height));//③
            //context.DrawPath(CGPathDrawingMode.Fill);//塗りつぶしの描画

            //ボーダ付き円を描画する
            y += 120; //下へずらす
            context.AddEllipseInRect(new CGRect(x, y, width, height));//④
            context.DrawPath(CGPathDrawingMode.FillStroke);//④ 線と塗りつぶしの描画

            //ボーダ付き楕円を描画する
            y += 120; //下へずらす
            context.AddEllipseInRect(new CGRect(x, y, width + 50, height));//⑤ 横幅を修正
            context.DrawPath(CGPathDrawingMode.FillStroke);//線と塗りつぶしの描画
        }
    }
}

5 まとめ

今回は、直線に引き続いてCGContextを使用した描画についてでした。 こちらもXamarin.FormsでBoxViewなどをレンダラーで拡張するときに、重要な処理になります。

6 参考リンク

Xamarin Developers Core Graphics

Xamarin Developers UIKit.UIGraphics Class

Xamarin.iOS「図形（直線）の描画」

Xamarin記事一覧（SAPPOROWORKSの覚書）