javascript - 将 div 元素分布在盒子的椭圆上，防止重叠和溢出

Question

我正在尝试在 div 框中的椭圆中排列一堆不同大小的 div。

这是我到目前为止所拥有的：

http://jsfiddle.net/gz2bH/5/

var stage = $('#stage');
$('#middle').css('top', stage.outerHeight() / 2 - $('#middle').outerHeight() / 2 + 'px');
$('#middle').css('left', stage.outerWidth() / 2 - $('#middle').outerWidth() / 2 + 'px');

drawEllipse(".block", stage.outerHeight() / 2, stage.outerWidth() / 2, stage.outerHeight() / 2, stage.outerWidth() / 2, 360);

function drawEllipse(selector, x, y, a, b, angle) {
var steps = $(selector).length;

var i = 0;
var beta = -angle * (Math.PI / 180);
var sinbeta = Math.sin(beta);
var cosbeta = Math.cos(beta);

$(selector).each(function(index) {
    i += (360 / steps);
    var alpha = i * (Math.PI / 180);
    var sinalpha = Math.sin(alpha);
    var cosalpha = Math.cos(alpha);
    var X = x + (a * cosalpha * cosbeta - b * sinalpha * sinbeta);
    var Y = y + (a * cosalpha * sinbeta + b * sinalpha * cosbeta);


    X = Math.floor(X);
    Y = Math.floor(Y);
    if (X > stage.outerHeight() / 2)
        $(this).css('top', X - $(this).outerHeight() + 'px');
    else 
        $(this).css('top', X + 'px');

    $(this).css('left', Y - $(this).outerWidth() / 2 + 'px');

});

起点是https://github.com/addyosmani/js-shapelib/blob/master/jquery.shapelib.js

如何防止 div 的重叠和溢出框？

Answer 1

短轴和长轴（a 和 b）对于您想要完成的任务来说太小了。尝试使用#stage 的这个 css。

#stage{
width:800px;
height:600px;
margin:2em;
float:left;
position:relative;
background:#444;

}