画布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;
复制代码

绘制直线

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

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

[图片上传中...(image-e444c2-1563937266654-23)]

<figcaption></figcaption>

绘制点drawPoints

绘制点也是非常的简单，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看下效果。

[图片上传中...(image-2e5035-1563937266654-22)]

<figcaption></figcaption>

然后我们把PointMode改为lines

[图片上传中...(image-c7b574-1563937266654-21)]

<figcaption></figcaption>

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

然后我们把PointMode改为lines

[图片上传中...(image-aa0ccb-1563937266654-20)]

<figcaption></figcaption>

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

绘制圆rawCircle

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

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

[图片上传中...(image-170b7-1563937266654-19)]

<figcaption></figcaption>

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

[图片上传中...(image-8fbd17-1563937266654-18)]

<figcaption></figcaption>

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

绘制椭圆drawOval

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

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

[图片上传中...(image-4e7b03-1563937266653-17)]

<figcaption></figcaption>

在前面我们已经讲过了使用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

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

弧度

根据定义，一周的弧度数为2πr/r=2π，360°角=2π弧度，因此，1弧度约为57.3°，即57°17’44.806’’，1°为π/180弧度，近似值为0.01745弧度，周角为2π弧度，平角（即180°角）为π弧度，直角为π/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);

复制代码

[图片上传中...(image-925ab1-1563937266653-16)]

<figcaption></figcaption>

绘制个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

[图片上传中...(image-ab313c-1563937266653-15)]

<figcaption></figcaption>

将useCenter改成true 试试:[图片上传中...(image-6337dc-1563937266653-14)]

<figcaption></figcaption>

发现圆弧向中心点闭合了.

绘制圆角矩形drawDRRect

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

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

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);
复制代码

[图片上传中...(image-24ee2d-1563937266653-13)]

<figcaption></figcaption>

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

[图片上传中...(image-1e3090-1563937266653-12)]

<figcaption></figcaption>

就变成了圆.

绘制双圆角矩形drawRRect

和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

[图片上传中...(image-3dab2a-1563937266653-11)]

<figcaption></figcaption>

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

   //绘制两个矩形
    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);
复制代码

[图片上传中...(image-d42b23-1563937266653-10)]

<figcaption></figcaption>

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

绘制路径drawPath

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

Path的常用方法：

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)的点.

[图片上传中...(image-97f172-1563937266652-9)]

<figcaption></figcaption>

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

    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);
复制代码

[图片上传中...(image-c5e81-1563937266652-8)]

<figcaption></figcaption>

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

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);
复制代码

[图片上传中...(image-4225cb-1563937266651-7)]

<figcaption></figcaption>

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

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

[图片上传中...(image-8b24f7-1563937266651-6)]

<figcaption></figcaption>

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

    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);
复制代码

[图片上传中...(image-32635a-1563937266651-5)]

<figcaption></figcaption>

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

    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);
复制代码

看一下效果:

[图片上传中...(image-e35e61-1563937266651-4)]

<figcaption></figcaption>

然后我们改变paint的样式:

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

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

[图片上传中...(image-c01de9-1563937266651-3)]

<figcaption></figcaption>

绘制颜色drawColor

我们先绘制一个圆:

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

[图片上传中...(image-b56f60-1563937266651-2)]

<figcaption></figcaption>

然后我们添加一行代码:

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

[图片上传中...(image-1a6320-1563937266650-1)]

<figcaption></figcaption>

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

[图片上传中...(image-32ac1c-1563937266650-0)]

<figcaption></figcaption>

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

绘制图片drawImage

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

全文相关代码已提交到 github

• 转载来自链接