Graph Connected Line

[aKaushik941]

How I can change the graph connected line to a dotted line?

[nabil6391]

class DashedLinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    double dashWidth = 9, dashSpace = 5, startX = 0;
    final paint = Paint()
      ..color = Colors.grey
      ..strokeWidth = 1;
    while (startX < size.width) {
      canvas.drawLine(Offset(startX, 0), Offset(startX + dashWidth, 0), paint);
      startX += dashWidth + dashSpace;
    }
  }

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

[a1573595]

In some cases, we want to be able to support both solid and dashed lines.

[a1573595]

thanks for help.

[kadirfayzi]

thanks for help.

Hello, how did you implement that on graphview ? can you share an example code please. Thanks

[a1573595]

thanks for help.

Hello, how did you implement that on graphview ? can you share an example code please. Thanks

Just extends EdgeRenderer class and use canvas.drawLine like nabil6391.

[kadirfayzi]

thanks for help.

Hello, how did you implement that on graphview ? can you share an example code please. Thanks

Just extends EdgeRenderer class and use canvas.drawLine like nabil6391.

Can you share your code please ?

[nabil6391]

Then, create a helper function to draw the dotted line:

dart Copy code void _drawDottedLine(Canvas canvas, Offset start, Offset end, Paint paint) { Paint dottedPaint = Paint() ..color = paint.color ..strokeWidth = paint.strokeWidth ..style = PaintingStyle.stroke;

double distance = (end - start).distance; double dashLength = 4; double gapLength = 4; double totalLength = dashLength + gapLength;

final Path path = ui.Path()..moveTo(start.dx, start.dy); for (double i = 0; i < distance; i += totalLength) { path.lineTo(start.dx + (i + dashLength) (end.dx - start.dx) / distance, start.dy + (i + dashLength) (end.dy - start.dy) / distance); path.moveTo(start.dx + (i + totalLength) (end.dx - start.dx) / distance, start.dy + (i + totalLength) (end.dy - start.dy) / distance); }

canvas.drawPath(path, dottedPaint); } Finally, replace the canvas.drawLine call in the render method with the _drawDottedLine helper function:

dart Copy code _drawDottedLine(canvas, Offset(clippedLine[0], clippedLine[1]), Offset(triangleCentroid[0], triangleCentroid[1]), edge.paint ?? paint); Now, the arrow lines will be drawn as dotted lines. You can customize the dashLength and gapLength variables in the _drawDottedLine function to achieve different patterns of dashes and gaps.