如何計算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。