双曲线

Posted 2021-03-16 pp-pping

代码：

class BottomClipper extends CustomClipper<Path> {

@override

Path getClip(Size size) {//child 元素的size

var path = Path();

path.lineTo(0, 0);//起始点

path.lineTo(0, size.height - 30);//第二个点

var controlPoint = Offset(size.width/4, size.height);//控制点

var endPoint = Offset(size.width/2, size.height - 30);//结束点

path.quadraticBezierTo(controlPoint.dx, controlPoint.dy, endPoint.dx, endPoint.dy);// 画了贝塞尔曲线

 

var controlPoint2 = Offset(size.width / 4 * 3, size.height - 60);//第2个控制点

var endPoint2 = Offset(size.width, size.height - 30);//第二个结束点

path.quadraticBezierTo(controlPoint2.dx, controlPoint2.dy, endPoint2.dx, endPoint2.dy);

 

path.lineTo(size.width, size.height - 30);

path.lineTo(size.width, 0);//第四个点

return path;

}

@override

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

}

 

 

 

总结：

 

//双曲线

 

多个贝塞尔 需要重启 控制点 和 结束点 不可使用上一个贝塞尔的结束点