wpf - 遵循弯曲路径的多段线

Question

我编写了一个图表编辑器，并绘制了一些曲线链接，这些链接非常适用于二次贝塞尔曲线段(见图):

我搜索绘制“尖峰”弯曲链接的最佳方法(如果可能的话)。大致像这样(蓝色):

我不知道从哪里开始，我读了一些关于画笔或“如何绘制弯曲的文本”的文章，但它似乎不是我需要的......

感谢您的帮助或建议! :)

只是为了完成一些评论，贝塞尔曲线是用 quadrametricBezier 类从 3 个点制作的。谢谢大家!

Answer 1

我认为 WPF 中没有内置的方法可以做到这一点。您必须自己计算坐标并自己绘制线条(例如使用 DrawingVisual)。

要计算坐标，您必须:

第 1 步沿贝塞尔曲线采样点。

具有 4 个控制点的贝塞尔曲线具有以下公式:

curve(t) = t^3 p1 + 3 t^2 (1-t) p2 + 3 t (1-t)^2 p3 + (1-t)^3 p4

d/dt curve(t) = 3 p3 - 3 p4 + 6 p2 t - 12 p3 t + 6 p4 t + 3 p1 t^2 - 9 p2 t^2 + 9 p3 t^2 - 3 p4 t^2

使用这些公式，您可以计算曲线上的点及其切线方向。将切线方向旋转 90°(即交换 X/Y 并更改 Y 的符号)给出法线方向。

但是，这些点不是等距的:

因此，如果您直接使用这些点，您会得到一条曲线，其中一些“尖峰”比其他“尖峰”短:

第二步:沿曲线获取等距点

您现在有一个沿曲线的点列表。您可以计算每个点与下一个点之间的欧氏距离。将所有这些距离相加得到曲线的总长度。

假设您想要(大约)10 像素宽的尖峰。然后你需要 n=round(TotalLength/10) 点数。这些点位于 s(i) = TotalLength/n * i。

所以如果你想，例如找到第 3 个等距点的 t 的值，您将计算 s(3) = TotalLength/n * 3。然后，您将遍历采样点集，边走边对距离求和，直到到达沿曲线的总距离 > s(3) 的点。现在您知道了您要查找的点之前和之后的点，您可以使用三的法则来计算两者之间的 t。

现在您有一组沿曲线等距的点:

第 3 步:绘制尖峰

这是最简单的部分:在每个等距点处，计算法线(使用上面的导数公式)。将该法线除以其长度以获得法线单位。然后添加到每个偶数点 +d * UnitNormal 和每个奇数点 -d * UnitNormal，其中 d 是“深度”尖峰，即尖端到曲线的距离。