[移动开发]用 Flutter 的 Canvas 画点有趣的图形

简介

上一篇我们介绍了使用 Flutter 的 Canvas 绘制基本图形的示例，简单的示例没什么好玩的，今天这一篇我们来点有趣的，我们会完成如下图形的绘制：

1. 发现数学重复之美：使用等边三角形组合成彩虹伞面。
2. 绘制彩虹。
3. 绘制评分用的五角星。

通过这一篇，我们可以知道自定义形状绘制的基本原理，然后可以在这个基础上绘制你自己想要绘制的图形。

等边三角形构建重复之美

首先我们来绘制等边三角形，其实上一篇我们也有绘制等边三角形，只是那是将三个顶点手动计算出来的，这一篇我们封装一个绘制等边三角形的通用方法。老规矩，先定义方法的输入参数，如下所示：

• canvas：Canvas 画布
• color：绘制颜色
• startVertex：三角形的第一个顶点位置，这里我们其他边都是相对这个点旋转的
• length：边长
• startAngle：第一条边相对水平方向旋转的夹角，这样我们可以改变夹角来更改三角形的绘制位置。
• clockwise：顺时针绘制，如果是顺时针，则绘制的偏移夹角往顺时针方向开始，否则逆时针。
• filled：是否填充图形。

void drawEquilateralTriangle(
    Canvas 

了解本专栏 订阅专栏 解锁全文 超级会员免费看