在容器上创建自定义形状的Clippath

Question

我想用这样的自定义裁剪器制作一个容器

我试图做到，但是我就是这样。我试图采取下一步行动。但是我没有找到我想要的形状。

我的快船代码

npm install

Answer 1

如果我正确理解了您的问题：

class JadwalSholatClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();

    path.moveTo(0.0, 0.0);
    path.lineTo(0.0, size.height);
    path.lineTo(size.width * 3 / 4 - 40.0, size.height);
    path.lineTo(size.width * 3 / 4 - 40.0, size.height - 20.0);
    path.cubicTo(size.width * 3 / 4 - 80.0, size.height - 60.0, size.width * 3 / 4, size.height - 60.0, size.width * 3 / 4, size.height - 80.0);
    path.cubicTo(size.width * 3 / 4, size.height - 60.0, size.width * 3 / 4 + 80.0, size.height - 60.0, size.width * 3 / 4 + 40.0, size.height - 20.0);
    path.lineTo(size.width * 3 / 4 + 40.0, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0.0);

    return path;
  }

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

Answer 2

以下是“标记”小部件的示例，它可以帮助您创建所需的视图

class Marker extends CustomPainter{

    Color backgroundColor;
    Color color;
    double fontSize;
    String label;
    bool isBorder;

    Marker({this.backgroundColor = Colors.lightGreen, this.color = Colors.black, this.fontSize = 20, this.label = '', this.isBorder = false});

    @override
    void paint(Canvas canvas, Size size) {
      Paint paint = Paint();
      paint..color = backgroundColor;
      Path path = Path();
      path.moveTo(0, 0);
      path.quadraticBezierTo(size.width /2.5, -size.height, size.width, size.height*0);
      canvas.drawPath(path, paint);

      if(isBorder) {
        Paint paintStroke = Paint();
        paintStroke
          ..color = Colors.green
          ..strokeWidth = 2
          ..style = PaintingStyle.stroke;
        canvas.drawPath(path, paintStroke);
      }
      TextSpan spanMinLimit = new TextSpan(style: new TextStyle(color: color, fontSize: 3*fontSize/4), text: label);
      TextPainter minTp = new TextPainter(text: spanMinLimit, textAlign: TextAlign.left, textDirection: TextDirection.ltr,);
      minTp.layout();
      minTp.paint(canvas, Offset(size.width/2 - spanMinLimit.text.length*fontSize/4, 0*size.height/2 - fontSize/2));
    }

    @override
    bool shouldRepaint(CustomPainter oldDelegate) => true;

  }

称呼

CustomPaint(painter: Marker(), size: size,)