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

debugcn 发表于 Dev

唐·拉米

我正在使用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)
        }
    );

约我想要的是：在此处输入图片说明

大约是我得到的（它们的浸入度太低）：在此处输入图片说明

漫游者1888

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

首先，您需要几个实用程序功能：

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对于每种情况（四个对角线，水平和垂直），的计算都非常简单，但是对于一般的解决方案而言，计算起来有些棘手。我花了一段时间才能开发出在所有情况下都有效的产品。

演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。