Question

我有一个JavaScript函数，它允许我生成DOM元素并将它们绘制在一个圆圈上，并且在圆周上均匀分布（足够好）。代码如下（我使用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，并从angle += step行减去90，但它没有达到预期的效果。

在数学方面比我更好的人是否可以建议一种方法来将元素绘制成-90度，而不是现在的位置？（我知道我可以旋转#container，但这看起来像是一个黑客，因为我必须旋转元素以补偿它们的内容保持正确的方向。）

非常感谢。

Answer 1

脚本工作在弧度而非度数:)这是你想要的（我认为）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,

Answer 2

<强> jsFiddle demo

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);

使用jQuery旋转放置在圆上的均匀分布的元素

2 个答案: