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