自定义视图（CustomPainter）的flutter canvas方法总结

Canvas画布

Canvas是一个矩形区域，我们可以控制它的每一个像素，绘制出你想要的内容

canvas有不同的绘制点、线、路径、矩形、圆形以及添加图像的方法。通过结合这些方法，我们可以绘制不断变化的图像。

虽然您可以在画布上绘制这些东西，但画笔决定了这些图形的颜色和厚度。
刷漆

油漆非常容易理解。它是我们用来绘制图形的工具。我们可以设置画笔颜色、粗细、抗锯齿、线条形状和绘画风格。

这些功能使我们能够轻松定制自己的用户界面效果。当然，我们可以在“绘画”时定义多个画笔，这样可以更方便地绘制图形。

然而，仅仅使用织物是不够的。我们还需要刷漆。我们可以使用下面的代码来构建一个绘画

Paint _paint = Paint()
..color = Colors.blueAccent //画笔颜色
..StrokeCap ​​​​​​= StrokeCap ​​​​描边类型.round / Brush ..isAntiAlias = true //启用抗锯齿
..blendMode = BlendMode.exclusion //颜色混合模式
.. style = PaintingStyle.filtingl, //绘画填充
..colorFilter = ( Colors.blueAccent,
BlendMode.exclusion) //颜色再现模式，通常会随着矩阵效果改变，但只有在 flutter 中才能使用颜色混合模式
Slterty (maskllFilterty. .inner , 3.0) //模糊遮罩效果，仅此为颤动
..filterQuality = FilterQuality.high //颜色渲染模式质量
..StrokeWidth = 1; //画笔宽度

当然，这么多功能在平时开发中一般不会用到。您可以根据需要理解并使用它们。
画布方法

在此画笔上绘制以下内容：

Paint _paint = new Paint()
..round.。 ‍，油漆）

使用给定的油漆在给定的点之间画一条线。在此调用中，将绘制线条并忽略 [] 的值。
参数p1和p2是两点的坐标，在这两点之间画一条直线。

eg: (Offset(, ), Offset(100.0, 100.0), _paint)

Drawpoints绘制点

void绘制点(PointMode pointMode,List点也很简单Dra❙❀❀ Paint Paint)，三个参数分别是：PointMode列表、坐标列表和Paint
PointMode有列表三种类型，Points（点）、Lines（线、连接点）、Polygon（线、连接相邻点）

（
///点空间为三种枚举类型：points（点）、lines（线、连接点）、polygon（连接相邻点的线）
,
[
(, 1),
Offset(100.0, 2) ,
偏移(100.0, 3),
偏移(200.0, 3),
偏移,❙,(200).2, 1),
偏移(, 1),
],
_paint..color = );

为了便于表述，我们在上面定义了 7 个点，第一个点和最后一个点重合。

然后我们将PointMode设置为点来看看效果。

然后我们将PointMode更改为lines

PointMode.lines

当PointMode为lines时，两个点是连接的，即第一个点连接到第二个点。第四个连接中，如果最后只有一个点，则将其丢弃，不连接。在我们的示例中，有 7 个点，因此图中只有 3 个连接。

然后我们将PointMode更改为lines

是的，你是对的。和上面画线段的效果是一样的，相邻的点是相连的。
画圆 rawCircle

void drawCircle(Offset c, double radius, Paint Paint)

参数为：圆心坐标、半径、paint。
控制圆是填充还是描边（或两者）。

//画圆参数（圆心、半径、笔刷）
(
Offset(100.0, 3),
.gre.gre.
.
.cents 。 . style = PaintingStyle.Strong //将绘画风格改为描边
);

这里我把画笔风格改为Paint拖拽
然后我们将画笔风格改为fill, fill也是默认的画笔样式的值。

填充后，圆圈变成实心的。
绘制一个椭圆绘制的pratoval（进行拉直，涂漆）

轴对称椭圆
参数为矩形和画笔油漆。

// 使用左上角和右上角底部坐标来确定矩形的大小和位置。椭圆包含在这个矩形内。该矩形的大小和位置。

其实构造直线的方法有很多种：

从点（偏移a、偏移b）
使用左上角和右上角的坐标来确定矩形的大小和位置 圈。 ({ 偏移中心，双半径 })
使用圆心和半径的坐标来确定

