c# - 如何平滑路径图的WPF线段

Question

下面是Android代码。

path.moveTo(xx, yy);
for (...) {
    path.lineTo(xx, yy);
}
canvas.drawPath(this.path, paint);

为了去除尖角，我正在使用

final CornerPathEffect cornerPathEffect = new CornerPathEffect(50);
paint.setPathEffect(cornerPathEffect);

谈到 WPF 时，我使用以下代码。

PathFigure pathFigure = new PathFigure();
pathFigure.StartPoint = new Point(xx, yy);
for (...) {
    LineSegment lineSegment = new LineSegment(new Point(xx, yy), true);
    lineSegment.IsSmoothJoin = true;
    pathFigure.Segments.Add(lineSegment);
}
PathGeometry pathGeometry = new PathGeometry(new PathFigure[] { pathFigure });
drawingContext.DrawGeometry(null, new Pen(Brushes.White, 3), pathGeometry);

我得到了以下效果。

请注意，我避免使用 PolyQuadraticBezierSegment 或 PolyBezierSegment。它往往会变得不稳定。这意味着，每当我向折线图添加一个新的输入点时，新添加的点将倾向于改变已经绘制在屏幕上的旧路径。作为最终效果，您可能会观察到整个折线图都在摇晃

请问在 WPF 中，如何平滑线段？虽然我使用了 lineSegment.IsSmoothJoin = true;，但我仍然可以看到尖角。我可以拥有与 Android 的 CornerPathEffect 等效的东西吗？

Answer 1

我知道，僵尸线程帖子。您可能已经解决了这个问题，但这是多年后我的想法...

---

由于平滑取决于直线中的多个点，因此我认为很难找到一种看起来合理而又不会在前缘产生一些不稳定性的平滑算法。您可能可以减少不稳定性的范围，但只能冒着产生非常奇怪的轨迹的风险。

第一个选项是使用限制投影伪影的样条算法。例如，Catmull-Rom 算法使用插值曲线段两侧的两个已知点。您可以在曲线的每一端合成两个额外的点，或者简单地将第一个曲线段绘制为一条直线。这将给出一条直线作为最后一段，加上一条曲线作为倒数第二段，当添加另一个点时，如果有变化的话，它应该变化很小。

或者，您可以通过初始样条计算运行实际数据点以乘以这些点，然后再次通过样条算法运行这些点。您仍然需要更新最近的 2m 点(其中 m 是第一遍的乘数)，否则输出看起来会失真。

关于我能想到的唯一其他选择是尝试根据您的先前数据预测 future 的几个点，即使输入相当规律，这也可能很困难。我用它来合成曲线末端的 Bezier 控制点 - 我正在计算所有点的 CP，需要一些东西用于端点 - 并且有一些有趣的时间试图阻止最终曲线段看起来可怕变形.

哦，还有一个...不要绘制最终曲线段。如果您在 P_n-1 处终止曲线，则曲线应保持稳定。如果必须显示最后一段，请以不同的样式绘制它。由于 C-R 样条仅需要来自插值的 +/- 2 个已知点，因此段 P_n-2-P_n-1 应该足够稳定。

如果您没有 C-R 算法的代码，您基本上可以使用合成贝塞尔曲线控制点做同样的事情。与其尝试描述该过程，不如查看 this blog post这给出了一个相当好的过程分解。 This article附有可能有用的代码。