使用贝塞尔曲线绘制可变宽度的路径

Question

给定两个点和一个控制点，可以轻松地在两个点之间绘制贝塞尔曲线。我想使用贝塞尔曲线来绘制一条宽度不断变化的路径，方法是将“权重”分配给确定曲线宽度的点。例如，如果我给曲线的第一点权重= 0，给曲线的第二点权重= 1，则应生成类似以下路径的东西（图片中的曲线是三次曲线，但我正在使用二次贝塞尔曲线）：

为此，我需要找到确定形状的“边缘”曲线的控制点，然后填充在两条新曲线之间找到的形状。但是，我不确定如何做到这一点。我想到的一件事是通过简单绘制垂直线段到连接原始控制点和原始端点的线来确定新曲线的起点和终点，但这仍然不能解决寻找新控件的问题新曲线的点。

Answer 1

我将使用三次方而不是二次方。

是的，您是按权重垂直偏移控制点，而不是BEZIER的控制点，而是插值三次方（或catmull-rom）的控制点，然后将其转换为Bezier控制点。查看相关的质量检查：

• How can i produce multi point linear interpolation?
• How to create bezier curves for an arc with different start and end tangent slopes
• draw outline for some connected lines

不过，使用着色器和（垂直）距离直接渲染曲线会更加容易。参见：

• Draw Quadratic Curve on GPU

这样，您就不需要补偿任何东西，只需插入曲线的宽度...

Answer 2

也许这会有所帮助，还有一个关于变量偏移的例子

https://microbians.com/mathcode