Xamarin.Android 図形(直線)の描画

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

1 はじめに

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

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

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

2 Paintクラスの取得

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

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による指定(鮮度約50%の黄色)

(2) 幅

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

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

(3) パターン

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

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で、始点と終点の形状が指定可能です。 形状は、四角、丸、ブッチの3種類が指定できます。

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

(7) 接続部の形状

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

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

(8) アンチエイリアス

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

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

4 サンプル

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

XamarinAndroidLineDraw001

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);//描画

        //直線(2ドットの点線)
        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);//描画

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

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

        //直線(10ドットと5ドットの一点破線)線の太さ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の覚書)