第一百四十八回 自定义组件二

我们在上一章回中介绍了 自定义组件相关的内容，本章回中将继承介绍这方面的内容.闲话休提，让我们一起Talk Flutter吧。

知识回顾

我们在上一章回中介绍自定义组件的概念和分类，重点介绍了如何使用CustomPaint和CustomPainter这两个组件重绘组件。本章回将在此基础上介绍一些细节，这些细节隐藏在CustomPainter的canvas中，接下来我们将详细介绍它。

使用方法

画布

上一章回中我们使用过CustomPainter的paint()方法，不过没有详细介绍它，该方法包含两个参数：

• Canvas参数：主要提供画布功能；
• Size参数：由CustomPaint组件传递，用来控制画布的尺寸；

我们重点介绍Canvas类以及它提供的方法，它表示一个画布，并且提供了相关的方法来实现绘制功能，常用的方法如下：

• drawLine()方法：主要用来绘制直线；
• drawRect()方法：主要用来绘制矩形；
• drawOval()方法：主要用来绘制椭圆；
• drawArc()方法：主要用来绘制圆弧；
• drawCircle()方法：主要用来绘制圆形；
• drawImage()方法：主要用来绘制图片；
• drawPath()方法：主要用来绘制路径，功能十分强大；

除了这些绘制方法外，还可以对画布本身进行平移，缩放，旋转，剪裁，对应的方法为：[translate], [scale], [rotate], [skew]。知道这些方法后，我们再介绍一下绘制的过程，过程只有三个步骤：

1. 保存当前画布;
2. 使用相关的方法绘制图形;
3. 恢复画布。

在后面的小节中我们将通过示例代码来演示。
、

画笔

在绘制图形时还需要使用画笔，Flutter提供了Paint类表示画笔，我们可以通过该类提了相关的属性来设置控制画笔，比如常用的画笔颜色，画笔宽度，画笔风格等，我在这里不一一列出了，大家可以查看Paint类的源代码或者使用点操作符来调用相关的属性。

如果大家有Android原生开发的经验，那么就会发现这个paint()方法和Android中组件的onDraw()方法十分相似，比如几乎相同的canvas和paint.特别是canvas中的各种方法。因此，我就不做过多的介绍了。如果大家不知道这些内容的话，可以查看我在Android专栏中自定义View相关的内容。

示例代码

void paint(Canvas canvas, Size size) {
  Paint paint = Paint()
    ..color = Colors.blue;
    ..isAntiAlias = true
    ..strokeWidth = 2.0;

  canvas.save();
  Rect rect = Rect.fromLTWH(0, 0, size.width,size.height);
  canvas.drawRect(rect, paint);
  canvas.restore();
}

上面的示例代码中创建了一个蓝色画笔，然后使用drawRect()方法绘制了一个矩形。我在这里就不演示程序的运行结果了，建议大家自己动手去实践。

此外，示例代码中只演示了Canvas类的一种方法，大家可以尝试一下其它的方法，特别是DrawPath()方法，它的功能十分强大。这个就当作我留给大家的课后作业吧。

看官们，与"自定义组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!