如何在 Flutter Canvas 中链接 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，而是使用贝塞尔曲线的方程来绘制它（使用多个点）。

它还远非完美，充其量只是一个临时解决方案，具体取决于您的要求！

话虽这么说，我认为解决方案（数学上更复杂，但更优雅）是使用 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

如果您现在找到了更好的解决方案，我洗耳恭听！