javascript - 沿圆的半径标准化值

Question

我正在尝试实现 cs.kenji-special.info 上看到的拖动/进度效果

基本上，我将 N 个 div 输出到页面中并水平移动它们。我想跟踪您滚动的进度并将其显示在后面的圆圈上。我想我应该跟踪 viewPort 中心和第一个项目的 X 位置之间的距离..

我有总元素的宽度，但经过无数次迭代我仍然无法达到效果......

任何帮助都将不胜感激。

Answer 1

不知道我是否完全理解了你的问题，但是你可以通过取值范围并标准化 2*PI 辐射点，在代表一个值的圆上有一个点，即(以伪代码的形式):

dv = 2PI/(Max-Min);
currantAngle = (currentValue-Min)*dv;
currentPointX = centerX+radius*cos(currentAngle)
currentPointY = centerY+radius*sin(currentAngle)

如果你的值是从零开始的，那就更简单了:

dv = 2PI/(Max);
currantAngle = (currentValue)*dv;
currentPointX = centerX+radius*cos(currentAngle)
currentPointY = centerY+radius*sin(currentAngle)

使用此代码点从第一象限开始并逆时针移动，您可以通过偏移 Angular 并更改符号以向相反方向移动来进行游戏，但我认为这可以让您开始。