LTRB(双左、双顶、双右、双底部）
使用矩形左侧的 X 坐标、矩形顶部的 Y 坐标、矩形右侧的 X 坐标和矩形底部的 Y 坐标来确定尺寸。以及从

LTWH（双左、双顶、双宽、双高）开始的矩形位置
使用矩形左边缘的 X 坐标、矩形顶部的 Y 坐标，矩形的宽度和高度，确定矩形的大小和位置

绘制圆弧。要确定圆弧的位置，还需要起始弧度、终止弧度、是否以中心点为中心进行绘制（圆弧是否向中心闭合）和绘制。所以1弧度约为°，即57°17 ''''，1°为π/180弧度，近似值为弧度，圆周角为2π弧度，直角（即180°角）为π弧度，直角为π/2弧度。
特殊弧度：
度弧度
0° 0
30° π/6
45°/3/300 90° π/2
120° 2π/3
180° π
270° 3π/2

❙° 2π // 确定圆弧位置的矩形，还需要起始弧度，结束弧度，是否使用中心点和完成弧度进行绘制
矩形 2 = (center: Offset(200.0, ), radius: );
(rect2, 0.0, 0.8, false , _paint);

在此添加图像描述
绘制一个 90 度圆弧

const PI = (​​t. , ), 半径: );
(rekt2, 0.0, PI / 2, false, _paint);

将 π 设置为，将起始角度设置为 0°，将扫描角度设置为 PI / 2（90°），将 userCenter 设置为 false 更改 useCenter为 true 并尝试：

发现圆弧在中心点方向是闭合的。
绘制圆角矩形drawDRRect

void drawRRect(RRect rrect, Paint Paint)

使用RRect 键确认。矩形的大小和弧度是用颜料画出来的。

RRect 构造起来也非常方便，直接使用 fromRectAndRadius 即可。

(rect, radius)

rect仍然用来描述矩形的位置和大小，radius用来描述矩形的大小。圆角。

//使用边长为50、中心坐标为100,100的矩形
Rect rect = (center: Offset(100.0, 1), radius: );
矩形 //c , 创建圆角矩形
RRect rrect = (直线, ());
(右, _finish);

将圆角半径设置为 50 到 20 边。 ）尝试点击：

，它会变成一个圆圈。
绘制双圆角矩形drawRRect

删除drawDRRect(RRect external, RRect inside, Target)

与drawRRect类似，使用RRect定义内部。矩形的大小和弧线是使用油漆绘制的。

//画两个矩形。 //绘制一个外圆角矩形和一个内圆角矩形；

用来创建直线，用来创建RRect

看到两个圆角矩形，当然我们也可以尝试调整一下角度度数。

//画两个矩形。 //绘制一个外圆角矩形和一个内圆角矩形；

甚至可以调整角度，让两个矩形都变成圆形，形成一个圆环。
绘制路径drawpath

删除dragpath（pathpath，paintpaint )

先画出路径。画画，然后是这个油漆。
一般路径方法：
方法名称 功能
移动到 将路径起点移动到指定位置
relativeMoveTo 移动到指定位置 相对位置。当前位置
relativeLineCombine
相对于当前位置 arcTo Curve
coneTo Bezier 曲线
add** 添加其他图像，如添加圆弧 将圆弧添加到路径 ❀ 添加圆弧❙路径包含特定点 transfor
connect 创建路径，然后将路径起点移动到坐标位置 (100 100)
Path path = new Path()..moveTo(100.0) , 100.0);

(200.0) , 200.0);

(path , _paint);

先新建一条路径然后将路径的起点移动到坐标位置(100,100),然后从这个位置连接点(200,200) 。

我们还可以绘制多条路径：

Path path = new Path()..moveTo(100.0, 100.0);

(200.0,00,30.0); 00.0);
(1, 3) ;
(1, 500.0);
(path, _goal);

使用二次贝塞尔曲线绘制圆弧： To(R) startAngle, double swingAngle , bool forceMoveTo )

rect，众所周知，是一个矩形，startAngle是起始圆弧，sweepAngle是结束圆弧
我们重点关注forceMoveTo。❙❙ f "forceMoveTo"参数为false，然后添加一条直线和一段圆弧。
如果“forceMoveTo”参数为 true，则启动包含新圆弧段的子路径。

例如：

Path path = new Path()..moveTo(100.0, 100.0);
Rect rect = (center: Offset(200.0, 200.0),❙♷♷ , 0.0, 3.14 , false);
(path,_goal);

这里我们使用贝塞尔曲线来画一个半圆，因为起点的坐标是(100,100)，而我们在绘制贝塞尔曲线的时候绘制曲线，曲线的原点是(200, 200)半径，60，所以我们到(200, 260)，然后画曲线。

由于目前forceMoveTo为假，所以我们从起点到起点绘制一条曲线，从直接路径
变为真，你可以看到它，因为已经启动了一个新的子路径。 ，线段就没有了：

当然，你甚至可以直接用贝塞尔曲线画圆：

Rect rect = (center: Offset(200.0, 200.0), radius: );

( rect , 0.0, 3.14*2 , false);

(path, _paint);

使用三阶壳塞尔图❤:

voidcubicTo(double x1, double y1, double x22 , double x3, double y3)

其他宽度 = 200;
var 高度 = 300;
(宽度 / 2, 高度 / 4);
((宽度, * 6) / 7 9, (宽度 * 13) / 13,
(高度 * 2) / 5, 宽度 / 2, (高度 * 7) / 12);
(路径, _finish);

路径 2 = new Path();
（宽度/2，高度/4）；
（宽度/7，高度/9，宽度/21，（高度*2）/5，
宽度/2，（高度*7）/12）；
（路径2，_完成）；

看效果：

然后我们改变目标的样式：

(path, _goal);
替换为：
（
路径，
_paint
.. colorstyle = PaintingStyle.fill。）； 我们将画笔颜色改为红色，填充样式：

绘制颜色DrawColor

void drawColor(Color color, BlendMode BlendMode)

我们首先画一个圆：00.0.1.0。 ) , , _paint);

然后添加一行代码：

(Offset(100.0, 100.0), , _paint);
(Colors.red, BlendMode.color); // 添加这一行

可以看到圆圈的颜色变成了红色，
我们还可以改变BlendMode，例如：

如果想要更多效果，可以查看混合模式源代码。
绘制图像drawImage

删除drawImage(ImageImage, Offset p, Paint Paint)

将给定的[图像]转换为在画布上绘制的[其左上角的偏移]]❀❀首先我们需要获取本地图像文件，然后绘制图像
绘制圆形进度条

根据我们学到的知识实现一个进度条组件

所有文本相关代码已提交至github