Draw divs in elliptical shape with jQuery
It seems that my math is not enough for my current problem, so I would like to ask for help. Mainly solved, I am showing divs in elipsis shape, but I cant figure out how to take care of the div's dimension. The current solution works for shapes with equal sides, but my divs are different, their width is greater than their height.
The current function looks 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 where the important X and Y coordinates are being output
jQuery(this).css('margin-top', Y + 'px');
jQuery(this).css('margin-left', X + 'px');
});
}
Thanks in advance.
+3
source to share
2 answers
I was able to get your code to work with this (it's needed for a completely 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 where the important X and Y coordinates are being output
$(this).css('top', Y + 'px');
$(this).css('left', X + 'px');
});
};
Sorry for the refactorings, most of which are personal preference. The CSS that makes these width and height constraints (in my case):
.ellipsemarker {
background-color: #fff;
border: #e8e8e8 2px solid;
width: 15px;
height: 10px;
position: absolute;
}
Note the position: absolute, as suggested by another poster.
The additional calling code in my case was 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);
0
source to share