如何让椭圆角度分割线的端点对齐矩形边界？

我编写了一段代码，用于绘制带有等角度分割的圆形、正方形、椭圆以及矩形。目前圆形、正方形和椭圆的绘制均正常，但矩形模式下，分割线的端点总是落在椭圆边界上，我需要让这些端点落在矩形边界上。直接复用正方形的代码无法实现，会导致线条拉伸且角度出现错误。

下图中橙色线条是矩形模式（"R"）下的理想分割线状态：

当前获取各形状角度对应点的代码 #

该代码会被循环调用以获取所有点，并在坐标间绘制线条：

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

解决方案：单独处理矩形模式的坐标计算 #

矩形的边界由x轴方向的±a和y轴方向的±b构成，对于给定角度currentAngle，需要直接计算从原点出发的射线与矩形的交点，无需复用椭圆或正方形的计算逻辑。

核心逻辑：

1. 计算角度的正切值tanθ = Math.tan(currentAngle)
2. 根据角度所在象限，判断射线先触碰矩形的x边界还是y边界：
   • 当|tanθ| ≤ b/a时，射线先碰到左右边界（x=±a），此时y = ±a * tanθ
   • 当|tanθ| > b/a时，射线先碰到上下边界（y=±b），此时x = ±b / tanθ
3. 最后加上画布偏移量（width/2, height/2）得到最终坐标。

修改后的代码

const a = width * 0.5;
const b = height * 0.5;
let x;
let y;

if (pieChartKind === 'R') {
    // 矩形模式：计算射线与矩形的交点
    const tanAngle = Math.tan(currentAngle);
    const absTan = Math.abs(tanAngle);
    const ratio = b / a;

    if (absTan <= ratio) {
        // 先碰到左右边界
        x = Math.cos(currentAngle) > 0 ? a : -a;
        y = x * tanAngle;
    } else {
        // 先碰到上下边界
        y = Math.sin(currentAngle) > 0 ? b : -b;
        x = y / tanAngle;
    }
    // 转换为画布坐标
    x += width * 0.5;
    y += height * 0.5;
} else {
    // 保留圆形、正方形、椭圆的原有计算逻辑
    const ro =
        pieChartKind === 'E'
            ? (a * b) /
              Math.sqrt((b * Math.cos(currentAngle)) ** 2 + (a * Math.sin(currentAngle)) ** 2)
            : 1;

    const factor =
        pieChartKind === 'S'
            ? 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 };

说明

• 矩形的交点计算直接基于射线与矩形边的几何相交逻辑，完全独立于椭圆的计算，避免了椭圆逻辑导致的端点偏移问题。
• 分情况判断确保交点始终落在矩形的四条边上，不会出现超出边界的情况。

内容的提问来源于stack exchange，提问作者somsam43