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