前有大佬分享了用CustomPaint画一个自定义的CircleProgressBar的文章, 今天我分享一波自定义View(CustomPaint)的一些基础知识

画布canvas

画布是一个矩形区域，我们可以控制其每一像素来绘制我们想要的内容

canvas 拥有多种绘制点、线、路径、矩形、圆形、以及添加图像的方法，结合这些方法我们可以绘制出千变万化的画面。

虽然，画布可以画这些东西，但是决定这些图形颜色、粗细表现的还是画笔。

画笔Paint

Paint非常好理解，就是我们用来画图形的工具，我们可以设置画笔的颜色、粗细、是否抗锯齿、笔触形状以及作画风格。

通过这些属性我们可以很方便的来定制自己的UI效果，当然我们在“作画”的过程中可以定义多个画笔，这样更方便我们对图形的绘制

画笔Paint的属性

canvas中有多个与绘制相关的方法，如drawLine()、drawRect()、drawOval()、drawOval()、等方法。

但是，仅仅使用canvas这个画布还不够，我们还需要一个画笔paint，我们可以使用如下代码来构建paint

Paint _paint = Paint()..color = Colors.blueAccent //画笔颜色..strokeCap = StrokeCap.round //画笔笔触类型..isAntiAlias = true //是否启动抗锯齿..blendMode = BlendMode.exclusion //颜色混合模式..style = PaintingStyle.fill //绘画风格，默认为填充..colorFilter = ColorFilter.mode(Colors.blueAccent,BlendMode.exclusion) //颜色渲染模式，一般是矩阵效果来改变的,但是flutter中只能使用颜色混合模式..maskFilter = MaskFilter.blur(BlurStyle.inner, 3.0) //模糊遮罩效果，flutter中只有这个..filterQuality = FilterQuality.high //颜色渲染模式的质量..strokeWidth = 15.0; //画笔的宽度
复制代码

当然，在正常的开发中一般不会使用这么多的属性，大家可以根据需要去具体的了解和使用。

画布canvas的方法

以下内容基于此画笔绘制:

Paint _paint = new Paint()..color = Colors.blueAccent..strokeCap = StrokeCap.round..isAntiAlias = true..strokeWidth = 5.0..style = PaintingStyle.stroke;
复制代码

绘制直线

void drawLine(Offset p1, Offset p2, Paint paint)

使用给定的涂料在给定点之间绘制一条线。 该行被描边，此调用忽略[Paint.style]的值。 p1和p2参数为两个点的坐标 , 在这两点之间绘制一条直线。

eg : canvas.drawLine(Offset(20.0, 20.0), Offset(100.0, 100.0), _paint)
复制代码

绘制点drawPoints

void drawPoints(PointMode pointMode, List points, Paint paint)

绘制点也是非常的简单，3个参数分别为: PointMode枚举，坐标 list 和 paint PointMode的枚举类型有三个，points（点），lines（线，隔点连接），polygon（线，相邻连接）

canvas.drawPoints(///PointMode的枚举类型有三个，points（点），lines（线，隔点连接），polygon（线，相邻连接）PointMode.points,[Offset(20.0, 130.0),Offset(100.0, 210.0),Offset(100.0, 310.0),Offset(200.0, 310.0),Offset(200.0, 210.0),Offset(280.0, 130.0),Offset(20.0, 130.0),],_paint..color = Colors.redAccent);
复制代码

为了方便演示，我们在上面定义了7个点，第一个和最后一个点重合。

然后我们设置PointMode为points看下效果。

然后我们把PointMode改为lines

PointMode为lines时，两个点相互连接，也就是说第一个和第二个点连接，第三个跟第四个连接，如果最后只有一个点就舍弃不连接了，在我们的例子中有7个点，所以图中只有三条连线。

然后我们把PointMode改为lines

对，你看的没有错跟上面绘制线段的效果是一样的，相邻点互相连接。

绘制圆rawCircle

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

参数分别为:圆心的坐标、半径和paint即可。 圆形是否填充或描边(或两者)由Paint.style控制。

//绘制圆 参数(圆心，半径，画笔)canvas.drawCircle(Offset(100.0, 350.0),30.0,_paint..color = Colors.greenAccent..style = PaintingStyle.stroke //绘画风格改为stroke);
复制代码

在这里我将画笔Paint的style改成了stroke 然后我们将画笔style改成fill (填充) ,fill也是画笔的style的默认值.

填充之后,这个圆就变成实心的了.

绘制椭圆drawOval

void drawOval(Rect rect, Paint paint)

绘制一个轴对称的椭圆形 参数为一个矩形和画笔paint.

//使用左上和右下角坐标来确定矩形的大小和位置,椭圆是在这个矩形之中内切的Rect rect1 = Rect.fromPoints(Offset(150.0, 200.0), Offset(300.0, 250.0));canvas.drawOval(rect1, _paint);
复制代码

在前面我们已经讲过了使用Rect便可确认这个矩形的大小和位置。

其实，Rect也有多种构建方式：

fromPoints(Offset a, Offset b)
使用左上和右下角坐标来确定矩形的大小和位置fromCircle({ Offset center, double radius })
使用圆的圆心点坐标和半径和确定外切矩形的大小和位置fromLTRB(double left, double top, double right, double bottom)
使用矩形左边的X坐标、矩形顶部的Y坐标、矩形右边的X坐标、矩形底部的Y坐标来确定矩形的大小和位置fromLTWH(double left, double top, double width, double height)
使用矩形左边的X坐标、矩形顶部的Y坐标矩形的宽高来确定矩形的大小和位置
复制代码

绘制圆弧drawArc

void drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint)

