25.Flutter:成为Canvas绘制大师(一)

最新推荐文章于 2025-06-01 19:47:55 发布

转载最新推荐文章于 2025-06-01 19:47:55 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c94c53de51d4556964a4905

文章标签：

#移动开发 #ui

本文是《Flutter快速上手指南》先导篇，介绍了Flutter中Canvas的常用绘制操作。先说明了Canvas的绘制坐标系，原点在左上角，x轴向右、y轴向下为正方向。接着详细介绍了绘制线段、点、路径、矩形、圆角矩形和嵌套圆角矩形等操作及示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录传送门：《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快速上手指南》先导篇