Draw divs in elliptischer Form mit jQuery

Question

Es scheint, dass meine Mathe für meine aktuelle Aufgabe nicht genug ist, so thats, warum ich Hilfe bitten möchte. Die Hauptsache ist gelöst, ich zeige die divs in elipsis Form, aber ich kann nicht lösen, wie man auf die Dimension der divs aufpasst. Die aktuelle Lösung funktioniert für Formen mit gleichen Seiten, aber meine Divs sind nicht so, ihre Breite ist größer als ihre Höhe.

Die aktuelle Funktion sieht wie folgt aus:

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

Vielen Dank im Voraus.

Answer 1

Anstatt Ihre divs mit margin zu verrechnen, warum verwenden Sie nicht position: absolute? Dann können Sie sie genau dort platzieren, wo Sie sie haben möchten.

Sie können sie mit einer negativen Marge der div halben Breite und Höhe zum Zentrum verbinden dies an dieser Position.

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

Answer 2

ich in der Lage war, um Ihren Code Arbeit durch diese zu machen (es benötigt für sehr unterschiedliche Grund):

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 über die Refactoring, das meiste davon ist persönliche Präferenz Dinge. Die CSS, dass diese in der Breite eingeschränkt macht und die Höhe war (in meinem Fall):

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

Notiere die position: absolute als ein weiteres Plakat vorgeschlagen.

Der zusätzliche Aufrufcode in meinem Fall war dies nur als Referenz:

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