1

最近我正在构建一个 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">

我不得不提的一点是，控制点可以动态变化，所以当我改变它时，我有这样的图：

一些注意事项

我从这个链接下载了图像。

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

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

在此处输入图像描述

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

4

1 回答 1

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
于 2015-07-14T14:09:53.300 回答