javascript - いくつかの要素を円の周りに動的に配置する

Question

いくつかの要素を円の周りに配置する関数を探しています。
結果は次のようになります。

Answer 1

役立つコードを次に示します。

var numElements = 4,
    angle = 0
    step = (2*Math.PI) / numElements;
for(var i = 0; i < numElements.length; i++) {
    var x = container_width/2 + radius * Math.cos(angle);
    var y = container_height/2 + radius * Math.sin(angle);
    angle += step;
}

これは完全ではありませんが、良いスタートを切ることができます。

---

更新：実際に機能するものは次のとおりです。

var radius = 200; // radius of the circle
var fields = $('.field'),
    container = $('#container'),
    width = container.width(),
    height = container.height(),
    angle = 0,
    step = (2*Math.PI) / fields.length;
fields.each(function() {
    var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).width()/2),
        y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2);
    $(this).css({
        left: x + 'px',
        top: y + 'px'
    });
    angle += step;
});

デモ: http://jsfiddle.net/ThiefMaster/LPh33/要素数を変更できる
改良版です。

Answer 2

( x , y )、距離rの中心の周りの要素の場合、要素の中心は次の場所に配置する必要があります。

(x + r cos(2kπ/n), y + r sin(2kπ/n))

ここで、nは要素の数、kは現在配置している要素の「番号」です (1 からnまでの間)。

Answer 3

ThiefMaster のフィドルを jQuery pointAt プラグインと組み合わせました。

デモ: http://jsfiddle.net/BananaAcid/nytN6/

the code is somewhat like above.
might be interesting to some of you.