flutter自定义View(CustomPainter) 之 canvas方法总结

画布canvas文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

画布是一个矩形区域，我们可以控制其每一像素来绘制我们想要的内容文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

canvas 拥有多种绘制点、线、路径、矩形、圆形、以及添加图像的方法，结合这些方法我们可以绘制出千变万化的画面。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

虽然，画布可以画这些东西，但是决定这些图形颜色、粗细表现的还是画笔。
画笔Paint文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

Paint非常好理解，就是我们用来画图形的工具，我们可以设置画笔的颜色、粗细、是否抗锯齿、笔触形状以及作画风格。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

通过这些属性我们可以很方便的来定制自己的UI效果，当然我们在“作画”的过程中可以定义多个画笔，这样更方便我们对图形的绘制
画笔Paint的属性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

canvas中有多个与绘制相关的方法，如drawLine()、drawRect()、drawOval()、drawOval()、等方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

但是，仅仅使用canvas这个画布还不够，我们还需要一个画笔paint，我们可以使用如下代码来构建paint文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

Paint _paint = Paint()
..color = Colors.blueAccent //画笔颜色
..strokeCap = StrokeCap.round //画笔笔触类型
..isAntiAlias = true //是否启动抗锯齿
..blendMode = BlendMode.exclusion //颜色混合模式
..style = PaintingStyle.fill //绘画风格，默认为填充
..colorFilter = (Colors.blueAccent,
BlendMode.exclusion) //颜色渲染模式，一般是矩阵效果来改变的,但是flutter中只能使用颜色混合模式
..maskFilter = (BlurStyle.inner, 3.0) //模糊遮罩效果，flutter中只有这个
..filterQuality = FilterQuality.high //颜色渲染模式的质量
..strokeWidth = 1; //画笔的宽度文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

当然，在正常的开发中一般不会使用这么多的属性，大家可以根据需要去具体的了解和使用。
画布canvas的方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

以下内容基于此画笔绘制:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

Paint _paint = new Paint()
..color = Colors.blueAccent
..strokeCap = StrokeCap.round
..isAntiAlias = true
..strokeWidth =
..style = PaintingStyle.stroke;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

绘制直线文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

void drawLine(Offset p1, Offset p2, Paint paint)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

使用给定的涂料在给定点之间绘制一条线。 该行被描边，此调用忽略[]的值。
p1和p2参数为两个点的坐标 , 在这两点之间绘制一条直线。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

eg : (Offset(, ), Offset(100.0, 100.0), _paint)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

绘制点drawPoints文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

void drawPoints(PointMode pointMode, List points, Paint paint)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

绘制点也是非常的简单，3个参数分别为: PointMode枚举，坐标 list 和 paint
PointMode的枚举类型有三个，points（点），lines（线，隔点连接），polygon（线，相邻连接）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

(
///PointMode的枚举类型有三个，points（点），lines（线，隔点连接），polygon（线，相邻连接）
,
[
Offset(, 1),
Offset(100.0, 2),
Offset(100.0, 3),
Offset(200.0, 3),
Offset(200.0, 2),
Offset(2, 1),
Offset(, 1),
],
_paint..color = );文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

为了方便演示，我们在上面定义了7个点，第一个和最后一个点重合。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

然后我们设置PointMode为points看下效果。
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

然后我们把PointMode改为lines文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

PointMode.lines文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

PointMode为lines时，两个点相互连接，也就是说第一个和第二个点连接，第三个跟第四个连接，如果最后只有一个点就舍弃不连接了，在我们的例子中有7个点，所以图中只有三条连线。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

然后我们把PointMode改为lines文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

对，你看的没有错跟上面绘制线段的效果是一样的，相邻点互相连接。
绘制圆rawCircle文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

void drawCircle(Offset c, double radius, Paint paint)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

参数分别为:圆心的坐标、半径和paint即可。
圆形是否填充或描边(或两者)由控制。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

//绘制圆 参数(圆心，半径，画笔)
(
Offset(100.0, 3),
,
_paint
..color = Colors.greenAccent
..style = PaintingStyle.stroke //绘画风格改为stroke
);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

在这里我将画笔Paint的style改成了stroke
然后我们将画笔style改成fill (填充) ,fill也是画笔的style的默认值.
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

