javascript - 给定 x-pos 在三次贝塞尔曲线上查找点

Question

我有一个 CSS 类型的三次贝塞尔曲线，其中
A = 0,0
B = a, b where 0<a<1
C = p, q where 0<p<1
D = 1, 1

我想要一个pointOnBezier(a,b,p,q,x) => {x:x, y:y}
我发现这有帮助但没有数学公式的函数
https://upload.wikimedia.org/wikipedia/commons/d/db/B%C3%A9zier_3_big.gif
任何帮助将不胜感激。提前致谢！！！

Answer 1

您可以在Wikipedia中找到三次贝塞尔曲线公式。

获得公式后，您需要通过x找到t，然后通过t找到y。要找到t，您需要求解三次方程。您可以从其他地方找到求解三次方程的代码，例如这篇文章。

这是供您参考的代码：

function getCubicBezierY(a, b, p, q, x) {
    // By the Cubic Bézier curve formula, we know that
    // 3(1-t)²ta + 3(1-t)t²p + t³ - x = 0
    // After formatting it to the cubic equation form, we have
    // (3a-3p+1)t³ + (3p-6a)t² + 3at - x = 0
    // Solve the equation
    const t = solveCubic(3*a-3*p+1, 3*p-6*a, 3*a, -x)[0]; // There should be only 1 root
    const r = 1 - t;
    // Find y by using the Cubic Bezier curve formula
    return 3*r*r*t*b + 3*r*t*t*q + t*t*t;
}

// Functions for solving cubic equation
function cuberoot(x) {
    var y = Math.pow(Math.abs(x), 1/3);
    return x < 0 ? -y : y;
}

function solveCubic(a, b, c, d) {
    if (Math.abs(a) < Number.EPSILON) { // Quadratic case, ax^2+bx+c=0
        a = b; b = c; c = d;
        if (Math.abs(a) < Number.EPSILON) { // Linear case, ax+b=0
            a = b; b = c;
            if (Math.abs(a) < Number.EPSILON) // Degenerate case
                return [];
            return [-b/a];
        }

        var D = b*b - 4*a*c;
        if (Math.abs(D) < Number.EPSILON)
            return [-b/(2*a)];
        else if (D > 0)
            return [(-b+Math.sqrt(D))/(2*a), (-b-Math.sqrt(D))/(2*a)];
        return [];
    }

    // Convert to depressed cubic t^3+pt+q = 0 (subst x = t - b/3a)
    var p = (3*a*c - b*b)/(3*a*a);
    var q = (2*b*b*b - 9*a*b*c + 27*a*a*d)/(27*a*a*a);
    var roots;

    if (Math.abs(p) < Number.EPSILON) { // p = 0 -> t^3 = -q -> t = -q^1/3
        roots = [cuberoot(-q)];
    } else if (Math.abs(q) < Number.EPSILON) { // q = 0 -> t^3 + pt = 0 -> t(t^2+p)=0
        roots = [0].concat(p < 0 ? [Math.sqrt(-p), -Math.sqrt(-p)] : []);
    } else {
        var D = q*q/4 + p*p*p/27;
        if (Math.abs(D) < Number.EPSILON) {       // D = 0 -> two roots
            roots = [-1.5*q/p, 3*q/p];
        } else if (D > 0) {             // Only one real root
            var u = cuberoot(-q/2 - Math.sqrt(D));
            roots = [u - p/(3*u)];
        } else {                        // D < 0, three roots, but needs to use complex numbers/trigonometric solution
            var u = 2*Math.sqrt(-p/3);
            var t = Math.acos(3*q/p/u)/3;  // D < 0 implies p < 0 and acos argument in [-1..1]
            var k = 2*Math.PI/3;
            roots = [u*Math.cos(t), u*Math.cos(t-k), u*Math.cos(t-2*k)];
        }
    }

    // Convert back from depressed cubic
    for (var i = 0; i < roots.length; i++)
        roots[i] -= b/(3*a);

    return roots;
}