Javascript 使用jQuery绘制椭圆形状的div

我的数学似乎不足以完成当前的任务，所以我想寻求帮助。主要的问题解决了，我以省略号的形式显示div，但我无法解决如何注意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');
});
}

---

提前谢谢。

与其用

边距

抵消div，不如用

位置：绝对

？然后你可以把它们放在你想要的地方

您可以将其与div宽度和高度的一半的负边距相结合，使其位于该位置的中心

---

演示：

我可以通过以下方式使您的代码正常工作（出于非常不同的原因需要它）：

注意位置：绝对，如另一张海报所示

我的补充呼叫代码如下，仅供参考：

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

---

你可以使用Raphael…你能告诉我们HTML代码以及如何调用

drawerlipse

（或设置JSFIDLE）？这就像Jeff B在下面做的一样你是对的，但这不能解决我的问题。我的意思是，如果你调用函数，目标div宽度是用于100px的，并且它们的高度是50px，那么你会看到，在ELIPSIS的上、下部分，div彼此重叠，但是在中间部分之间有一组不必要的空间。所以关键是要在元素之间实现相等的间距。这实际上有点复杂，特别是因为很多元素更像是“看起来正确”的东西，而不是计算的东西。例如，如果两个div是对角的，如何将它们隔开？距离最近点的对角线距离？水平距离和垂直距离？这些方法中的每一种在椭圆的某个部分看起来都是错误的。如果你的div都是圆，那就很容易了……而且，由于椭圆更斜，或者更确切地说，随着长轴和短轴的移动距离越来越远，即使div的尺寸相同，点在“宽”边上的距离也会越来越远，在窄端上的距离会越来越近。需要一个不同的参数方程才能使它们在椭圆周围均匀分布，所以这确实是一项艰巨的任务。我唯一的想法是，在这种情况下，我们将省略号分成x等分，其中x等于div的数量。所以我想，也许解决方案是，如果我把省略部分分成x*10等分，然后把divs分布成一个函数（比如sin（）函数），实际上在我的例子中，你不必担心省略的角度，它被设置为0。

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