本篇會介紹一些 Flutter 中 Canvas 的常用繪製操作。

Canvas 的繪製座標系

上圖是 Canvas 繪製區域內的座標系。

原點在左上角，水平向右為 x 軸正方向，垂直向下為 y 軸正方向。

常用繪製操作

繪製線段drawLine()

繪製線段。

? e.g.:

canvas.drawLine(Offset(10, 10), Offset(250, 250), paint);
複製程式碼

? 效果：

線段的寬度通過 Paint.strokeWidth 屬性可以設定線段的寬度。

繪製點drawPoints()

繪製一系列的點，可以連結成線段。

? e.g.:

canvas.drawPoints(
    ui.PointMode.points,
    [Offset(200, 200), Offset(250, 250), Offset(50, 200), Offset(100, 250)],
    paint);
複製程式碼

? 效果：

預設情況下，點是方形的。

如果想要繪製原點，只需要配置 paint.strokeCap=StrokeCap.round 即可。

? 效果：

如果設定 ui.PointMode.polygon，這些點就會按照點陣列順序，從前往後的連結。

canvas.drawPoints(
    ui.PointMode.polygon,
    [Offset(200, 200), Offset(250, 250), Offset(50, 200), Offset(100, 250)],
    paint);
複製程式碼

? 效果：

繪製路徑drawPath()

繪製一個路徑。

Path 有很多的方法去構建路徑，這裡不展開了，可以參考：Path API。

? e.g.:

Path path = Path();
path.moveTo(100, 100);
path.lineTo(200, 200);
path.lineTo(250, 200);
path.lineTo(200, 250);
canvas.drawPath(path, paint);
複製程式碼

? 效果：

閉合路徑 path.close()。

? 效果：

設定填充效果 paint..style=PaintingStyle.fill。

? 效果：

繪製矩形drawRect()

繪製矩形。

你需要提供一個 Rect，當然建立 Rect 的方式也很多，可以參考：Rect API。

? e.g.:

 Rect rect = Rect.fromCircle(
     center: Offset(size.width / 2, size.height / 2), radius: 100);
 canvas.drawRect(rect, paint);
複製程式碼

? 效果：

設定填充效果 paint..style=PaintingStyle.fill。

? 效果：

繪製圓角矩形drawRRect()

繪製圓角矩形。

你需要提供一個 RRect，當然建立 RRect 的方式也很多，可以參考：RRect API。

你也可以用這個方法來實現 drawRect() 的效果，只要把圓角設為 0。

? e.g.:

Rect rect1 = Rect.fromCircle(
    center: Offset(size.width / 2, size.height / 2), radius: 150);
RRect rRect = RRect.fromRectAndRadius(rect1, Radius.circular(20));
canvas.drawRRect(rRect, paint);
複製程式碼

? 效果：

繪製巢狀圓角矩形drawDRRect()

繪製巢狀的圓角矩形。

⚠️ 第一個引數 outer 必須比第二個引數 inner 要大，否則就不顯示了。

? e.g.:

Rect rect1 = Rect.fromCircle(
    center: Offset(size.width / 2, size.height / 2), radius: 140);
Rect rect2 = Rect.fromCircle(
    center: Offset(size.width / 2, size.height / 2), radius: 160);
RRect rRect1 = RRect.fromRectAndRadius(rect1, Radius.circular(20));
RRect rRect2 = RRect.fromRectAndRadius(rect2, Radius.circular(20));
canvas.drawDRRect(rRect2, rRect1, paint);
複製程式碼

? 效果：