How to cut a line at an angle in flutter?-CodePudding

I draw a line on an element by inheriting from the CustomPainter class. But I ran into a problem that it is not possible to cut the line at an angle as shown in the screenshot below. Tell me, how can I cut off the line that I draw and make it at the same angle as shown in the screenshot below?

class StationPointPainter extends CustomPainter {
  StationPointPainter({});

  @override
  void paint(Canvas canvas, Size size) {
    final strokeWidthThin = size.width * 0.07;
    Paint paintMain = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidthThin
      ..color = constants.Colors.purpleMain;

    Paint paintPurpleThin = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidthThin
      ..color = constants.Colors.purpleMain;

    Paint paintPurpleBold = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = size.width * 0.16
      // ..color = constants.Colors.purpleMain;
      ..shader = ui.Gradient.linear(
          Offset(size.width * 0.54, size.height * 1.03),
          Offset(
            size.width / 2   size.width * 0.3,
            size.height * 0.45,
          ),
          [
            constants.Colors.red,
            constants.Colors.green
          ],
          [
            0.3,
            0.6,
          ]);

    Paint paintGreen = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidthThin
      ..color = constants.Colors.purpleMainDark.withOpacity(isClosed ? 0.5 : 1);

    Paint paintTransparent = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = size.width * 0.04
      ..color = constants.Colors.purpleMainDark;

    final pathMain = Path()
      ..moveTo(size.width / 2, size.height * 1.05)
      ..lineTo(size.width / 2 - size.width * 0.3, size.height * 0.4)
      ..arcToPoint(
        Offset(size.width - size.width * 0.2, size.height * 0.8),
        clockwise: true,
        radius: const Radius.circular(0.9),
      )
      ..lineTo(size.width / 2   size.width * 0.3, size.height * 0.4);

    final pathGreen = Path()
      ..moveTo(size.width / 2   size.width * 0.3, size.height * 0.4)
      ..lineTo(size.width / 2, size.height)
      ..arcToPoint(
        Offset(size.width - size.width * 0.22, size.height * 0.26),
        clockwise: true,
        radius: const Radius.circular(0.9),
      );

    final pathPurpleThin = Path()
      ..moveTo(size.width / 2, size.height * 1.05)
      ..lineTo(size.width / 2 - size.width * 0.3, size.height * 0.4);

    final pathPurpleBold = Path()
      ..moveTo(size.width * 0.54, size.height * 1.03)
      ..lineTo(size.width / 2   size.width * 0.3, size.height * 0.45);

    final pathTransparent = Path()
      ..moveTo(size.width * 0.44, size.height)
      ..lineTo(size.width * 0.58, size.height * 0.68);

    pathMain.close();
    pathGreen.close();
    pathPurpleThin.close();
    pathTransparent.close();

    if (!isClosed) {
      canvas.drawPath(pathMain, paintMain);
      canvas.drawPath(pathGreen, paintGreen);
      canvas.drawPath(pathPurpleThin, paintPurpleThin);
      canvas.drawPath(pathTransparent, paintTransparent);
    }

    canvas.drawPath(pathPurpleBold, paintPurpleBold);
  }

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

body

ClipPath(
            clipper: StationPointClipper(),
            child: Container(
              width: width,
              height: height,
              color: constants.Colors.purpleMainDark,
              child: CustomPaint(
                painter: StationPointPainter(),
              ),
            ),
          ),

no I have

need to get

CodePudding user response：

You can draw a path to draw the perimeter like the following:

class StationPointPainter extends CustomPainter {
  
  @override
  void paint(Canvas canvas, Size size) {
    Paint paintMain = Paint()
      ..style = PaintingStyle.fill
      ..strokeJoin = StrokeJoin.round
      ..color = Colors.greenAccent;

    final path = Path()
      ..moveTo(size.width / 3, size.height)
      ..lineTo((size.width / 3)   5, size.height)
      ..lineTo((size.width / 3) * 1.5, size.height - (size.height / 3))
      ..lineTo(((size.width / 3) * 1.5) - 5, size.height - (size.height / 3))
      ..close();

    canvas.drawPath(path, paintMain);
  }

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

Obviously, you have to parametrize the path in accordion with your UI but with this approach is easy.