如何在Flutter画布中链接Bezier曲线？

Question

我正在尝试使用Flutter CustomPainter创建曲线。但是，当我尝试链接它们时，生成的曲线有些令人讨厌的边缘。如何获得平滑的曲线？

结果曲线

令人讨厌的边缘

canvas.translate(0, size.height / 2);
final Paint wavePainter = Paint()
  ..color = Color(0xFF1f58a1)
  ..strokeWidth = 8
  ..style = PaintingStyle.stroke;
double high = size.height;
double offset = size.width / 13;
Path path = Path()
  ..moveTo(0, 0)
  ..quadraticBezierTo(offset, -high / 3, 2 * offset, 0)
  ..quadraticBezierTo(4 * offset, high / 2, 5 * offset, 0)
  ..quadraticBezierTo(offset * 7, -high, offset * 8, 2)
  ..quadraticBezierTo(offset * 9, high / 2, offset * 11, 0)
  ..quadraticBezierTo(offset * 12, -high / 3, offset * 13, 0);
canvas.drawPath(path, wavePainter);

Answer 1

我遇到了同样的问题。现在，这不是一个很好的解决方案，我对那些“讨厌的边缘”周围的曲线进行了平滑处理。实际上，每个点都是该点之前和之后的平均值。我不再使用 quadraticBezierTo ，而是使用Bezier曲线的方程式绘制它（使用多个点）。

它仍然远非完美，它只是根据您的要求而定的临时解决方案！

话虽这么说，我认为解决方案（数学上更复杂，但方式更优雅）将是使用N阶贝塞尔曲线。 N是图形上的点数。例如，您可以检查以下内容： https://www.jasondavies.com/animated-bezier/

关于数学，我现在正在检查：

• https://pomax.github.io/bezierinfo/
• https://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm#B%C3%A9zier_curve

如果您现在找到了更好的解决方案，那我就不禁烦恼了！