如何獲得下圖中給出的邊界半徑。 ＃撲

Question

在此處輸入圖片說明

我想獲得下圖所示的倒轉邊界半徑。

Answer 1

用 ClipRRect 小部件包圍您的圖像小部件。 指定所需的邊界半徑。 由於我們需要圓形邊框，我們使用 BorderRadius.circular() 指定圓形邊框半徑。 BorderRadius.circular() 將雙精度值作為參數。 這個雙精度值是矩形所有四個角的邊界半徑。 以下是顯示帶有圓角的圖像的代碼片段。

示例：ClipRRect( borderRadius: BorderRadius.circular(20), child: Image( image: NetworkImage( 'https://www.img/hummingbird.png'), ), ),

Answer 2

嘗試參考此代碼，參考：

class Clipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var _height = size.height;
    var _width = size.width;

    var controlPoint1 = Offset(40, _height / 3.1);
    var controlPoint2 = Offset(_width - 40, 0);
    var endPoint = Offset(_width, _height / 2);

    var path = Path()
      ..cubicTo(controlPoint1.dx, controlPoint1.dy, controlPoint2.dx,
          controlPoint2.dy, endPoint.dx, endPoint.dy)
      ..lineTo(_width, _height)
      ..lineTo(0, _height)
      ..close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}