题记

—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。

Flutter跨平台开发一点一滴分析系列文章

1 flutter 中绘制基础引言

Flutter 中实现绘制的主要是CustomPainter类class MyPainter extends CustomPainter{  ///实际的绘画发生在这里  @override  void paint(Canvas canvas, Size size) {  }  ///这样Flutter就知道它必须调用paint方法来重绘你的绘画。  ///否则，在此处返回false表示您不需要重绘  @override  bool shouldRepaint(CustomPainter oldDelegate) {    return true;  }}

然后放在父控件的child里用 CustomPaint 包裹使用

/// CustomPaint 创建画布child:  new CustomPaint(    size: new Size(200,200),    ///这是CustomPainter类的一个实例，它在画布上绘制绘画的第一层    painter: new MyPainter(),    ///完成绘画之后，子画构将显示在绘画的顶部。    child: Center(        child: Text("Blade Runner"),    ),    ///foregroundPaint：最后，这个油漆绘制在前两个图层的顶部    foregroundPainter: MyPainter(),)

在 flutter 通过 Canvas 来结合 Path 来实现绘制 三阶贝塞尔曲线，三阶贝塞尔曲线就是说两个点之间的线 有两个控制点。

例如我们要绘制上述的椭圆，其中 A、B、C 就是我们的目标点，我们绘制的路径就是 从A到B再到C，然后控制点如下

a1 、 b1 点是 A B 的控制点b2 、c2 点是 B C 的控制点

那么我们要绘制出如上图中的效果，代码如下

class CurvePainter1 extends CustomPainter {  ///实际的绘画发生在这里  @override  void paint(Canvas canvas, Size size) {    ///创建画笔    var paint = Paint();    ///设置画笔的颜色    paint.color = Colors.blue;    ///创建路径    var path = Path();    ///A点 设置初始绘制点    path.moveTo(0, 55);    /// 绘制到 B点（100，0）    path.cubicTo(0, 25, 48, 0, 100, 0);    /// 绘制到 C点（214, 55）    path.cubicTo(166, 0, 214, 25, 214, 55);    ///绘制 Path    canvas.drawPath(path, paint);  }  ///你的绘画依赖于一个变量并且该变量发生了变化，那么你在这里返回true，  ///这样Flutter就知道它必须调用paint方法来重绘你的绘画。否则，在此处返回false表示您不需要重绘  @override  bool shouldRepaint(CustomPainter oldDelegate) {    return true;  }}

在 flutter 中，通过 path 的 cubicTo 函数来实现三阶贝塞尔曲线

void cubicTo(double x1, double y1, double x2, double y2, double x3, double y3)点（x1,y1）、(x2,y2) 为控制点 (x3,y3) 为目标点