Circlular数字选择器但距离相等

Question

我目前正在尝试开发一个圆形数字选择器（因此它可以无限滚动），但遇到显示等距离可见数字的问题。

我想要实现的是这样的：

这可以无限滚动（10就在0旁边）。

我目前的实现如下：

首先，我计算了选择器中每个元素所需的半径和度数。

this._theta = 360 / _this.getPanels().length;
this._radius = Math.round((_this._panelWidth * _this.getPanels().length) / (2 * Math.PI));

然后它最初被旋转以按正确的顺序设置元素（此方法也将用于旋转选择器）：

_rotate: function(rotation) {
  this._curRotation = rotation;

  var panels = this._element.children;

  for (var i = 0; i < panels.length; i++) {
    var styleProp = panels[i].style;

    ang = (this._theta * i + 90 + rotation);

    vis = Math.sin(this._toRadians(ang)) >= 0.0;

    styleProp.visibility = vis ? 'visible' : 'hidden';

    if(vis) {
        cos = -Math.cos(this._toRadians(ang));

        styleProp[this._transformProperty] = "translateX("
        + (cos * this._radius) + "px) scale("+ (1 - Math.abs(cos) * 0.333) +")";
    }
  }
}

正如您所看到的，我计算了旋转后每个元素所处的角度的正弦值，以便能够确定哪些元素可见，哪些元素不可见（我只将上半圆设置为可见）。之后我需要确定每个元素的位置。目前我使用余弦可以在＆＃34;中间＆＃34;的左侧和右侧具有相同数量的元素。元件。

现在这对于更大量的元素来说效果相当好（因为半径会很大），但对于较少的元素看起来不那么好（旋转50度！）：

我真正想要的是在每个可见元素之间保持相等的距离，同时仍然保持圆形设置。我只是无法弄清楚如何做到这一点。 有人能指出我正确的方向吗？

谢谢！

Answer 1

一种解决方法是让每个元素出现两次，甚至三次。这会增加元素的数量，使问题不会那么麻烦。