绘制自定义形状 Flutter答案

【问题标题】：Draw Custom shape Flutter绘制自定义形状 Flutter
【发布时间】：2019-11-08 10:00:07
【问题描述】：

我正在尝试在这张图片中绘制形状 The shape that I want to draw 把我的代码不能得到相同的结果：

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;


}

我得到了这个结果My Result

请指导我。

提前致谢

【问题讨论】：

标签： flutter dart

【解决方案1】：

我设法使用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 以进行流畅的绘图

【讨论】：

【解决方案2】：

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

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

 @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;
}

【讨论】：