已知贝塞尔曲线上坐标点，如何求解对应切线？

我有一条贝塞尔曲线和一条与之相交的直线，已获取二者的交点坐标。现在需要求出贝塞尔曲线在这两个交点处的切线。目前已有一个通过参数t（取值范围0<t<1）计算曲线切线的函数，代码如下：

let bezierCurveTangent = function(start: Point, end: Point, controlPoint: Point, t: number): Point {
    let x = 2 * (1 - t) * (controlPoint.x - start.x) + 2 * t * (end.x - controlPoint.x);
    let y = 2 * (1 - t) * (controlPoint.y - start.y) + 2 * t * (end.y - controlPoint.y);
    return { x, y };
}

核心问题 #

• 如何直接根据坐标点而非参数t来求解切线？
• 能否通过整理贝塞尔曲线上点的计算公式得到t的值，再代入上述切线函数？
• 是否存在比在参数t和坐标点间反复转换更优的实现方式？

注：二次贝塞尔曲线上点的计算公式为：
$$P(t) = (1-t)^2P_0 + 2t(1-t)P_1 + t^2P_2$$
其中$P_0$为起点，$P_1$为控制点，$P_2$为终点，参数$t∈[0,1]$。

解答 #

1. 可以通过坐标点反推参数t，再代入切线函数 #

二次贝塞尔的坐标公式展开后是关于t的二次方程，以x坐标为例：
将$x = (1-t)^2x_0 + 2t(1-t)x_1 + t^2x_2$整理为标准二次方程形式：
$$(x_0 - 2x_1 + x_2)t² + 2(x_1 - x_0)t + (x_0 - x) = 0$$
同理，y坐标也可得到对应的二次方程。解这两个方程得到t的可能值后，结合t∈(0,1)以及实际交点的位置筛选出正确的t，再代入你现有的bezierCurveTangent函数即可得到切线向量。

2. 是否存在更优的直接计算方式？ #

二次贝塞尔曲线的切线有几何性质可利用：曲线上任意点的切线，与线段$P_0P_1$在t处的插值点、线段$P_1P_2$在t处的插值点的连线平行。但如果要跳过t直接通过坐标点计算切线，需要推导更复杂的表达式，实现成本更高。

对于二次贝塞尔曲线来说，反解t的计算量极小（仅需解二次方程），且你已有现成的切线函数，因此反推t再代入的方式是最优选择——代码改动少、逻辑清晰，性能上几乎没有损耗。

内容的提问来源于stack exchange，提问作者m.tracey