2

I have a JavaScript function which allows me to generate DOM elements and plot them on a circle with (good enough) even distribution around the circle. The code is as follows (I'm using 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/

You'll notice that the generated elements begin at 90 degrees to the vertical. I'd like to plot them so that they begin at 0 degrees. Essentially, if you imagine this as a clock, I want to plot all of the items 3hrs earlier. I've tried modifying the angle in the script to -90 and also subtracting 90 from the angle += step line but it's not having the desired effect.

Could anyone who's better at maths than I suggest a way to get the elements to be plotted -90 degrees from where they are now? (I'm aware I could just rotate the #container but that seems like a hack as I'd have to rotate the elements to compensate to keep their content in the correct orientation).

Many thanks.

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 回答