I have the following code to draw circles, squares, ellipses and (wrong) rectangles with equal angle sections. Circles, squares and ellipses work fine, but what i want to achieve with the rectangle code is that the end of the sections lines don't end on the border of the ellipsis but on the border of the rectangle. Using the same code as I am using for the square isn't working because the lines will get stretched and the angles are wrong afterwards.
The ellipsis I am drawing looks like this, the orange lines show how the lines should be when I select the rectangle version ("R"):
ellipsis with rectangle lines:
Code to get points for the current angle for the ellipsis, circle, square and rectangle
This will be called in a loop to get all points and draw lines between the coordinates.
const a = width * 0.5;
const b = height * 0.5;
let x;
let y;
const ro =
pieChartKind === 'E' || pieChartKind === 'R'
? (a * b) /
Math.sqrt((b * Math.cos(currentAngle)) ** 2 + (a * Math.sin(currentAngle)) ** 2)
: 1;
const factor =
pieChartKind === 'S' || pieChartKind === 'R'
? Math.sqrt(1.0) /
Math.max(
Math.abs(ro * Math.cos(currentAngle)),
Math.abs(ro * Math.sin(currentAngle)),
)
: 1;
if (pieChartKind === 'E') {
x = factor * ro * Math.cos(currentAngle) + width * 0.5;
y = factor * ro * Math.sin(currentAngle) + height * 0.5;
} else {
x = factor * ro * Math.cos(currentAngle) * a + width * 0.5;
y = factor * ro * Math.sin(currentAngle) * b + height * 0.5;
}
return { x, y };
For rectangle you can use this approach:
if (abs(a*cos(currentAngle)) >= abs(b*sin(currentAngle))) {
if (cos(currentAngle) > 0) {
x = 2*a
y = b + a * tan(currentAngle)
}
else {
x = 0
y = b - a * tan(currentAngle)
}
else {
if (sin(currentAngle) > 0) {
x = a + b / tan(currentAngle)
y = 0
}
else {
x = a - b / tan(currentAngle)
y = 2*b
}
}
Logic here: radius-vector intersects vertical edge for angles close to X-axis, and horizontal edge for angles close to Y-axis.
Example implemented in Delphi, ellipse points ex, ey
and rectangle points rx, ry
are calculated relative to center.
var
i, cx, cy, ex, ey, rx, ry, a, b: Integer;
an: Double;
begin
cx := 300; cy := 200; a := 200; b := 150;
for i := 0 to 31 do begin
an := i * 2 * Pi / 32;
ex := Round(a * Cos(an));
ey := Round(b * Sin(an));
Canvas.Pen.Color := clBlue;
Canvas.Pen.Width := 1;
Canvas.MoveTo(cx, cy);
Canvas.LineTo(cx + ex, cy + ey);
if abs(a * Cos(an)) >= abs(b * Sin(an)) then begin
if Cos(an) > 0 then begin
rx := a;
ry := Round(b * tan(an));
end else begin
rx := -a;
ry := -Round(b * tan(an));
end;
end else begin
if Sin(an) >= 0 then begin
ry := b;
rx := Round(a / tan(an));
end else begin
ry := -b;
rx := -Round(a / tan(an));
end;
end;
Canvas.Pen.Color := clRed;
Canvas.Pen.Width := 2;
Canvas.LineTo(cx + rx, cy + ry);
end;