如何获得下图中给出的边界半径。 ＃扑

Posted 2023-03-28

【中文标题】如何获得下图中给出的边界半径。 ＃扑

【英文标题】：How to get the Border-Radius given in the following image . #flutter

【发布时间】：2021-12-26 14:31:14

【问题描述】：

enter image description here

我想得到下图所示的倒置边框半径。

【参考方案1】：

尝试参考这段代码，reference:

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;

【讨论】：

感谢您的代码，这行得通。

很高兴听到这个消息，请标记为答案~

【参考方案2】：

用 ClipRRect 小部件围绕您的 Image 小部件。 指定所需的边界半径。由于我们需要圆形边框，我们使用 BorderRadius.circular() 指定圆形边框半径。 BorderRadius.circular() 将双精度值作为参数。这个双精度值是矩形所有四个角的边界半径。 以下是显示圆角图像的代码 sn-p。

示例： ClipRRect( 边界半径：边界半径.圆形（20）， 孩子：图像（ 图片：网络图片（ 'https://www.img/hummingbird.png'), ), ),

【讨论】：

请正确检查图像，一端的边界半径是外翻的，另一端的边界半径是反向的。