Xamarin.Android 図形（直線）の描画
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による指定（鮮度約５０％の黄色）
(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 サンプル
一通りの指定をサンプルにしてみました。
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
