如何在WPF中仅绘制贝塞尔曲线的子部分？

Question

我需要绘制小弯曲箭头。我可以计算出箭头的角度OK，我将使用Beziers来定义路径段。但是，我真正想做的是计算开始和结束之间不可见的弯曲路径，并且仅在开始之后和结束之前从一小段距离描绘路径。

这会在起点和终点的任何物体之间留下合适的间隙。有什么建议吗？

Answer 1

我想我可能已经找到了一个可能的解决方案，经过大量的努力。假设您有Bezier曲线A-B-C-D，其中B＆amp; C是控制点，A＆amp; D起点和终点。你想从A和D开始和结束一个间隔距离X：

1. 生成初始贝塞尔

2. 调用 GetFlattenedPathGeometry 将其转换为一系列小段

3. 总结得到Bezier的长度并划分为X以从开始和结束得到分数长度F

4. 在原始Bezier上调用 PathGeometry.GetPointAtFractionLength ，传入F和1-F。这将为缩短的贝塞尔曲线的每一端产生一个起点/终点和切线向量

5. 将起点/终点添加到切线矢量以获取相应的控制点

6. 使用这些点生成一个新的Bezier，它应该与原始的起点和终点相隔X

看到这种方法的任何问题？

Answer 2

箭头通常没有疯狂混乱的曲线，它们具有相当平滑的曲线，末端附近的t值表现为纯立方体（因为贝塞尔函数由（1-t）³主导）开始坐标，以及结束坐标处的t³），所以在终点附近你可以“猜测”你需要插入的“t”值，以便通过使用立方根来获得一个接近需要的坐标：

// let's say we want "10% away from the end"
desiredDistance = 0.9;

// then the guestimate for the "t" value is simply the cube root of 0.9
probablyT = Math.pow(desiredDistance, 1/3);

// and the point we want to cut at is at that "t" value
cutPoint = get(probablyT, pts);

// and we can split up the curve into two segments at that "t" value
curves = split(probablyT, pts);

// and then keep the segment we need for the arrow
arrowcurve = curves[0];

请参阅http://jsbin.com/dovodibaze/edit?js,output，了解接近终点附近距离的近似程度（以及这种情况如何仅在您猜测的终点附近才有效）

使用probablyT值可以拆分原始曲线，绘制从该分割得到的“第一条”曲线（覆盖原始t = 0到t =接近结束的区段），然后绘制你的箭头在原点终点。