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

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

Fiddle: http://jsfiddle.net/z79gj8a7/

您会注意到生成的元素开始时与垂直方向成 90 度角。我想绘制它们，以便它们从 0 度开始。本质上，如果您将其想象成一个时钟，我想提前 3 小时绘制所有项目。我试过将脚本中的角度修改为 -90 并从 angle += step 行中减去 90，但没有达到预期的效果。

有谁比我更擅长数学，可以建议一种方法，让要绘制的元素与现在的位置成 -90 度吗？（我知道我可以只旋转 #container 但这似乎是一个 hack，因为我必须旋转元素来补偿以保持它们的内容在正确的方向）。

非常感谢。

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 圆上的均匀分布的元素

Rotate evenly-distributed elements placed on a circle with jQuery

javascript

math

jquery

angle

degrees