2

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

在此处输入图像描述

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

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

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

4

3 回答 3

5

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

在此处输入图像描述

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)。

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

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

于 2011-10-13T21:53:02.477 回答
1

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

有关公式，请参见http ://fancythought.blogspot.com/2011/06/love-formula-heart-shaped-curvy-graph.html ...

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

于 2011-10-13T21:39:37.753 回答
1

我最终使用了@6502 提到的函数来创建我正在使用的 jQuery 插件。由于必须放置在曲线上的元素数量动态变化，因此将插件应用于选择器效果很好。它还有助于生成曲线方程。

你可以在这里找到它：

于 2011-10-18T23:21:56.527 回答