Question

似乎我的数学对于我目前的任务来说还不够，所以这就是为什么我想请求帮助。主要的事情是解决，我显示elipsis形状的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');
});
}

提前谢谢。

Answer 1

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

你可以将它与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);

使用jQuery绘制椭圆形的div

2 个答案: