Flutter 贝塞尔曲线的基础使用

Flutter使用贝塞尔曲线的基础使用

原创：@As.Kai
博客地址：https://blog.csdn.net/qq_42362997
如果以下内容对您有帮助，点赞点赞点赞~

公式

Flutter中的贝塞尔曲线

/// Adds a quadratic bezier segment that curves from the current
  /// point to the given point (x2,y2), using the control point
  /// (x1,y1).二阶贝塞尔曲线,控制点为(x1,y1),终点为(x2,y2),起点为当前path所在的点
  void quadraticBezierTo(double x1, double y1, double x2, double y2) native 'Path_quadraticBezierTo';
  
/// Adds a cubic bezier segment that curves from the current point
  /// to the given point (x3,y3), using the control points (x1,y1) and
  /// (x2,y2).三阶贝塞尔曲线,控制点为(x1,y1),(x2,y2),终点为(x3,y3),起点为当前path所在的点
  void cubicTo(double x1, double y1, double x2, double y2, double x3, double y3) native 'Path_cubicTo';

实例操作

创建个ClipPath()提供一个绘画剪辑路径

    ......
    ......
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.grey,
        child: Column(
          children: [
            ClipPath(
              clipper: MyClipPath(),
              child: Container(
                height: 600,
                color: Colors.brown,
              ),
            )
          ],
        ),
      ),
    );
  }

创建我们自定义二阶贝塞尔曲线路径MyClipPath()

//背景曲线初试
class MyClipPath extends CustomClipper<Path>{
  @override
  Path getClip(Size size) {
    // TODO: implement getClip
    var path = new Path();
    //起点 从原点开始
    path.lineTo(-20, size.height / 2);
    //p1  锚点
    var point1 = Offset(80,size.height);
    //p2  结束点
    var point2 = Offset(size.width ,size.height);
    //绘制贝塞尔曲线
    path.quadraticBezierTo(point1.dx, point1.dy, point2.dx, point2.dy);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    // TODO: implement shouldReclip
    return true;
  }
}

效果：

二阶贝塞尔曲线 个人理解p1点有点类似ps中钢笔工具的锚点
路径移动到起始点，控制终点位置 设置锚点位置

参考网址：
Flutter绘制进阶——贝塞尔曲线
Flutter 之贝塞尔曲线（一）
三阶贝塞尔曲线模拟器