Xamarin.Android 図形(四角・円)の描画

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

AndroidDrawRect001

3 四角

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

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

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

最後に、角丸の四角の場合ですが、こちらは、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);// ⑤ 角丸四角の描画
    }
}

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

AndroidDrawRect002

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);//③
    }
}

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

AndroidDrawRect003

5 まとめ

今回は、Paintを使用した四角・円の描画について紹介させて頂きました。

4回に分けて、iOS及びAndroidにおける図形の(線・矩形・円)の描画についてまとめて来ましたが、これに加えて、Windows Phoneにおけるコアグラフィックスの扱いを整理しておけば、Xamarin.FormsでBoxViewをレンダラー拡張する時に威力を発揮するでしょう。

6 参考リンク


Xamarin.Android 図形(直線)の描画
Xamarin.iOS 図形(直線)の描画
Xamarin.iOS 図形(四角・円)の描画
Xamarin Developers Android.Graphics.Canvas Class
Xamarin Developers Android.Graphics.Paint Class
Xamarin記事一覧(SAPPOROWORKSの覚書)