可以使用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视为沿着曲线移动的点的“时间”参数。

以下this link可以看到在javascript / canvas中实现的交互式版本（该示例使用字母A，B，C和D代替0,1,2和3来标记不同的点）。< / p>

Answer 2

您可以使用曲线公式和绝对定位。编写一个函数，给定X将返回Y，使该函数返回Y作为弯曲的东西（查看旧的几何图形或触发书籍）。现在，遍历您的元素，在元素的X值之间给出一定的差距。 X =左，Y =顶部。

请参阅http://fancythought.blogspot.com/2011/06/love-formula-heart-shaped-curvy-graph.html了解公式......

您还可以在父元素上使用相对定位以允许更好的放置（相对将使绝对元素相对于父元素的位置）。

Answer 3

我最后使用了@ 6502提到的函数创建了一个我正在使用的jQuery插件。由于必须放置在曲线上的元素数量会动态变化，因此应用于选择器的插件可以很好地工作。它还有助于生成曲线方程。

你可以在这里找到它：

• http://plugins2.jquery.com/project/jCurvy
• http://jCurvy.com