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

SIN

2015.11.03

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

1 はじめに

今回は、Xamarin.Androidの図形（四角・円）の描画です。

サンプルは、ViewクラスのDraw()メソッドをオーバーライドしたものになっています。Xamarin.AndroidでViewのサブクラス化がピンとこない場合は、下記をご参照ください。

Xamarin.Android テンプレート(Blank App)

なお、描画に必要な「Paintの取得」や、描画の諸元（色・太さなど）の指定は、「Xamarin.Androdi 図形（直線）の描画」で紹介したものと同じです。

2 線と塗りつぶし

PaintオブジェクトのSetStyle()で指定されるのが、Stroke（線）なのか、Fill（塗りつぶし）なのかによって、同じDrawRect()を呼び出しても動作が変わってきます。また、Fill（塗りつぶし）では、線の分だけ小さい四角形になるので、指定した通りのサイズの描画を意図するなら、FillAndStroke（両方）にしておいた方が安全かも知れません。

サンプルでは、線幅を大きくとって、この差が分かりやすいようにしてみました。

public override void Draw(Canvas canvas) {
    using (var paint = new Paint()) {
        const int width = 250;
        const int height = 250;
        var x = 30;
        var y = 30;

        paint.AntiAlias = true;//アンチエイリアス有効
        paint.StrokeWidth = 30;//線幅 30(違いが分かりやすいように線幅を太くする)
        paint.Color = Color.Yellow;//線色の指定(黄色）

        //線のみの四角
        paint.SetStyle(Paint.Style.Stroke);
        canvas.DrawRect(new Rect(x, y, x + width, y + height), paint);

        y += height + 50; //下へずらす

        //塗りつぶしの四角
        paint.SetStyle(Paint.Style.Fill);
        canvas.DrawRect(new Rect(x, y, x + width, y + height), paint);

        y += height + 50; //下へずらす

        //線と塗りつぶしの四角
        paint.SetStyle(Paint.Style.FillAndStroke);
        canvas.DrawRect(new Rect(x, y, x + width, y + height), paint);
   }
}

3 四角

次のコードは各種の四角を描画したサンプルです。

四角は、DrawRect()で描画できます（①）。また、Pathオブジェクトを作成してDrawPath()でも同じ動作が期待できます（②）。先に示したとおり、DrawRect()の前にSetStyle(Paint.Style.Stroke)とすると線の四角になり（①）、SetStyle(Paint.Style.FillAndStroke)とすると無理つぶしの四角になります。（③）

ボーダ付の四角を描画する場合は、塗りつぶしと線の２回の描画が必要になります（④）。

最後に、角丸の四角の場合ですが、こちらは、DrawRoundRect()を使用することになります（⑤）。

