まつまる どうも、まつまるです。アプリに自作の図形を表示したい時ありますよね？今回はFlutterで丸と直線をお絵描きしていきます。
今回はできるだけシンプルな図形を作成してみました。
図形を作成するコードをどこに作ればいいのか分からない人は下を参考にしてください。
お絵描きするならpaint以下に追記していきます。
canvas.drawCircle() : 丸（円）
canvas.drawLine() : 直線
canvas.drawArc() : アーチ
canvas.drawOval() : 楕円
canvas.drawPath() : 直線やアーチなど
canvas.drawRect() : 長方形
たくさんあるのでもっと知りたい方は公式サイトをご覧ください。
丸を描画
丸なのでcanvas.drawCircle()を使います。引数は、座標、サイズ、ペイント詳細です。
簡単ですね〜。
直線を描画（drawLine）
次はcanvas.drawLine()を使ってみます。引数は、座標、座標、ペイント詳細です。
直線を描画（drawPath）
次はcanvas.drawPath()を使ってさっきと同じ図形を描画しようと思います。Pathはけっこう汎用性高くてよさそう。引数は、経路、ペイント詳細です。
以上、簡単でしたがCustomPaintの使い方でした。次回はもう少し踏み込んで角度を表示できるようにしていきます。
コード内にコメントも書いてありとても参考になりました。