Question

我正在尝试创建这个 image和自定义剪辑路径。

这就是我得到的 implementation，我应该使用圆弧还是二次贝塞尔曲线来获得此曲率？

我的自定义剪辑路径：

class EventClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    double radius = 30;

    Path path = Path()
      ..moveTo(size.width / 2, 0)
      ..lineTo(size.width - radius, 0)
      ..arcToPoint(Offset(size.width, radius),
          radius: Radius.elliptical(40, 20))
      ..lineTo(size.width, size.height - radius)
      ..arcToPoint(Offset(size.width - radius, size.height),
          radius: Radius.circular(radius))
      ..lineTo(size.width / 3, size.height)
      ..quadraticBezierTo(
          size.width / 4, size.height, 40, (size.height / 2) - 20)
      ..quadraticBezierTo(40, (size.height / 2) - 20, size.width / 2, 0)
      ..close();

    return path;
  }

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

Answer 1

与您的目标不同，但是尝试一下。

Path path = Path()
  ..moveTo(size.width / 1.5, 0)
  ..lineTo(size.width - radius, 0)
  ..arcToPoint(Offset(size.width, radius), radius: Radius.circular(radius))
  ..lineTo(size.width, size.height - radius)
  ..arcToPoint(Offset(size.width - radius, size.height), radius: Radius.circular(radius))
  ..lineTo(size.width / 3, size.height)
  ..quadraticBezierTo(size.width / 4, size.height, 40, (size.height / 2))
  ..quadraticBezierTo(40, (size.height / 2) - 30, size.width / 2, 0)
  ..close();

颤振-剪切路径曲线非常清晰

1 个答案: