当前位置：文江博客话题详情

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

发布于 2024-12-09 18:09:32 字数 284 浏览 1 评论 0原文

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

在此处输入图像描述

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

眼眸里的快感 2024-12-16 18:09:32

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

在此处输入图像描述

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) 并到达与 (x2, y2) 相切的 t=1, (x3, y3)。

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

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

A simple way to specify a curve is using a Bezier cubic.

enter image description here

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)};
}

The curve starts at t=0, (x0, y0) tangent toward (x1, y1) and arrives at t=1, (x3, y3) coming tangent from (x2, y2).

For t=0 the function returns the starting point (x0, y0), for t=1 the function returns the ending point (x3, y3). Values of t between 0 and 1 are points along the curve (they're smoothly but not equally spaced however). You can think to t as a "time" parameter of a point moving along the curve.

Following this link is possible to see an interactive version implemented in javascript/canvas (the example uses letters A, B, C and D instead of 0, 1, 2 and 3 to mark the different points).

回复收藏 0 原文