Search code examples
javascriptmathrectanglesellipsis

Align end of lines of ellipse on top of rectangle border


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:

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

Solution

  • 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.

    enter image description here

    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;