可以使用javascript / jQuery在曲线上定位元素吗？

Question

我正在设计一个我想沿着曲线放置标题元素的设计。例：

通常，我会使用CSS手动完成此操作，但在这种情况下，项目数量可能会动态变化。

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

有人做过吗？关于从哪里开始的任何建议？

Answer 1

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

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)。t介于0和1之间的值是沿曲线的点（它们平滑但间距不相等）。您可以t将沿曲线移动的点视为“时间”参数。

通过此链接可以看到以javascript / canvas实现的交互式版本（该示例使用字母A，B，C和D代替0、1、2和3来标记不同的点）。