如何计算 1/4 圆弧移动（贝塞尔曲线）？

Question

我正在使用JQuery.path 沿贝塞尔曲线移动对象。单击该项目时，我可以确定起点和终点。如何计算角度和长度以使元素在与起点和终点相交的圆的 1/4 的圆弧上从 A 点移动到 B 点？

我基本上希望它沿着一条曲线移动，该曲线永远不会低于起始 y 位置，也永远不会低于终点 x 位置的左侧。

    var path = {
        start: {
            x: currentLeft,
            y: currentTop,
            angle: ????, //Don't know how to calculate this
            length: ???? //Don't know how to calculate this
        },
        end: {
            x: endLeft,
            y: endTop,
            angle: ????, //Don't know how to calculate this
            length: ???? //Don't know how to calculate this
        }
    };

    jQuery(myElement).animate(
        {
            path: new jQuery.path.bezier(path)
        }
    );

大约。我想要的是：

大概我得到的（他们浸得太低了）：

Answer 1

一个通用的解决方案有点棘手，因为它必须处理四个对角线方向、水平和垂直方向的对角线运动。

首先，您需要几个实用函数：

function r2d(x) {
    /* radians to degrees */
    return x * 180 / Math.PI;
}
function smaller(x, y) {
    /* returns the closer of x|y to zero */
    var x_ = Math.abs(x);
    var y_ = Math.abs(y);
    return (Math.min(x_, y_) === x_) ? x : y;
}

现在一个主函数 anim 接受一个 jQuery 对象（包含感兴趣的元素）和一个 end 对象（具有属性 .left 和 .top ）。

function anim($el, end) {
    var current = $el.position();

    var slope1 = (end.top - current.top) / (end.left - current.left);
    var slope2 = 1 / slope1;
    var endAngle = r2d(Math.atan(smaller(slope1, slope2)));
    var startAngle = -endAngle;
    var length = 1/3; //Vary between 0 and 1 to affect the path's curvature. Also, try >1 for an interesting effect.

    //For debugging
    $("#endAngle").text(endAngle);
    $("#startAngle").text(startAngle);
    $("#length").text(length);

    var path = {
        start: {
            x: current.left,
            y: current.top,
            angle: startAngle,
            length: length
        },
        end: {
            x: end.left,
            y: end.top,
            angle: endAngle,
            length: length
        }
    };

    $el.animate({ path: new jQuery.path.bezier(path) });
}

endAngle 的计算对于每个单独的情况（四个对角线，水平和垂直）都非常简单，但对于通用解决方案来说有点棘手。我花了一段时间才开发出适用于所有情况的东西。

DEMO

Answer 2

如果“你想要的”真的是你所需要的，即 90 度出发和到达，那么我们几乎可以立即解决这个问题：

p_start = { X:..., Y:... }
p_end = { X:..., Y:... }
dx = p_end.X - p_start.X
dy = p_end.Y - p_start.Y
control_1 = { X: p_start.X, Y: p_start.Y + 0.55228 * dy }
control_2 = { X: p_end.X - 0.55228 * dx, Y: p_end.Y }

完成了。我们所做的基本上是假设起点和终点位于一个圆上，然后计算控制点，使得生成的贝塞尔曲线在四分之一圆弧上的误差最小。

在角度方面：从起点出发总是在角度π/2，到达终点总是在角度0。