在三次贝塞尔曲线上找到某一点的切线。

Question

对于一个具有四个常规点a、b、c和d的三次贝塞尔曲线，

给定一个值t，

如何最优雅地找到该点的切线？

- Fattie

Answer 1

曲线的切线就是它的导数。Michal使用的参数方程式：

P(t) = (1 - t)^3 * P0 + 3t(1-t)^2 * P1 + 3t^2 (1-t) * P2 + t^3 * P3

应该有一个导数。

dP(t) / dt =  -3(1-t)^2 * P0 + 3(1-t)^2 * P1 - 6t(1-t) * P1 - 3t^2 * P2 + 6t(1-t) * P2 + 3t^2 * P3 

顺便提一下，在您之前的问题中，似乎是错误的。我认为您在那里使用的是二次贝塞尔曲线的斜率，而不是三次的。

从那里开始，实现一个执行此计算的 C 函数应该是微不足道的，就像 Michal 已经为曲线本身提供的那样。

- Brad Larson

Answer 2

以下是经过全面测试的可以复制和粘贴的代码：

它沿着曲线绘制近似等距离的点，并且绘制切线。

bezierInterpolation找到这些点。

bezierTangent找到切线。

提供了两个版本的bezierInterpolation：

bezierInterpolation完美地工作。

altBezierInterpolation与bezierInterpolation完全相同，但是它以扩展、清晰、说明性的方式编写。这使得算术更加易于理解。

使用这两个程序中的任何一个：结果都是相同的。

在两种情况下，使用bezierTangent来查找切线。(注：Michal的精彩代码库在此处。)

还包括如何在drawRect:中使用的完整示例。

// MBBezierView.m    original BY MICHAL stackoverflow #4058979

#import "MBBezierView.h"



CGFloat bezierInterpolation(
    CGFloat t, CGFloat a, CGFloat b, CGFloat c, CGFloat d) {
// see also below for another way to do this, that follows the 'coefficients'
// idea, and is a little clearer
    CGFloat t2 = t * t;
    CGFloat t3 = t2 * t;
    return a + (-a * 3 + t * (3 * a - a * t)) * t
    + (3 * b + t * (-6 * b + b * 3 * t)) * t
    + (c * 3 - c * 3 * t) * t2
    + d * t3;
}

CGFloat altBezierInterpolation(
   CGFloat t, CGFloat a, CGFloat b, CGFloat c, CGFloat d)
    {
// here's an alternative to Michal's bezierInterpolation above.
// the result is absolutely identical.
// of course, you could calculate the four 'coefficients' only once for
// both this and the slope calculation, if desired.
    CGFloat C1 = ( d - (3.0 * c) + (3.0 * b) - a );
    CGFloat C2 = ( (3.0 * c) - (6.0 * b) + (3.0 * a) );
    CGFloat C3 = ( (3.0 * b) - (3.0 * a) );
    CGFloat C4 = ( a );

    // it's now easy to calculate the point, using those coefficients:
    return ( C1*t*t*t + C2*t*t + C3*t + C4  );
    }







CGFloat bezierTangent(CGFloat t, CGFloat a, CGFloat b, CGFloat c, CGFloat d)
 {
    // note that abcd are aka x0 x1 x2 x3

/*  the four coefficients ..
    A = x3 - 3 * x2 + 3 * x1 - x0
    B = 3 * x2 - 6 * x1 + 3 * x0
    C = 3 * x1 - 3 * x0
    D = x0

    and then...
    Vx = 3At2 + 2Bt + C         */

    // first calcuate what are usually know as the coeffients,
    // they are trivial based on the four control points:

    CGFloat C1 = ( d - (3.0 * c) + (3.0 * b) - a );
    CGFloat C2 = ( (3.0 * c) - (6.0 * b) + (3.0 * a) );
    CGFloat C3 = ( (3.0 * b) - (3.0 * a) );
    CGFloat C4 = ( a );  // (not needed for this calculation)

    // finally it is easy to calculate the slope element,
    // using those coefficients:

    return ( ( 3.0 * C1 * t* t ) + ( 2.0 * C2 * t ) + C3 );

    // note that this routine works for both the x and y side;
    // simply run this routine twice, once for x once for y
    // note that there are sometimes said to be 8 (not 4) coefficients,
    // these are simply the four for x and four for y,
    // calculated as above in each case.
 }







@implementation MBBezierView

