javascript - 可以使用 javascript/jQuery 沿曲线定位元素吗？

Question

我正在研究一种设计，我想沿着曲线定位标题元素。示例:

通常我会使用 CSS 手动执行此操作，但在这种情况下，项目的数量可能是动态的。

我很好奇是否有人知道如何沿着曲线放置动态数量的项目？我猜这需要一种指定方程的方法来定义曲线应该是什么(请注意，上面的曲线在中心右侧的峰值...)，然后将项目均匀地放置在其上。

以前有人这样做过吗？关于从哪里开始有什么建议吗？

Answer 1

指定曲线的一种简单方法是使用贝塞尔三次曲线。

function bez3(x0, y0, x1, y1, x2, y2, x3, y3, t)
{
    var x01 = x0 + t*(x1 - x0);
    var y01 = y0 + t*(y1 - y0);
    var x12 = x1 + t*(x2 - x1);
    var y12 = y1 + t*(y2 - y1);
    var x23 = x2 + t*(x3 - x2);
    var y23 = y2 + t*(y3 - y2);

    var x012 = x01 + t*(x12 - x01);
    var y012 = y01 + t*(y12 - y01);
    var x123 = x12 + t*(x23 - x12);
    var y123 = y12 + t*(y23 - y12);

    return {x: x012 + t*(x123 - x012),
            y: y012 + t*(y123 - y012)};
}

曲线从 t=0, (x0, y0) 开始，与 (x1, y1) 相切，到达 t=1, (x3, y3) 与 (x2, y2) 相切。

对于t=0，函数返回起点(x0, y0)，对于t=1，函数返回终点(x3, y3)。 0 到 1 之间的 t 值是曲线上的点(它们是平滑的，但间距不相等)。您可以将 t 视为沿曲线移动的点的“时间”参数。

已关注 this link可以看到在 javascript/canvas 中实现的交互式版本(该示例使用字母 A、B、C 和 D 而不是 0、1、2 和 3 来标记不同的点)。