Xamarin.Android 図形（直線）の描画

1 はじめに

Xamarin.Androidによる、図形（直線）の描画です。

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

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

2 Paintクラスの取得

描画に必要なPaintの取得は、下記のパターンになります。

MyView.cs

class MyView : View { 
    public MyView(Context context) : base(context) { }
    public override void Draw(Canvas canvas) {
        base.Draw(canvas);
        using (var paint = new Paint()) {

            //Paintを使用した描画の処理をここに記述
            
        }
    }
}

3 線の描画

線の描画で指定できるのは、色、幅、パターン、線の始まりと終わりの形状、折れ線を書いた際の曲り形状などです。

(1) 色

線の色は、Colorプロパティに指定します。 Pain.Colorは、Red,Black等の定数や、RGB値、RGBA値で生成することができます。（Aは0～255で指定）

paint.Color = Color.White;// 線を白色にする
//paint.Color = new Color(255, 255, 0);//RGBによる指定（黄色）
//paint.Color = new Color(255, 255, 0,120);//RGBAによる指定（鮮度約５０％の黄色）

(2) 幅

線の幅は、StrokeWidthにポイント数を指定します。

paint.StrokeWidth = 15;//線の太さ 15pt

(3) パターン

線のパターンは、DashPathEffectにパターンを設定し、SetPathEffect()で指定します。 下記の例では、パターンが、２ポイント描画、２ポイント空白の連続なので、結果的に点線となります。

var dash = new float[] { 2, 2 };//パターン ■■□□■■□□
paint.SetPathEffect(new DashPathEffect(dash,0));

(4) 直線

直線は、始点と終点を指定してDrawLine()で描画します。

canvas.DrawLine(x, y, x + 80, y + 80, paint);//直線描画

(5) 折れ線

最初にPathオブジェクトで始点（MoveTo）及び経由点（LineTo）を指定し、そのPathオブジェクトをDrawPathに渡すことで描画します。 また、Pathでは、最後にClose()を指定すると閉じた図形になります。

var path = new Path();
path.MoveTo(x, y);// 始点
path.LineTo(x+80,y+80);//中継点
path.LineTo(x + 140, y + 40);//中継点
canvas.DrawPath(path,paint);//描画

(6) 始点終点の形状

StrokeCapで、始点と終点の形状が指定可能です。 形状は、四角、丸、ブッチの３種類が指定できます。

paint.StrokeCap = Paint.Cap.Butt;//ラインキャップ（ブッチ）

(7) 接続部の形状

折れ線を描画する場合は、StrokeJoinで、その折れた部分の形状を指定できます。 形状は、斜め継、丸、べべルの３種類が指定できます。

paint.StrokeJoin = Paint.Join.Bevel;//接続部形状（べベル）

(8) アンチエイリアス

Androidでは、アンチエイリアスを設定すると文字や線が滑らかに描画されます。

paint.AntiAlias = true;//アンチエイリアス有効

4 サンプル

一通りの指定をサンプルにしてみました。

MyView.cs

