flutter 学习 贝塞尔曲线

ClipPath 的子元素是一个Container组件，自定义裁剪的对象，对该对象进行切割路径。贝塞尔曲线路径就写在getClip方法里，返回一段路径。

二维贝塞尔曲线是需要控制点和终点，控制点会将直线拉过去，形成一个流畅的弧度，这个弧度就是贝塞尔曲线。

实现代码如下：

import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          ClipPath(
            clipper: BottomClipperTest(),
            child: Container(
              color:Colors.deepPurpleAccent,
              height: 200.0,
            ),
          ),
        ],
      ),
    );
  }
}

class BottomClipper extends CustomClipper<Path> {

  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0,0);
    path.lineTo(0, size.height-60);
    var firstControlPoint =  Offset(size.width/2, size.height);
    var firstEndPpint = Offset(size.width, size.height-60);
    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy, firstEndPpint.dx, firstEndPpint.dy);

    path.lineTo(size.width, size.height-6);
    path.lineTo(size.width, 0);

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

class BottomClipperTest extends CustomClipper<Path> {

  @override
  Path getClip(Size size) {
   
   var path = Path();

   path.lineTo(0, 0);

   path.lineTo(0, size.height-40);
   var firstControlPoint = Offset(size.width/4, size.height);
   var firstEndPoint = Offset(size.width/2.25, size.height-30);

   path.quadraticBezierTo(firstControlPoint.dx,
     firstControlPoint.dy, 
     firstEndPoint.dx, firstEndPoint.dy);

     var secondControlPoint = Offset(size.width/4*3, size.height-90);
     var secindEndPoint = Offset(size.width, size.height-40);

     path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy, secindEndPoint.dx, secindEndPoint.dy);

    path.lineTo(size.width, size.height-40);
    path.lineTo(size.width, 0);

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}