绘制自定义形状 Flutter

Question

我正在尝试在此图像中绘制形状我想要绘制的形状放置我的代码无法获得相同的结果：

CustomShapeClipper extends CustomClipper<Path> {
@override

Path getClip(Size size) {

final Path path = Path()

..moveTo(0, size.height * 0.6)

..quadraticBezierTo(

size.width * 0.7 , size.height - (size.height * 0.1) ,

size.width, size.height * 0.8

)

..lineTo(size.width, 0)

..lineTo(0, 0)

..close();


return path;

}


@override

bool shouldReclip(CustomClipper oldClipper) => true;


}

我得到这个结果我的结果

请指导我。

提前致谢

Answer 1

试试这个，让我知道它是否适合你。

在您的小部件正文中，您可以有一个类似于此的构建方法

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          ClipPath(
            clipper: BottomEndClipper(),
            child: Container(
              height: MediaQuery.of(context).size.height * .5,
              decoration: BoxDecoration(
               //Your gradient or own color 
                color: Colors.purple,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

你的自定义剪裁器看起来像这样

class BottomEndClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0, size.height - 80);
    path.lineTo(size.width * .7, size.height - 10);
    path.quadraticBezierTo(
        size.width * .8, size.height, size.width * .95, size.height * .90);

    path.lineTo(size.width, size.height*.87);
    path.lineTo(size.width, 0);


    path.close();
    return path;
  }
  //Should return false if you don't wish to redraw every time
  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

Answer 2

我设法使用cubicTo而不是quadraticBezierTo绘制了类似的东西。 您需要的一个简单示例：

final Path path = Path()
      ..moveTo(0, size.height * 0.6)
      ..lineTo(size.width * 0.7 - (size.width * 0.05),
          size.height - 2 * (size.height * 0.1))
      ..cubicTo(
          size.width * 0.7 - (size.width * 0.01),
          size.height - 1.88 * (size.height * 0.1),
          size.width * 0.7 + (size.width * 0.01),
          size.height - 1.88 *  (size.height * 0.1),
          size.width * 0.7 + (size.width * 0.05),
          size.height - 2 * (size.height * 0.1))
      ..lineTo(size.width, size.height * 0.7)
      ..lineTo(size.width, 0)
      ..lineTo(0, 0)
      ..close();

我知道有很多数字，但是您可以提取一些点作为单独的变量以提高可读性。 实际上，我们不是绘制二次贝塞尔曲线，而是绘制 2 条线和它们之间的曲线。

您还可以将clipBehavior: Clip.antiAliasWithSaveLayer添加到您的ClipPath以实现平滑绘图