CODEWITHSUNDEEP
javascriptjquerymath
Joooe
Joooe

Reputation: 57

Draw divs in elliptical shape with jQuery

It seems that my math is not enough for my current task, so thats why i would like to ask help. The main thing is solved, i display the divs in elipsis shape, but i cannot solve how to take care to the dimension of the divs. The current solution works for shapes with equal sides, but my divs are not like that, their width are bigger than their height.

The current function look like this:

function drawEllipse(selector, x, y, a, b, angle) {
var steps = jQuery(selector).length;
var i = 0;
var beta = -angle * (Math.PI / 180);
var sinbeta = Math.sin(beta);
var cosbeta = Math.cos(beta);

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

    //again, here's where the important X and Y coordinates are being output
    jQuery(this).css('margin-top', Y + 'px');
    jQuery(this).css('margin-left', X + 'px');
});
}

Thank you in advance.

Upvotes: 3

Views: 1109

Answers (2)

Peter Tracey
Peter Tracey

Reputation: 260

I was able to make your code work by this (needed it for very different reason):

Plugin.prototype.drawEllipse = function (element, x, y, a, b, angle) {
    var steps = 120;
    var i = 0;
    var beta = -angle * (Math.PI / 180);
    var sinbeta = Math.sin(beta);
    var cosbeta = Math.cos(beta);

    for (var i=0; i<steps; i++) {
        element.html(element.html() + "<div class='ellipsemarker'></div>");
    }

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

        //again, here's where the important X and Y coordinates are being output
        $(this).css('top', Y + 'px');
        $(this).css('left', X + 'px');
    });
};

Sorry about the refactoring, most of that is personal preference things. The CSS that makes these constrained in width and height was (in my case):

.ellipsemarker {
    background-color: #fff;
    border: #e8e8e8 2px solid;
    width: 15px;
    height: 10px;
    position: absolute;
}

Note the position: absolute as another poster suggested.

The supplementary calling code in my case was this, just for reference:

var x, y;
var pos = $('#ringwrapper').position();
x = pos.left;
y = pos.top;
console.log(x + " : " + y);

this.drawEllipse($('#ringwrapper'), x + (this.ringSize.width / 2.85), 
    y + (this.ringSize.height / 3.1), 235, 350, 90);

Upvotes: 0

Jeff B
Jeff B

Reputation: 30099

Instead of offsetting your divs with margin, why don't you use position: absolute? Then you can place them exactly where you want them.

You can combine this with a negative margin of half the div's width and height to center them at that position.

Demo: http://jsfiddle.net/jtbowden/gRb5r/

Upvotes: 2

Related Questions