填充之后,这个圆就变成实心的了.
绘制椭圆drawOval文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

void drawOval(Rect rect, Paint paint)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

绘制一个轴对称的椭圆形
参数为一个矩形和画笔paint.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

//使用左上和右下角坐标来确定矩形的大小和位置,椭圆是在这个矩形之中内切的
Rect rect1 = (Offset(1, 200.0), Offset(300.0, 2));
(rect1, _paint);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

在前面我们已经讲过了使用Rect便可确认这个矩形的大小和位置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

其实，Rect也有多种构建方式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

fromPoints(Offset a, Offset b)
使用左上和右下角坐标来确定矩形的大小和位置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

fromCircle({ Offset center, double radius })
使用圆的圆心点坐标和半径和确定外切矩形的大小和位置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

fromLTRB(double left, double top, double right, double bottom)
使用矩形左边的X坐标、矩形顶部的Y坐标、矩形右边的X坐标、矩形底部的Y坐标来确定矩形的大小和位置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

fromLTWH(double left, double top, double width, double height)
使用矩形左边的X坐标、矩形顶部的Y坐标矩形的宽高来确定矩形的大小和位置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

绘制圆弧drawArc文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

void drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

首先还是需要Rect来确认圆弧的位置，还需要开始的弧度、结束的弧度、是否使用中心点绘制(圆弧是否向中心闭合)、以及paint.
弧度文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

根据定义，一周的弧度数为2πr/r=2π，360°角=2π弧度，因此，1弧度约为°，即57°17’’’，1°为π/180弧度，近似值为弧度，周角为2π弧度，平角（即180°角）为π弧度，直角为π/2弧度。
特殊的弧度:
度     弧度
0°     0
30°     π/6
45°     π/4
60°     π/3
90°     π/2
120°     2π/3
180°     π
270°     3π/2
360°     2π文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

//绘制圆弧
// Rect来确认圆弧的位置，还需要开始的弧度、结束的弧度、是否使用中心点绘制、以及paint弧度
Rect rect2 = (center: Offset(200.0, ), radius: );
(rect2, 0.0, 0.8, false, _paint);
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

在这里插入图片描述
绘制个90度的弧度文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

const PI = ;
Rect rect2 = (center: Offset(200.0, ), radius: );
(rect2, 0.0, PI / 2, false, _paint);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

定义π为,定义开始的角度为0°扫过的角度为PI / 2（90°），设置userCenter为false文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

将useCenter改成true 试试:
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

发现圆弧向中心点闭合了.
绘制圆角矩形drawDRRect文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

void drawRRect(RRect rrect, Paint paint)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

使用RRect确定矩形大小及弧度，使用paint来完成绘制。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

RRect构建起来也非常的方便，直接使用fromRectAndRadius即可文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

(rect, radius)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

rect依然用来表示矩形的位置和大小，radius用来表示圆角的大小。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

//用Rect构建一个边长50,中心点坐标为100,100的矩形
Rect rect = (center: Offset(100.0, 1), radius: );
//根据上面的矩形,构建一个圆角矩形
RRect rrect = (rect, ());
(rrect, _paint);
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

将圆角的半径设置为边长(从20改成50)试一下:
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

就变成了圆.
绘制双圆角矩形drawRRect文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

void drawDRRect(RRect outer, RRect inner, Paint paint)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

和drawRRect类似，使用RRect确定内部、外部矩形大小及弧度，使用paint来完成绘制。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

//绘制两个矩形
Rect rect1 = (center: Offset(100.0, 100.0), radius: );
Rect rect2 = (center: Offset(100.0, 100.0), radius: );文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

//分别绘制外部圆角矩形和内部的圆角矩形
RRect outer = (rect1, ());
RRect inner = (rect2, ());
(outer, inner, _paint);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

使用来创建Rect，使用来创建RRect
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

可以看到两个圆角矩形，当然我们也可以尝试调整角度的度数大小。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

//绘制两个矩形
Rect rect1 = (center: Offset(100.0, 100.0), radius: );
Rect rect2 = (center: Offset(100.0, 100.0), radius: );文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

//分别绘制外部圆角矩形和内部的圆角矩形
RRect outer = (rect1, ());
RRect inner = (rect2, ());
(outer, inner, _paint);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