- (void)drawRect:(CGRect)rect {
    CGPoint p1, p2, p3, p4;

    p1 = CGPointMake(30, rect.size.height * 0.33);
    p2 = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
    p3 = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));
    p4 = CGPointMake(-30 + CGRectGetMaxX(rect), rect.size.height * 0.66);

    [[UIColor blackColor] set];
    [[UIBezierPath bezierPathWithRect:rect] fill];
    [[UIColor redColor] setStroke];
    UIBezierPath *bezierPath = [[[UIBezierPath alloc] init] autorelease];   
    [bezierPath moveToPoint:p1];
    [bezierPath addCurveToPoint:p4 controlPoint1:p2 controlPoint2:p3];
    [bezierPath stroke];

    [[UIColor brownColor] setStroke];

 // now mark in points along the bezier!

    for (CGFloat t = 0.0; t <= 1.00001; t += 0.05) {
  [[UIColor brownColor] setStroke];

        CGPoint point = CGPointMake(
            bezierInterpolation(t, p1.x, p2.x, p3.x, p4.x),
            bezierInterpolation(t, p1.y, p2.y, p3.y, p4.y));

            // there, use either bezierInterpolation or altBezierInterpolation,
            // identical results for the position

        // just draw that point to indicate it...
        UIBezierPath *pointPath =
           [UIBezierPath bezierPathWithArcCenter:point
             radius:5 startAngle:0 endAngle:2*M_PI clockwise:YES];
        [pointPath stroke];

        // now find the tangent if someone on stackoverflow knows how
        CGPoint vel = CGPointMake(
            bezierTangent(t, p1.x, p2.x, p3.x, p4.x),
            bezierTangent(t, p1.y, p2.y, p3.y, p4.y));

        // the following code simply draws an indication of the tangent
        CGPoint demo = CGPointMake( point.x + (vel.x*0.3),
                                      point.y + (vel.y*0.33) );
        // (the only reason for the .3 is to make the pointers shorter)
        [[UIColor whiteColor] setStroke];
        UIBezierPath *vp = [UIBezierPath bezierPath];
        [vp moveToPoint:point];
        [vp addLineToPoint:demo];
        [vp stroke];
    }   
}

@end

to draw that class...
MBBezierView *mm = [[MBBezierView alloc]
                     initWithFrame:CGRectMake(400,20, 600,700)];
[mm setNeedsDisplay];
[self addSubview:mm];

---

以下是两个计算贝塞尔曲线上近似等距点和这些点的切线的例程。

为了清晰可靠起见，这些例程以最简单、最易懂的方式编写。

CGFloat bezierPoint(CGFloat t, CGFloat a, CGFloat b, CGFloat c, CGFloat d)
    {
    CGFloat C1 = ( d - (3.0 * c) + (3.0 * b) - a );
    CGFloat C2 = ( (3.0 * c) - (6.0 * b) + (3.0 * a) );
    CGFloat C3 = ( (3.0 * b) - (3.0 * a) );
    CGFloat C4 = ( a );

    return ( C1*t*t*t + C2*t*t + C3*t + C4  );
    }

CGFloat bezierTangent(CGFloat t, CGFloat a, CGFloat b, CGFloat c, CGFloat d)
    {
    CGFloat C1 = ( d - (3.0 * c) + (3.0 * b) - a );
    CGFloat C2 = ( (3.0 * c) - (6.0 * b) + (3.0 * a) );
    CGFloat C3 = ( (3.0 * b) - (3.0 * a) );
    CGFloat C4 = ( a );

    return ( ( 3.0 * C1 * t* t ) + ( 2.0 * C2 * t ) + C3 );
    }

四个预计算的值，C1 C2 C3 C4，有时被称为贝塞尔曲线的系数。（回想一下，通常将a b c d称为四个控制点。）

当然，t的取值范围是从0到1，例如每0.05一个。

只需分别为X和Y调用这些例程一次。 希望对某人有所帮助！

---

重要事实：

(1) 绝对事实是：非常遗憾，目前为止，苹果公司没有提供任何方法从UIBezierPath中提取点。截至2019年，这一点是真实的。

(2) 别忘了，沿着UIBezierPath轻松地实现动画效果。Google 许多例子。

(3) 许多人会问：“不能使用CGPathApply从UIBezierPath中提取点吗？” 不行，CGPathApply完全无关：它只是给出您“制作任何路径的指令”的列表（因此，“从这里开始”，“画一条直线到这个点”，等等）。 名称有些令人困惑，但CGPathApply与bezier路径完全无关。

---

对于游戏程序员而言 - 正如 @Engineer 所指出的那样，您可能需要切线的法线，幸运的是，苹果已经内置了向量数学：

https://developer.apple.com/documentation/accelerate/simd/working_with_vectors
https://developer.apple.com/documentation/simd/2896658-simd_normalize

- Fattie

---

