Нарисуйте div в эллиптической форме с помощью jQuery

Question

Кажется, что моей математики недостаточно для моей текущей задачи, поэтому я хотел бы попросить помощи.Главное решено, я отображаю div в форме elipsis, но я не могу решить, как позаботиться о размерности div.Текущее решение работает для фигур с равными сторонами, но мои div не такие, их ширина больше их высоты.

Текущая функция выглядит следующим образом:

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

Спасибозаранее.

Answer 1

Вместо того, чтобы компенсировать ваши деления с помощью margin, почему бы вам не использовать position: absolute?Затем вы можете разместить их именно там, где вам нужно.

Вы можете комбинировать это с отрицательным полем в половину ширины и высоты div, чтобы центрировать их в этой позиции.

Демо: http://jsfiddle.net/jtbowden/gRb5r/

Answer 2

Я смог заставить ваш код работать таким образом (он нужен по совершенно другой причине):

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

Извините за рефакторинг, большая часть этого - личные предпочтения.CSS, который ограничивает их ширину и высоту, был (в моем случае):

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

Обратите внимание на положение: абсолютное, как предложил другой плакат.

Дополнительный код вызова в моем случае был таким, просто для справки:

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