是否可以使用javascript/jQuery沿曲线定位元素？

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

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

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

---

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

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

有关公式，请参阅

---

您还可以在父元素上使用相对定位，以便更好地放置（相对将使绝对元素相对于父元素进行定位）。

指定曲线的简单方法是使用贝塞尔立方

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

视为沿曲线移动的点的“时间”参数

---

下面可以看到一个用javascript/canvas实现的交互式版本（该示例使用字母A、B、C和D，而不是0、1、2和3来标记不同的点）。

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

你可以在这里找到它：

---

一件可能有帮助的事情是。它不会进行定位，但可能会使文本管理更容易。答案在很大程度上取决于您想要使用哪种曲线。圆弧？抛物线？双曲线？你对“简单”这个词有一个有趣的定义。好吧，我知道x/y值代表什么，但是与上图相关的

t

是什么？它对

x0，y0

/

x3，y3

没有的定义是什么？

t

是否总是介于0和1之间的值？@mblase75:Simple意味着很容易选择控制点并获得具有所需形状的平滑曲线。事实上，正是出于这个原因，贝塞尔立方经常被用于矢量绘图程序中。公式也很简单。。。它们只是线性插值。@AbeMiessler:t=0是开始，t=1是结束。在0和1之间的值将返回曲线上的点（例如T＝0.5将大致在曲线的中间）。如果你想要曲线上的10个点，只需使用1/11，2/11。。。10/11. 注意，但它们不一定完全等间距（曲线可能“加速”和“减速”）。