CanvasのAPIを利用する
続いて、CanvasのAPIを使って具体的にどのように描写していくのか、簡単な図形の描写の場合で説明します。
キャンバスの座標と大きさ
キャンバスのx軸とy軸は図2のようにデフォルトでは左上が（0,0）になっていて右に向かって正のx軸と下に向かって正のy軸になっています。この軸の原点の位置を移動させたい場合には、translateを使って移動させます。
また、想定する位置と実際に表示する際の位置が異なると図形を表示したくてもその位置の計算は大変面倒になります。そこで、仮想的なCanvasサイズを想定し、それを実際の表示サイズに合わせるということになるケースが多いと思います。そのような時につかえるのがscaleです。これでサイズを縮尺します。
また、scaleはサイズの縮尺以外にも、図3のように軸の向きを変えることが可能です。例えばチャートを描写する場合には、このように軸の原点と向きを自由に変えられる方が考え方も簡単になるはずです。
ただし、図3の左のように軸を反転させると別の問題が生じるケースもあります。例えば、文字表示を行った際にもその軸の反転も有効になってしまうため注意が必要です。
簡単な図形を描写する
図4のような図形をCanvas上に記述してみた例がリスト3です。
例えば、四角形の描写であれば一点の頂点と縦横サイズで描写を指定します。また、円であれば原点とその半径サイズのように、その図形にあった座標の考え方が必要になります。
void paint(Canvas canvas, Size size) {
// （1）色を指定
Paint paint = Paint()
..color = Colors.red;
// （2）マージン20にて画面一杯の四角
Rect rect1 = const Offset(20.0, 20.0) & Size(size.width - 40.0,size.height - 40.0);
canvas.drawRect(rect1, paint);
Paint paint2 = Paint()
..color = Colors.blue;
// （3）位置とサイズをそれぞれdoubleで指定
Rect rect2 = Rect.fromLTWH(size.width / 2 - 50.0, size.height / 2 - 50.0, 100.0, 100.0);
canvas.drawRect(rect2, paint2);
Paint paint3 = Paint()
..color = Colors.black;
// （4）円を記述
canvas.drawCircle(Offset(size.width/2,size.height/2), 40, paint3);
}
まず、最初に（1）で色を作成します。そして、（2）でdrawRectメソッドで四角を記述します。ここでは、全体に20程マージンを作り、画面サイズ一杯に四角形を描写します。
つまり、縦横ではそれぞれ40程マージンがあることになるため、その縦横サイズで描写しています。また、（3）のfromLTWHは、left,top,width,heightの各値を指定して四角形を記述します。Rectでは、これ以外にも中心を指定する構文もあるので、利用しやすいメソッドを使ってください。
また、（4）では中心と半径を指定して、円を描画しています。Canvasでは、このようにさまざまなdrawXXXXXメソッドを用意しているので、必要に応じたものをつかって図形や線を描写できます。
本稿ではすべてのメソッドについての説明は省略しますが、例えば円弧を描写する場合には、drawArcページで具体的な説明が記載されていますので、それらを見ながら自分で試してみてください。
パスの合成を行う
Canvasでは、図形を合成して新たな図形を作成することもできます。図形の合成では図5のような合成方法があります。合成するタイプによって、できあがる図形は変わるので、適したものを利用してください。
// （1）合成するパスを作成 Path path1 = Path(); Rect rect1 = Rect.fromCenter( center: const Offset(-20, 0), height: 100, width: 100, ); path1.addArc(rect1, 0, pi * 2); // （2）合成するもう一つのパスを作成 Path path2 = Path(); Rect rect2 = Rect.fromCenter( center: const Offset(20, 0), height: 100, width: 100, ); path2.addArc(rect2, 0, pi * 2); // （3）パスを合成 Path path = Path.combine(PathOperation.union, path1, path2); canvas.drawPath(path, paint);
リスト4を実行した結果が、図6です。
（1）で合成にもちいる一つ目のパス（図形）を作成します。そして、（2）でもう一つのパスを作成します。今回は分かりやすいように円にしていますが、どのようなパスでも問題ありません。そして、（3）で合成します。
サンプルコードではunionをしていしてパスを合体させていますが、この部分を他のタイプに変えれば交差した図形や減算した図形が作成できます。また、合成したパスに対して、さらに合成していくこともできますので、これでより複雑な絵が描けます。