public override void Draw(Canvas canvas) {
    base.Draw(canvas);

    using (var paint = new Paint()) {
        //直線(ライン端がブッチで白色の線)
        var x = 20;
        var y = 40;
        paint.AntiAlias = true;//アンチエイリアス有効
        paint.SetStyle(Paint.Style.Stroke);//スタイルを線描画に設定
        paint.StrokeWidth = 15;//線の太さ 15pt
        paint.Color = Color.White;// 線を白色にする
        paint.StrokeCap = Paint.Cap.Butt;//ラインキャップ（ブッチ）四角と比べて頂点に四角を描画しない分短くなる
        canvas.DrawLine(x,y,x+80,y+80,paint);//描画

        //直線(ライン端が丸で青色の線)
        x += 90;//右へずらす
        paint.Color = Color.Blue;// 線を青色にする
        paint.StrokeCap = Paint.Cap.Round;//ラインキャップ（丸）
        canvas.DrawLine(x, y, x + 80, y + 80, paint);//描画

        //直線(ライン端が四角で緑色の線)
        x += 90;//右へずらす
        paint.Color = Color.Green;// 線を緑色にする
        paint.StrokeCap = Paint.Cap.Square;//ラインキャップ（四角）
        canvas.DrawLine(x, y, x + 80, y + 80, paint);//描画

        //折れ線(継ぎ目が斜め継ぎで赤色の折れ線)
        x = 20;
        y = 130;
        paint.StrokeWidth = 20;//線の太さ 20pt
        paint.Color = Color.Red;// 線を赤色にする
        paint.StrokeJoin = Paint.Join.Miter;//接続部形状（斜め継ぎ）
        var path = new Path();
        path.MoveTo(x, y);// 始点
        path.LineTo(x+80,y+80);//中継点
        path.LineTo(x + 140, y + 40);//中継点
        canvas.DrawPath(path,paint);//描画

        //折れ線(継ぎ目がべベルでオレンジ色の折れ線)
        y += 90;//下へずらす
        paint.Color = Color.Orange;// 線をオレンジ色にする
        paint.StrokeJoin = Paint.Join.Bevel;//接続部形状（べベル）
        path.Reset();//パスのリセット
        path.MoveTo(x, y);// 始点
        path.LineTo(x + 80, y + 80);//中継点
        path.LineTo(x + 140, y + 40);//中継点
        canvas.DrawPath(path, paint);//描画

        //折れ線(継ぎ目が丸で茶色の折れ線)
        y += 90;//下へずらす
        paint.Color = Color.Brown;// 線を茶色にする
        paint.StrokeJoin = Paint.Join.Round;//接続部形状（丸）
        path.Reset();//パスのリセット
        path.MoveTo(x, y);// 始点
        path.LineTo(x + 80, y + 80);//中継点
        path.LineTo(x + 140, y + 40);//中継点
        canvas.DrawPath(path, paint);//描画

        //折れ線(紫色の閉じられた折れ線)
        y += 90;//下へずらす
        paint.Color = Color.Magenta;// 線を紫色にする
        paint.StrokeJoin = Paint.Join.Miter;//接続部形状（斜め継ぎ）
        path.Reset();//パスのリセット
        path.MoveTo(x, y);// 始点
        path.LineTo(x + 80, y + 80);//中継点
        path.LineTo(x + 140, y + 40);//中継点
        path.Close();//折れ線を閉じる
        canvas.DrawPath(path, paint);//描画

        //直線(２ドットの点線)
        x = 20;
        y = 540;
        paint.StrokeWidth = 2;//線の太さ 2pt
        paint.Color = Color.White;// 線を白色にする
        var dash = new float[] { 2, 2 };//パターン ■■□□■■□□
        paint.SetPathEffect(new DashPathEffect(dash,0));
        canvas.DrawLine(x, y, x + 80, y + 80, paint);//描画

        //直線（１０ドット（空白４ドット）の破線）
        x += 80;//右へずらす
        dash = new float[] { 10, 4 };//パターン ■■■■■■■■■■□□□□
        paint.SetPathEffect(new DashPathEffect(dash, 0));
        canvas.DrawLine(x, y, x + 80, y + 80, paint);//描画

        //直線（１０ドットと５ドットの一点破線）
        x += 80;//右へずらす
        dash = new float[] { 10, 4, 5, 4 };//パターン ■■■■■■■■■■□□□□■■■■■□□□□
        paint.SetPathEffect(new DashPathEffect(dash, 0));
        canvas.DrawLine(x, y, x + 80, y + 80, paint);//描画

        //直線（１０ドットと５ドットの一点破線）線の太さ3
        x += 80;//右へずらす
        paint.StrokeWidth = 3;//線の太さ 3pt
        dash = new float[] { 10, 4, 5, 4 };//パターン ■■■■■■■■■■□□□□■■■■■□□□□
        paint.SetPathEffect(new DashPathEffect(dash, 0));
        canvas.DrawLine(x, y, x + 80, y + 80, paint);//描画
    }
}

5 まとめ

今回は、Paintを使用した直線の描画についてまとめてみました。 Xamarin.iOSの場合と同様に、このDrawメソッドをオーバーライドする手法は、Xamarin.FormsでBoxViewなどをレンダラーで拡張するときにも、そのまま応用可能です。

6 参考リンク

Xamarin Developers Android.Graphics.Canvas Class

Xamarin Developers Android.Graphics.Paint Class

Xamarin記事一覧（SAPPOROWORKSの覚書）