非常有用，谢谢。请注意，在计算切线后，您应该对其进行归一化处理，因为该函数提供任意长度的向量 - 实际上随着t的增长而增长。这个可以帮助其他人做到这一点。 - Engineer

@工程师，谢谢。实际上，在许多情况下，您可能需要规范化切线 - 好消息是，实际上有内置函数用于规范化和其他矢量数学！developer.apple.com/documentation/simd/2896658-simd_normalize - Fattie

哈哈，我甚至没有用它来进行苹果相关的开发，而是习惯于编写自己的向量代码 - 这是一个很好的通用答案，无论语言/平台如何。 - Engineer

Answer 3

我发现使用提供的方程式太容易出错了。很容易忽略一个微小的t或者放错括号。

相比之下，维基百科提供了一个更清晰、更简洁、更易于理解的导数公式。

...在代码中很容易实现的方式是：

3f * oneMinusT * oneMinusT * (p1 - p0)
+ 6f * t * oneMinusT * (p2 - p1)
+ 3f * t * t * (p3 - p2)

（假设您在所选择的语言中已经配置了向量减法；问题没有明确标记为特定的ObjC，并且iOS现在有多种可用的语言）

- Adam

---

很完美，但是在当前的Swift中，任何这么长的东西都会出问题。 - Fattie

Answer 4

以下是我精心优化过的Swift实现。

我尽力减少了所有冗余的数学操作，以提高速度。即尽量少调用数学运算，并且使用最少的乘法（比加法更昂贵）。

创建bezier曲线不需要任何乘法。 获取bezier曲线上一点需要3次乘法。 获取bezier曲线上一点的切线需要2次乘法。

struct CubicBezier {

    private typealias Me = CubicBezier
    typealias Vector = CGVector
    typealias Point = CGPoint
    typealias Num = CGFloat
    typealias Coeficients = (C: Num, S: Num, M: Num, L: Num)

    let xCoeficients: Coeficients
    let yCoeficients: Coeficients

    static func coeficientsOfCurve(from c0: Num, through c1: Num, andThrough c2: Num, to c3: Num) -> Coeficients
    {
        let _3c0 = c0 + c0 + c0
        let _3c1 = c1 + c1 + c1
        let _3c2 = c2 + c2 + c2
        let _6c1 = _3c1 + _3c1

        let C = c3 - _3c2 + _3c1 - c0
        let S = _3c2 - _6c1 + _3c0
        let M = _3c1 - _3c0
        let L = c0

        return (C, S, M, L)
    }

    static func xOrYofCurveWith(coeficients coefs: Coeficients, at t: Num) -> Num
    {
        let (C, S, M, L) = coefs
        return ((C * t + S) * t + M) * t + L
    }

    static func xOrYofTangentToCurveWith(coeficients coefs: Coeficients, at t: Num) -> Num
    {
        let (C, S, M, _) = coefs
        return ((C + C + C) * t + S + S) * t + M
    }

    init(from start: Point, through c1: Point, andThrough c2: Point, to end: Point)
    {
        xCoeficients = Me.coeficientsOfCurve(from: start.x, through: c1.x, andThrough: c2.x, to: end.x)
        yCoeficients = Me.coeficientsOfCurve(from: start.y, through: c1.y, andThrough: c2.y, to: end.y)
    }

    func x(at t: Num) -> Num {
        return Me.xOrYofCurveWith(coeficients: xCoeficients, at: t)
    }

    func y(at t: Num) -> Num {
        return Me.xOrYofCurveWith(coeficients: yCoeficients, at: t)
    }

    func dx(at t: Num) -> Num {
        return Me.xOrYofTangentToCurveWith(coeficients: xCoeficients, at: t)
    }

    func dy(at t: Num) -> Num {
        return Me.xOrYofTangentToCurveWith(coeficients: yCoeficients, at: t)
    }

    func point(at t: Num) -> Point {
        return .init(x: x(at: t), y: y(at: t))
    }

    func tangent(at t: Num) -> Vector {
        return .init(dx: dx(at: t), dy: dy(at: t))
    }
}

使用方法:

let bezier = CubicBezier.init(from: .zero, through: .zero, andThrough: .zero, to: .zero)

let point02 = bezier.point(at: 0.2)
let point07 = bezier.point(at: 0.7)

let tangent01 = bezier.tangent(at: 0.1)
let tangent05 = bezier.tangent(at: 0.5)

- SirEnder

---

我同时进一步改进了算法，通过确保编译器不会在没有必要的情况下创建乘法来实现。请享受。 - SirEnder

Answer 5

在我意识到参数方程中，(dy/dt)/(dx/dt) = dy/dx之前，我无法使任何一个例子起作用。

- Rick