-1

I am trying to arrange a bunch of div with different size in a ellipse in a div box.

Here is what i have until yet:

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

});

starting point was https://github.com/addyosmani/js-shapelib/blob/master/jquery.shapelib.js

How do i prevent overlapping of the div's and overflowing the box?

lcase
  • 63
  • 4

1 Answers1

0

The minor and major axes (a and b) were too small for what you were trying to accomplish. Try with this css for #stage.

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

}

specialscope
  • 4,188
  • 3
  • 24
  • 22
  • Also to prevent cutting off of some elements (due to negative positions), you need to offset the center of box towards the center of the page. You can do something like this, drawEllipse(".block", stage.outerHeight() / 2+100, stage.outerWidth() / 2+100, stage.outerHeight() / 2, stage.outerWidth() / 2, 360); – specialscope Oct 26 '12 at 16:41
  • Thanks specialscope. The red boxes must be inside the grey box and should not overlap each other. In your version it grows over the bounds of the stage. – lcase Oct 28 '12 at 08:23
  • Just fiddle with the radius of ellipse and positioning of box you should be able to get there eventually. Using boxlength/2 as axes magnitude wont work. – specialscope Oct 28 '12 at 10:01