【问题标题】:How can I draw only a subsection of a Bezier curve in WPF?如何在 WPF 中仅绘制贝塞尔曲线的一部分?
【发布时间】:2017-04-10 14:20:22
【问题描述】:

我有一个要求画小的弯曲箭头。我可以计算出箭头的角度 OK,我打算使用 Beziers 来定义路径段。但是,我真正想做的是计算开始和结束之间的一条不可见的弯曲路径,并且只在开始之后和结束之前的一小段距离内描边路径。

这将在起点和终点的任何对象之间留下适当的间隙。有什么建议吗?

【问题讨论】:

  • 中间有透明色的渐变怎么样?
  • @DrRiisTab 这可能会使定位箭头变得棘手。
  • @DrRiisTab:感谢您的建议。这是可能的,因为您可以调用一种方法来计算沿线点 x% 的切线和 x、y、坐标。我只是认为调整 Pen 以将部分描到该点是非常繁琐的。

标签: c# wpf bezier


【解决方案1】:

箭头通常没有非常混乱的曲线,它们具有非常平滑的曲线,末端附近的 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=near-the-end 段),然后绘制箭头回到原来的终点。

【讨论】:

  • 有一个 C# 版本而不是 JavaScript 版本?我正在使用 WPF。
  • 我没有,但我完全希望您能够阅读如此简单的代码 =)(如果您熟悉 WPF-i-fy 这应该不会有太多工作使用 WPF API,jsbin 中唯一的特殊调用是对画布的绘制曲线和一些圆圈,这不应该太混乱)
  • 我确实用一些点更新了 jsbin 以充当“真实间隔”锚点,因此您可以使用 probablyT 的计算并找到最适合您需要的东西。我实际上解释了这个错误,因为它比纯立方根多一点工作,然后我们再次编程,而不是数学,所以就编程而言,“如果你 90%,使用 80% 立方根”就可以解决问题,即使没有解释原因的数学基础 >_>;
  • 我会在某个时候尝试一下并回复您。谢谢。
【解决方案2】:

我想我可能已经找到了一个可能的解决方案,经过大量的挠头。假设您有一条贝塞尔曲线 A-B-C-D,其中 B 和 C 是控制点,A 和 D 是起点和终点。你想从 A 和 D 开始和结束一个对峙距离 X:

  1. 生成初始贝塞尔曲线

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

  3. 相加得到贝塞尔曲线的长度,除以X得到从头到尾的小数长度F

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

  5. 将起点/终点加到切向量中得到对应的控制点

  6. 使用这些点生成一个新的贝塞尔曲线,它应该与原来的起点和终点相差 X

发现这种方法有什么问题吗?

【讨论】:

  • 有趣。有任何实现的代码和/或图像来显示这一点吗?
  • 是的,很抱歉回复晚了。我还没有任何代码,但我会在有时间的时候发布一些代码。
  • 我可能很快就可以开始实施这种方法了!我没有忘记。我会在编写代码时发布代码
猜你喜欢
  • 2015-11-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-03-31
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多