你甚至可以调整角度的大小使两个矩形都变成圆来形成一个圆环.
绘制路径drawPath文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

void drawPath(Path path, Paint paint)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

绘制路径，首先需要一个要绘制的路径path，然后就是这个paint了。
Path的常用方法：
方法名     作用
moveTo     将路径起始点移动到指定的位置
relativeMoveTo     相对于当前位置移动到
lineTo     从当前位置连接指定点
relativeLineTo     相对当前位置连接到
arcTo     曲线
conicTo     贝塞尔曲线
add**     添加其他图形，如addArc，在路径是添加圆弧
contains     路径上是否包括某点
transfor     给路径做matrix4变换
combine     结合两个路径
close     关闭路径，连接路径的起始点
reset     重置路径，恢复到默认状态文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

eg:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

//新建了一个path,然后将路径起始点移动到坐标(100,100)的位置
Path path = new Path()..moveTo(100.0, 100.0);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

(200.0, 200.0);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

(path, _paint);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

首先新建了一个path,然后将路径起始点移动到坐标(100,100)的位置,
然后从这个位置连接(200,200)的点.
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

我们也可以绘制多个路径:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

Path path = new Path()..moveTo(100.0, 100.0);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

(200.0, 200.0);
(100.0, 300.0);
(1, 3);
(1, 500.0);
(path, _paint);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

使用二阶贝塞尔曲线绘制弧线:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

void arcTo(Rect rect, double startAngle, double sweepAngle, bool forceMoveTo)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

rect我们都知道了,是一个矩形,startAngle是开始的弧度,sweepAngle是结束的弧度
重点介绍一下forceMoveTo.
forceMoveTo:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

如果“forceMoveTo”参数为false，则添加一条直线段和一条弧段。
如果“forceMoveTo”参数为true，则启动一个新的子路径，其中包含一个弧段。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

例如:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

Path path = new Path()..moveTo(100.0, 100.0);
Rect rect = (center: Offset(200.0, 200.0), radius: );
(rect, 0.0, 3.14, false);
(path, _paint);
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

这里,我们利用贝塞尔曲线绘制了一个半圆,因为起始点的坐标是(100,100),而我们绘制贝塞尔曲线的时候,曲线的原点是(200,200)半径,60,所以我们移动到(200,260)的位置再画这个曲线.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

因为forceMoveTo此时为false,所以从起始点到曲线的起始点画出了直线路径,
改为true可以看到,因为启动了一个新的子路径,所以那条线段没有了:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

当然,你甚至可以用贝塞尔曲线直接画一个圆:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

Rect rect = (center: Offset(200.0, 200.0), radius: );文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

(rect, 0.0, 3.14*2, false);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

(path, _paint);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

使用三阶贝塞尔曲线绘制❤:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

void cubicTo(double x1, double y1, double x2, double y2, double x3, double y3)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

var width = 200;
var height = 300;
(width / 2, height / 4);
((width * 6) / 7, height / 9, (width * 13) / 13,
(height * 2) / 5, width / 2, (height * 7) / 12);
(path, _paint);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

Path path2 = new Path();
(width / 2, height / 4);
(width / 7, height / 9, width / 21, (height * 2) / 5,
width / 2, (height * 7) / 12);
(path2, _paint);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

看一下效果:
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

然后我们改变paint的样式:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

(path, _paint);
替换为:
(
path,
_paint
..style = PaintingStyle.fill
..color = Colors.red);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

我们将画笔的颜色改成红色,样式改为填充:
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

绘制颜色drawColor文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

void drawColor(Color color, BlendMode blendMode)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

我们先绘制一个圆:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

(Offset(100.0, 100.0), , _paint);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

然后我们添加一行代码:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

(Offset(100.0, 100.0), , _paint);
(Colors.red, BlendMode.color);  // 添加这行文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

可以看到,圆的颜色变成了红色,
我们还可以改变BlendMode, 例如:
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

更多效果可以查询BlendMode源码.
绘制图片drawImage文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

void drawImage(Image image, Offset p, Paint paint)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

将给定的[image]以其左上角的[偏移量]绘制到画布中
首先我们需要获取本地图片文件，然后绘制图片即可
绘制一个圆形的进度条文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

综合所学,实现一个进度条组件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html

全文相关代码已提交到 github文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/10408.html