Question

我正在尝试在此图像中绘制形状 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

为此，请指导我。

预先感谢

Answer 1

尝试一下，让我知道它是否适合您。

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

[root@0492119f42dc images]# pwd
/etc/tuleap/themes/common/images
[root@0492119f42dc images]# ll
total 16
-rw-rw-r-- 1 codendiadm codendiadm 1150 Nov  8 12:29 favicon.ico
-rw-r--r-- 1 codendiadm codendiadm 5587 Nov  8 11:34 organization_logo.png
-rw-r--r-- 1 codendiadm codendiadm  872 Nov  8 11:35 organization_logo_small.png

您的自定义裁剪器如下所示

 @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,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

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();

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

此外，您可以将clipBehavior: Clip.antiAliasWithSaveLayer添加到ClipPath中以进行平滑绘制

绘制自定义形状颤振

2 个答案: