在 Custom Painter Flutter 的路径中加入终点和起点时如何避免 Sharp edge/angle？

Question

在使用 Custom Painter 绘制形状时连接最后一个点和第一个点时出现删除尖锐 edge/angle 的问题。

我正在尝试使用 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);

在 Custom Painter Flutter 的路径中加入终点和起点时如何避免 Sharp edge/angle？

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

bezier

flutter