繪制自定義形狀 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以實現平滑繪圖