canvas - 如何在 Flutter Canvas 中链接贝塞尔曲线？

问题描述

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

标签： canvasdartflutter

我有同样的问题。目前，这不是一个优雅的解决方案，我在那些“恼人的边缘”周围平滑了曲线。在实践中，每个点都是它之前和之后的点的平均值。我停止使用quadraticBezierTo并使用贝塞尔曲线的方程来绘制它（使用多个点）。

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

话虽如此，我认为解决方案（数学上更复杂但更优雅）是使用 N 阶贝塞尔曲线。N 是图表上的点数。对于结果的一个例子，你可以检查这个： https ://www.jasondavies.com/animated-bezier/

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

如果您现在找到更好的解决方案，我会全力以赴！

canvas - 如何在 Flutter Canvas 中链接贝塞尔曲线？

问题描述

解决方案

推荐阅读