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

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链接下载了图片。

这是用外三角形绘制二次曲线的常规方法“想象一个带有P0，P1，P2点的三角形”。不知道有没有办法计算曲线上的B点？

我的目标是绘制带有内三角形的二次曲线，P1 总是在这样的曲线上：

有没有办法画出这种二次曲线或者计算第一张图上的B点？

Answer 1

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

B(t) = P0 * (1-t)^2 + 2 * P1 * t * (1-t) + P2 * t^2

几何细分方法：

让我们Q0以t/(1-t)的比例划分P0-P1段

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

让我们 Q1 以 (1-t)/t 的比例划分 P1-P2 段

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

B以t/(1-t)比例划分Q0-Q1段

|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