最近我正在构建一个 JavaScript 模块来添加方便的函数来绘制二次贝塞尔曲线。该函数有一个源点、一个目标点和一个控制点，并将创建 svg 路径，如下所示:
<path id="active" d="M"+sourcePoint+" Q "+controlPoint+" "+ targetPoint+" " fill="orange"
fill-opacity="0.8" stroke="steelblue" stroke-width="2px" cursor="move">
我必须提到的一点是，控制点可以动态更改，所以当我更改它时，我会得到如下图:
我从this下载了图片链接。
这是绘制带有外三 Angular 形的二次曲线的常规方法“想象一个带有P0，P1，P2点的三 Angular 形”。不知道是否有方法计算曲线上的B点？
我的目标是绘制带有内三 Angular 形的二次曲线，P1 始终位于这样的曲线上:
有没有办法画出这种二次曲线或者计算第一张图上的B点？
最佳答案
在二次贝塞尔曲线上查找所需值 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
关于javascript - 具有内三 Angular 形的二次贝塞尔曲线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31407126/