2

私はDOM要素を生成し、円の周りに（十分に）均一に分布させて円にプロットできるJavaScript関数を持っています。コードは次のとおりです (私は jQuery を使用しています)。

function createFields(numberOfItems, className, radius) {
    var container = $('#container');
    for(var i = 0; i < +numberOfItems; i++) {
        $('<div/>', {
            'class': 'field ' + className,
            'text': i + 1
        }).appendTo(container);
    }

    var fields = $('.' + className), 
        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);
        var y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2);
        if(window.console) {
            console.log($(this).text(), x, y);
        }
        $(this).css({
            left: x + 'px',
            top: y + 'px'
        });
        angle += step;
    });
}

createFields(5, 'outer', 200);
createFields(4, 'inner', 120);

フィドル: http://jsfiddle.net/z79gj8a7/

生成された要素が垂直に対して 90 度から始まることに気付くでしょう。0度から始まるようにプロットしたいと思います。要するに、これを時計に例えると、3時間前に全項目をプロットしたいということです。スクリプトの角度を変更して-90、線から 90 を差し引いてみましangle += stepたが、目的の効果がありません。

要素を現在の場所から -90 度でプロットする方法を提案するよりも数学が得意な人はいますか? (単に回転できることは承知して#containerいますが、コンテンツを正しい向きに保つために要素を回転させて補正する必要があるため、ハックのように思えます)。

どうもありがとう。

4

2 に答える 2

2

スクリプトは度ではなくラジアンで動作しています:)ここにあなたが望むものがあります(私は思います) http://jsfiddle.net/z79gj8a7/1/

角度を pi/2 ずらす必要があります

var x = Math.round(width/2 + radius * Math.cos(angle - (Math.PI/2)) - $(this).width()/2);
var y = Math.round(height/2 + radius * Math.sin(angle - (Math.PI/2)) - $(this).height()/2);

または、さらに良い (スクリプトを適切に読んだ) x と y の計算を変更せずにangle、-pi/2 で始まるように変更します: http://jsfiddle.net/z79gj8a7/2/

angle = -Math.PI/2,
于 2015-02-19T11:29:27.510 に答える
1

jsFiddle デモ

function createFields(numberOfItems, className, radius) {
    var container = $('#container'),
        centerX = container.width()/2,
        centerY = container.height()/2,
        angle = 0;

    for(var i = 0; i < +numberOfItems; i++) {
        $('<div/>', {
            'class': 'field ' + className,
            'text': i + 1
        }).appendTo(container);
    }

    var fields = $('.' + className), 
        tot = fields.length;

    fields.each(function(i, e) {
        var w2 = $(e).outerWidth(true)/2,
            h2 = $(e).outerHeight(true)/2,
            angle = 360/tot*i,
            x = Math.round(centerX+radius *  Math.sin(angle*Math.PI/180)),
            y = Math.round(centerY+radius * -Math.cos(angle*Math.PI/180));
        $(e).css({left:x-w2, top:y-h2}).text( i+1 );
    });
}

createFields(5, 'outer', 200);
createFields(4, 'inner', 120);
于 2015-02-19T11:39:34.690 に答える