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

前有大佬分享了用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