2016-12-04 5 views
0

現在、円番号ピッカーを開発しようとしているため(無限にスクロールすることができますが)、可視距離を等距離で表示する問題が発生しています。円番号ピッカーだが等しい距離

Circular picket

これは(10が右0の横にある)無限にスクロールすることができます:私が達成したい何

はこのようなものです。

私の現在の実装では、次のようになります。

まずI半径とピッカー内の各要素のために必要な程度の数を計算します。あなたは私がの正弦を計算見ることができるように

_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) +")"; 
    } 
    } 
} 

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

は、その後、それは最初に正しい順序(この方法はまた、ピッカーを回転させるために使用されます)内の要素を設定するために回転します各要素が回転後にどの角度で表示され、どの要素が可視であり、どの要素が可視でないかを判断することができます(上半円のみを表示するように設定します)。その後、私は各要素の位置を決定する必要がありました。現在、私はCosineを使用して、 "中間"要素の左右に等しい数の要素を持つことができるようにしています。

(半径が大きくなりますので)今これは要素をより多くのために合理的にうまく機能しないが、少ないもののために良いがいることを見ていません(これは、50度回転させて!):

Cosine distances

私が本当に望むのは、円形の設定を維持しながら、各表示要素間の距離を等しくすることです。私はちょうどこれを行う方法を理解することはできません。 誰かが私を正しい方向に向けることができますか?

ありがとうございました!

+0

これは興味深いです。あなたはそれを円形として記述していますが、可視の要素を1つの行に表示しているように見えます(私は変換Yを見ません)。そうですか?結果は期待通りです。時計を見てください。 9,10,11,1,2,3を一番上の行まで押し上げたとします。 9と10は、11と12よりもはるかに近いでしょう。 – Alan

+0

はい、結果は循環(変換Yなし)として見たときに除外されます。私は、要素間の距離を一定に保ちながら(つまり、線上に表示する)、循環構造を内部的に保持することを望んでいました。生きることができた。 「より良い」方法があるかどうか疑問に思っていました。 – puelo

答えて

0

回避策の1つは、各要素を2回または3回表示することです。それは問題が煩わしくないほどの要素の数を増やすでしょう。

関連する問題