使用jQuery绘制椭圆形的div

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.

似乎我的数学对于我目前的任务来说还不够，所以这就是为什么我想请求帮助。主要的事情是解决，我显示elipsis形状的div，但我无法解决如何照顾div的维度。目前的解决方案适用于具有相等边的形状，但我的div不是那样的，它们的宽度大于它们的高度。

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.

先谢谢你。

2 个解决方案

#1

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

而不是用保证金抵消你的div，为什么不使用position：absolute？然后，您可以将它们准确放置在您想要的位置。

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

你可以将它与div宽度和高度的一半的负边距结合起来，使它们在那个位置居中。

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

演示：http：//jsfiddle.net/jtbowden/gRb5r/

#2

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

对于重构很抱歉，大多数是个人偏好的事情。使这些受限于宽度和高度的CSS是（在我的情况下）：

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

#1