带内三角的二次贝塞尔曲线

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 link 下载图片。

这是绘制外三角二次曲线的常规方法"Imagine a triangle with P0,P1,P2 points"。不知道有没有办法计算曲线上的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

带内三角的二次贝塞尔曲线

Quadratic Bezier Curve with inner Triangle

javascript

math

svg

quadratic-curve