Как избежать острого края / угла при соединении конечной точки с начальной точкой в ​​пути для Custom Painter Flutter?

Question

Проблема с удалением острого края / угла при соединении последней точки с первой при рисовании фигуры с помощью Custom Painter.

Я пытаюсь создать собственную фигуру с помощью CustomPainter.Я создал путь, используя несколько точек.А для рисования пути я использую Безье.Мой код в соответствии с ниже.Но когда последняя точка соединяется с первой, это создает острый угол.Как мне этого избежать?

// 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);

Ожидается плавная кривая при соединении конечной части в контуре.

Answer 1

попробуйте этот простой код для рисования (вы должны изменить его для работы с BorderPoint - что бы это ни было):

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);