我正在研究一种设计,我想沿着曲线定位标题元素。示例:
通常我会使用 CSS 手动执行此操作,但在这种情况下,项目的数量可能是动态的。
我很好奇是否有人知道如何沿着曲线放置动态数量的项目?我猜这需要一种指定方程的方法来定义曲线应该是什么(请注意,上面的曲线在中心右侧的峰值...),然后将项目均匀地放置在其上。
以前有人这样做过吗?关于从哪里开始有什么建议吗?
最佳答案
指定曲线的一种简单方法是使用贝塞尔三次曲线。
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
视为沿曲线移动的点的“时间”参数。
已关注 this link可以看到在 javascript/canvas 中实现的交互式版本(该示例使用字母 A、B、C 和 D 而不是 0、1、2 和 3 来标记不同的点)。
关于javascript - 可以使用 javascript/jQuery 沿曲线定位元素吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7760695/