使用 Path Flutter 绘画答案

【问题标题】：Painting with Path Flutter使用 Path Flutter 绘画
【发布时间】：2021-10-10 00:37:16
【问题描述】：

我有图像中显示的地图自定义注释。

我怎样才能使边缘从底部变圆，与在顶部完成的方法相同。

我的代码

Path getClip(Size size) {
double width = size.width;
double height = size.height;

final path = Path();
path.lineTo(0.0, size.height - 30);

path.quadraticBezierTo(0.0, size.height - 25, 5.0, size.height - 25);
path.lineTo(size.width - 5.0, size.height - 25);

path.lineTo((width / 2) - 15, height - 25);
path.lineTo((width / 2), height);
path.lineTo((width / 2) + 15, height - 25);
path.lineTo(width - 5, height - 25);

path.quadraticBezierTo(
    size.width, size.height - 25, size.width, size.height - 30);

path.lineTo(size.width, 5.0);
path.quadraticBezierTo(size.width, 0.0, size.width - 5.0, 0.0);
path.lineTo(5.0, 0.0);
path.quadraticBezierTo(0.0, 0.0, 0.0, 5.0);
return path;

}

【问题讨论】：

标签： flutter flutter-layout flutter-canvas

【解决方案1】：

上次，我是用自定义油漆画这个形状的，请看一下，它可能对你有帮助

 //Create a custom painter class

class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint_0 = new Paint()
      ..color = Colors.white
      ..style = PaintingStyle.fill
      ..strokeWidth = 1;

    Path path_0 = Path();
    path_0.moveTo(size.width * 0.1250000, size.height * 0.7500000);
    path_0.quadraticBezierTo(size.width * 0.0630125, size.height * 0.7507750,
        size.width * 0.0625000, size.height * 0.6250000);
    path_0.quadraticBezierTo(size.width * 0.0625000, size.height * 0.3437500,
        size.width * 0.0625000, size.height * 0.2500000);
    path_0.quadraticBezierTo(size.width * 0.0629875, size.height * 0.1260000,
        size.width * 0.1250000, size.height * 0.1250000);
    path_0.quadraticBezierTo(size.width * 0.6875000, size.height * 0.1250000,
        size.width * 0.8750000, size.height * 0.1250000);
    path_0.quadraticBezierTo(size.width * 0.9370375, size.height * 0.1259250,
        size.width * 0.9375000, size.height * 0.2500000);
    path_0.lineTo(size.width * 0.9375000, size.height * 0.6250000);
    path_0.quadraticBezierTo(size.width * 0.9370250, size.height * 0.7490750,
        size.width * 0.8750000, size.height * 0.7500000);
    path_0.quadraticBezierTo(size.width * 0.8125000, size.height * 0.7500000,
        size.width * 0.6250000, size.height * 0.7500000);
    path_0.quadraticBezierTo(size.width * 0.5259125, size.height * 0.9124000,
        size.width * 0.5000000, size.height * 0.9462750);
    path_0.quadraticBezierTo(size.width * 0.4749750, size.height * 0.9035750,
        size.width * 0.3750000, size.height * 0.7500000);
    path_0.quadraticBezierTo(size.width * 0.3125000, size.height * 0.7500000,
        size.width * 0.1250000, size.height * 0.7500000);
    path_0.close();

    canvas.drawPath(path_0, paint_0);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

这样使用

CustomPaint(
      size: Size(width, 400),
      painter: MyCustomPainter(),
    )

结果：

【讨论】：