public override void Draw(Canvas canvas) {
    using (var paint = new Paint()) {
        const int width = 250;
        const int height = 250;

        //赤色の四角を描画する
        var x = 40;
        var y = 40;
        paint.AntiAlias = true;//アンチエイリアス有効
        paint.StrokeWidth = 3;//線幅 3
        paint.Color = Color.Red;//線色の指定（赤色）
        paint.SetStyle(Paint.Style.Stroke);//線のみ描画（塗りつぶしなし）
        canvas.DrawRect(new Rect(x, y, x + width, y + height), paint);// ① 四角の描画
        //下記でも同じ
        //var path = new Path();
        //path.AddRect(new RectF(x, y, x + width, y + height), Path.Direction.Cw);
        //canvas.DrawPath(path, paint);// ②

        y += height + 20; //下へずらす

        //薄い赤色の塗りつぶし四角を描画する

        paint.Color = new Color(255, 0, 0, 100);//線色の指定（薄い赤色）
        paint.SetStyle(Paint.Style.FillAndStroke);//線と塗りつぶしの描画（Style.Fillにすると線の分だけ小さい四角が描画されてしまう）
        canvas.DrawRect(new Rect(x, y, x + width, y + height), paint);// ③ 四角の描画

        y += height + 20; //下へずらす

        //ボーダ付き四角を描画する（線と塗りつぶしを分けて描画しなければならない）
        
        //線
        paint.StrokeWidth = 3;//線幅 3
        paint.Color = Color.Red;//線色の指定（赤色）
        paint.SetStyle(Paint.Style.Stroke);//線のみ描画（塗りつぶしなし）
        canvas.DrawRect(new Rect(x, y, x + width, y + height), paint);// ④ 四角の描画
        
        //塗りつぶし
        paint.Color = new Color(255, 0, 0, 100);//線色の指定（薄い赤色）
        paint.SetStyle(Paint.Style.Fill);//塗りつぶしの描画（線なし）
        canvas.DrawRect(new Rect(x, y, x + width, y + height), paint);// ④ 四角の描画

         y += height + 20; //下へずらす

        //角丸のボーダ付四角を描画する（線と塗りつぶしを分けて描画しなければならない）
    
        const int corner = 20;//角丸のサイズ
         
         //線
         paint.StrokeWidth = 3;
         paint.Color = Color.Red;//線色の指定（赤色）
         paint.SetStyle(Paint.Style.Stroke);//線のみ描画（塗りつぶしなし）
         canvas.DrawRoundRect(new RectF(x, y, x + width, y + height), corner, corner, paint);// ⑤ 角丸四角の描画
         //塗りつぶし
         paint.Color = new Color(255, 0, 0, 100);//線色の指定（薄い赤色）
         paint.SetStyle(Paint.Style.Fill);//塗りつぶしの描画（線なし）
         canvas.DrawRoundRect(new RectF(x, y, x + width, y + height), corner, corner, paint);// ⑤ 角丸四角の描画
    }
}

上記のサンプルを実行すると、次のようになります。

4 円

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

円の描画は、DrawOval()で行います（①）。また、DrawCircle()でも同じく円の描画が可能ですが、こちらの場合は、中心点と半径を指定することになります（②）。状況に応じて、使い分けることになるでしょう。

楕円は、矩形として長方形を与えるだけです（③）。

public override void Draw(Canvas canvas) {
    using (var paint = new Paint()) {
        const int width = 250;
        const int height = 250;

        //緑色の円を描画する
        const int x = 40;
        var y = 40;
        paint.AntiAlias = true; //アンチエイリアス有効
        paint.Color = Color.Lime; //線色の指定（緑色）
        paint.StrokeWidth = 3; //線幅 3
        paint.SetStyle(Paint.Style.Stroke);
        canvas.DrawOval(new RectF(x, y, x + width, y + height), paint);//①
        //canvas.DrawCircle(x,y,radius,panit); //中心と半径を使用して円を描く//②

        y += height + 20; //下へずらす

        //薄い緑色の塗りつぶし円を描画する
        paint.Color = new Color(0, 255, 0, 100); //塗りつぶし色の指定（薄い緑色）
        paint.SetStyle(Paint.Style.FillAndStroke);
        canvas.DrawOval(new RectF(x, y, x + width, y + height), paint);

        y += height + 20; //下へずらす

        //ボーダ付き円を描画する
        //線
        paint.Color = Color.Lime; //線色の指定（緑色）
        paint.StrokeWidth = 3; //線幅 3
        paint.SetStyle(Paint.Style.Stroke);
        canvas.DrawOval(new RectF(x, y, x + width, y + height), paint);
        //塗りつぶし
        paint.Color = new Color(0, 255, 0, 100); //塗りつぶし色の指定（薄い緑色）
        paint.SetStyle(Paint.Style.Fill);
        canvas.DrawOval(new RectF(x, y, x + width, y + height), paint);

        y += height + 20; //下へずらす

        //ボーダ付き楕円を描画する
        //線
        paint.Color = Color.Lime; //線色の指定（緑色）
        paint.StrokeWidth = 3; //線幅 3
        paint.SetStyle(Paint.Style.Stroke);
        canvas.DrawOval(new RectF(x, y, x + width + 50, y + height), paint);//③
        //塗りつぶし
        paint.Color = new Color(0, 255, 0, 100); //塗りつぶし色の指定（薄い緑色）
        paint.SetStyle(Paint.Style.Fill);
        canvas.DrawOval(new RectF(x, y, x + width + 50, y + height), paint);//③
    }
}

上記のサンプルを実行すると、次のようになります。