首先还是需要Rect来确认圆弧的位置，还需要开始的弧度、结束的弧度、是否使用中心点绘制(圆弧是否向中心闭合)、以及paint.

弧度

根据定义，一周的弧度数为2πr/r=2π，360°角=2π弧度，因此，1弧度约为57.3°，即57°17’44.806’’，1°为π/180弧度，近似值为0.01745弧度，周角为2π弧度，平角（即180°角）为π弧度，直角为π/2弧度。

特殊的弧度:

度	弧度
0°	0
30°	π/6
45°	π/4
60°	π/3
90°	π/2
120°	2π/3
180°	π
270°	3π/2
360°	2π

 //绘制圆弧// Rect来确认圆弧的位置，还需要开始的弧度、结束的弧度、是否使用中心点绘制、以及paint弧度Rect rect2 = Rect.fromCircle(center: Offset(200.0, 50.0), radius: 80.0);canvas.drawArc(rect2, 0.0, 0.8, false, _paint);复制代码

绘制个90度的弧度

const PI = 3.1415926;Rect rect2 = Rect.fromCircle(center: Offset(200.0, 50.0), radius: 80.0);canvas.drawArc(rect2, 0.0, PI / 2, false, _paint);
复制代码

定义π为3.1415926,定义开始的角度为0°扫过的角度为PI / 2（90°），设置userCenter为false

将useCenter改成true 试试: 发现圆弧向中心点闭合了.

绘制圆角矩形drawDRRect

void drawRRect(RRect rrect, Paint paint)

使用RRect确定矩形大小及弧度，使用paint来完成绘制。

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

RRect.fromRectAndRadius(rect, radius)

rect依然用来表示矩形的位置和大小，radius用来表示圆角的大小。

    //用Rect构建一个边长50,中心点坐标为100,100的矩形Rect rect = Rect.fromCircle(center: Offset(100.0, 150.0), radius: 50.0);//根据上面的矩形,构建一个圆角矩形RRect rrect = RRect.fromRectAndRadius(rect, Radius.circular(20.0));canvas.drawRRect(rrect, _paint);
复制代码

将圆角的半径设置为边长(从20改成50)试一下:

就变成了圆.

绘制双圆角矩形drawRRect

void drawDRRect(RRect outer, RRect inner, Paint paint)

和drawRRect类似，使用RRect确定内部、外部矩形大小及弧度，使用paint来完成绘制。

    //绘制两个矩形Rect rect1 = Rect.fromCircle(center: Offset(100.0, 100.0), radius: 60.0);Rect rect2 = Rect.fromCircle(center: Offset(100.0, 100.0), radius: 40.0);//分别绘制外部圆角矩形和内部的圆角矩形RRect outer = RRect.fromRectAndRadius(rect1, Radius.circular(10.0));RRect inner = RRect.fromRectAndRadius(rect2, Radius.circular(10.0));canvas.drawDRRect(outer, inner, _paint);
复制代码

使用Rect.fromCircle来创建Rect，使用RRect.fromRectAndRadius来创建RRect

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

   //绘制两个矩形Rect rect1 = Rect.fromCircle(center: Offset(100.0, 100.0), radius: 60.0);Rect rect2 = Rect.fromCircle(center: Offset(100.0, 100.0), radius: 40.0);//分别绘制外部圆角矩形和内部的圆角矩形RRect outer = RRect.fromRectAndRadius(rect1, Radius.circular(30.0));RRect inner = RRect.fromRectAndRadius(rect2, Radius.circular(5.0));canvas.drawDRRect(outer, inner, _paint);
