flutter绘图基础之三阶贝塞尔曲线cubicTo

题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精。

重要消息 【经验分享视频教程 感兴趣的伙伴可以瞅瞅】


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(),)
3 三阶贝塞尔曲线

在 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) 为目标点

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页