-1

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のオーバーラップとボックスのオーバーフローを防ぐにはどうすればよいですか?

4

1 に答える 1

0

短軸と長軸(aとb)は、達成しようとしていたものには小さすぎました。#stageにこのcssを試してみてください。

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

}

于 2012-10-26T16:36:44.660 に答える