复制代码

你甚至可以调整角度的大小使两个矩形都变成圆来形成一个圆环.

绘制路径drawPath

void drawPath(Path path, Paint paint)

绘制路径，首先需要一个要绘制的路径path，然后就是这个paint了。

Path的常用方法：

方法名	作用
moveTo	将路径起始点移动到指定的位置
relativeMoveTo	相对于当前位置移动到
lineTo	从当前位置连接指定点
relativeLineTo	相对当前位置连接到
arcTo	曲线
conicTo	贝塞尔曲线
add**	添加其他图形，如addArc，在路径是添加圆弧
contains	路径上是否包括某点
transfor	给路径做matrix4变换
combine	结合两个路径
close	关闭路径，连接路径的起始点
reset	重置路径，恢复到默认状态

eg:

//新建了一个path,然后将路径起始点移动到坐标(100,100)的位置Path path = new Path()..moveTo(100.0, 100.0);path.lineTo(200.0, 200.0);canvas.drawPath(path, _paint);
复制代码

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

我们也可以绘制多个路径:

    Path path = new Path()..moveTo(100.0, 100.0);path.lineTo(200.0, 200.0);path.lineTo(100.0, 300.0);path.lineTo(150.0, 350.0);path.lineTo(150.0, 500.0);canvas.drawPath(path, _paint);
复制代码

使用二阶贝塞尔曲线绘制弧线:

void arcTo(Rect rect, double startAngle, double sweepAngle, bool forceMoveTo)

rect我们都知道了,是一个矩形,startAngle是开始的弧度,sweepAngle是结束的弧度 重点介绍一下forceMoveTo. forceMoveTo:

• 如果“forceMoveTo”参数为false，则添加一条直线段和一条弧段。
• 如果“forceMoveTo”参数为true，则启动一个新的子路径，其中包含一个弧段。

例如:

Path path = new Path()..moveTo(100.0, 100.0);Rect rect = Rect.fromCircle(center: Offset(200.0, 200.0), radius: 60.0);path.arcTo(rect, 0.0, 3.14, false);canvas.drawPath(path, _paint);
复制代码

这里,我们利用贝塞尔曲线绘制了一个半圆,因为起始点的坐标是(100,100),而我们绘制贝塞尔曲线的时候,曲线的原点是(200,200)半径,60,所以我们移动到(200,260)的位置再画这个曲线.

因为forceMoveTo此时为false,所以从起始点到曲线的起始点画出了直线路径, 改为true可以看到,因为启动了一个新的子路径,所以那条线段没有了:

当然,你甚至可以用贝塞尔曲线直接画一个圆:

    Rect rect = Rect.fromCircle(center: Offset(200.0, 200.0), radius: 60.0);path.arcTo(rect, 0.0, 3.14*2, false);canvas.drawPath(path, _paint);
复制代码

使用三阶贝塞尔曲线绘制❤:

void cubicTo(double x1, double y1, double x2, double y2, double x3, double y3)

    var width = 200;var height = 300;path.moveTo(width / 2, height / 4);path.cubicTo((width * 6) / 7, height / 9, (width * 13) / 13,(height * 2) / 5, width / 2, (height * 7) / 12);canvas.drawPath(path, _paint);Path path2 = new Path();path2.moveTo(width / 2, height / 4);path2.cubicTo(width / 7, height / 9, width / 21, (height * 2) / 5,width / 2, (height * 7) / 12);canvas.drawPath(path2, _paint);
复制代码

看一下效果:

然后我们改变paint的样式:

 canvas.drawPath(path, _paint); 替换为:canvas.drawPath(path,_paint..style = PaintingStyle.fill..color = Colors.red);
复制代码

我们将画笔的颜色改成红色,样式改为填充:

绘制颜色drawColor

void drawColor(Color color, BlendMode blendMode)

我们先绘制一个圆:

canvas.drawCircle(Offset(100.0, 100.0), 50.0, _paint);
复制代码

然后我们添加一行代码:

    canvas.drawCircle(Offset(100.0, 100.0), 50.0, _paint);canvas.drawColor(Colors.red, BlendMode.color);  // 添加这行
复制代码

可以看到,圆的颜色变成了红色, 我们还可以改变BlendMode, 例如:BlendMode.colorDodge

更多效果可以查询BlendMode源码.

绘制图片drawImage

void drawImage(Image image, Offset p, Paint paint)

将给定的[image]以其左上角的[偏移量]绘制到画布中 首先我们需要获取本地图片文件，然后绘制图片即可

全文相关代码已提交到 github