使用剪辑路径创建圆角

Question

通过 clipPath，我能够创建一个设计类似于我在下面发布的照片的小部件。 唯一的问题是得到圆角，如照片中的箭头所示。

下面是我的代码：

class HomePage extends StatelessWidget {
  const HomePage();

  @override
  Widget build(BuildContext context) {
    return ClipPath(
      child: Container(
        color: appAccentColor,
        width: double.infinity,
        child: Text("data"),
      ),
      clipper: ConvexClipPath(),
    );
  }
}

class ConvexClipPath extends CustomClipper<Path> {
  double factor = 55;
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(0, size.height - size.height * (factor / 100));
    path.quadraticBezierTo(size.width / 2, size.height - size.height * ((factor - 10) / 100), size.width, size.height - size.height * (factor / 100));
    path.lineTo(size.width, 0);
    path.close();

    return path;
  }

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

Answer 1

我认为你必须使用path.quadraticBezierTo(x1, y1, x2, y2); 再次添加圆角。 没有更简单的解决方案可以为拐角添加半径。 您可以在此答案中看到一个示例，或者考虑使用专用工具绘制 svg 并将其与路径库的parseSvgPathData(data)一起使用。