25.Flutter:成爲Canvas繪製大師(一)

目錄傳送門：《Flutter快速上手指南》先導篇

本篇會介紹一些 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);
複製代碼

🖼 效果：

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

🖼 效果：

好了，本篇就到這了。

你能夠花些時間編寫一下這些代碼，運行起來感覺下效果。

想要學習的更多，請看下一篇。

目錄傳送門：《Flutter快速上手指南》先導篇

如何找到我？

傳送門：CoorChice 的主頁

傳送門：CoorChice 的 Github