How to avoid Sharp edge/angle when join end point with start point in path for Custom Painter Flutter?

Question

Getting issue to remove sharp edge/angle while connecting last point with first one while drawing shape using Custom Painter.

I am trying to create custom shape using CustomPainter. I have created Path using some points. And for drawing path, I am using Bezier. My Code is as per below. But when last point connects to first one, it creates sharp angle. How I can avoid it?

// preparing path points for shape.
for (int i = 0; i < steps; i++) {
  borderPoints.add(BorderPoint(xPoint, yPoint, radian, randomRadius, MovementDirection.INWARD));
}
borderPoints.add(borderPoints[0]);

// here, we are creating path for our shape.
jellyPath.moveTo(borderPoints[0].dx, borderPoints[0].dy);
int i = 1;

for (i = 1; i < borderPoints.length - 2; i++) {
  var xc = (borderPoints[i].dx + borderPoints[i + 1].dx) / 2;
  var yc = (borderPoints[i].dy + borderPoints[i + 1].dy) / 2;
  jellyPath.quadraticBezierTo(
      borderPoints[i].dx, borderPoints[i].dy, xc, yc);
}
jellyPath.quadraticBezierTo(borderPoints[i].dx, borderPoints[i].dy, borderPoints[i + 1].dx, borderPoints[i + 1].dy);

Expecting smooth curve while joining end part in Path.

user_2252830 · Answer

try this simple drawing code (you have to modify it to work with your BorderPoint - whatever it is):

var p = Paint()
  ..style = PaintingStyle.stroke
  ..color = Colors.deepPurple
  ..strokeWidth = 2;

var points = [
  Offset(100, 100),
  Offset(200, 150),
  Offset(250, 300),
  Offset(150, 350),
  Offset(150, 250),
  Offset(50, 200),
];

// you can remove "controlPaint" - it is for testing only
var controlPaint = Paint()..color = Color(0x880000ff);
var path = Path();
var mid = (points[0] + points[1]) / 2;
path.moveTo(mid.dx, mid.dy);
for (var i = 0; i < points.length; i++) {
  var p1 = points[(i + 1) % points.length];
  var p2 = points[(i + 2) % points.length];
  mid = (p1 + p2) / 2;
  path.quadraticBezierTo(p1.dx, p1.dy, mid.dx, mid.dy);

  // draw control points and lines: switch it on by pressing 'p' key
  // when executing "flutter run" command
  // note it is for testing purposes only
  if (debugPaintSizeEnabled)
    canvas
      ..drawCircle(mid, 3, controlPaint)
      ..drawCircle(points[i], 5, controlPaint)
      ..drawLine(points[i], p1, controlPaint);
}
canvas.drawPath(path, p);

How to avoid Sharp edge/angle when join end point with start point in path for Custom Painter Flutter?

1 Answers