具有内三角的二次贝塞尔曲线

Question

最近我正在构建一个JavaScript模块来添加便利函数来绘制二次贝塞尔曲线。此函数具有源点，目标点和控制点，并将创建svg path，如下所示：

<path id="active" d="M"+sourcePoint+" Q "+controlPoint+" "+ targetPoint+" " fill="orange" 
fill-opacity="0.8" stroke="steelblue" stroke-width="2px" cursor="move">

我必须提到的一点是，控制点可能会动态变化，所以当我改变它时，我想像这样：

我从this链接下载了图片。

这是用外三角绘制二次曲线的常规方法＆＃34;想象一个带有P0，P1，P2点的三角形＆＃34;。我不知道是否有办法计算B点曲线？

我的目标是绘制内部三角形的二次曲线，P1总是在曲线上，如下所示：

有没有办法绘制这种二次曲线或计算第一张图片上的B点？

Answer 1

在二次贝塞尔曲线上找到所需值t处的点B坐标的公式（将公式应用于每个坐标X和Y）

B （t）= P0 *（1-t）^ 2 + 2 * P1 * t *（1-t） + P2 * t ^ 2

几何细分方法：

让Q0将P0-P1段除以t /（1-t）比例

|P0Q0|/|Q0P1| = t/(1-t)

让Q1将P1-P2段除以（1-t）/ t比例

|P1Q1|/|Q1P2| = (1-t)/t

B将Q0-Q1段除以t /（1-t）比例

|Q0B|/|BQ1| = t/(1-t)

如果要通过点P0（开始），C（中间某处）和P2（结束）构建曲线，请为点C选择t的某个值，将其应用于给定的公式，并找到未知的控制点P1。 例如，如果t = 1/2

C(1/2)=P0/4+2P1/4+P2/4
P1 = (4C - P0 - P2) / 2