如何将饼图标签对齐到矩形边框？求位置计算方案

问题背景 #

我用JavaScript绘制SVG，目前能让标签沿圆形路径对齐，但需要实现第二个版本：让标签位于矩形边缘，同时保持在饼图各扇区的中间位置，却算不出正确坐标，求帮忙。

• 当前效果：标签沿圆形路径对齐
• 期望效果：标签位于矩形边缘，且处于饼图各扇区中间（目前未完美对齐）

当前圆形路径标签的代码 #

// height/width = 包含圆形的容器尺寸
// celestialDirectionsDistanceToCenter = 到圆心的距离
const circleAngle = (2 * Math.PI) / 24;
CELESTIAL_DIRECTIONS.forEach((currentDirection, index) => {
    const newIndex = index + 2;

    elemAttrs[currentDirection] = {
        transform: `rotate(${360 - newAngle}, ${
            Math.cos(circleAngle * newIndex) *
                (width * 0.5 * celestialDirectionsDistanceToCenter) +
            width * 0.5
        }, ${
            Math.sin(circleAngle * newIndex) *
                (height * 0.5 * celestialDirectionsDistanceToCenter) +
            height * 0.5
        })`,
        x:
            Math.cos(circleAngle * newIndex) *
                (width * 0.5 * celestialDirectionsDistanceToCenter) +
            width * 0.5,
        y:
            Math.sin(circleAngle * newIndex) *
                (height * 0.5 * celestialDirectionsDistanceToCenter) +
            height * 0.5,
    };
        
});

针对椭圆/圆形/正方形/矩形的坐标计算代码（待完善） #

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

解决方案：修正矩形边缘的坐标计算逻辑 #

要让标签精准落在矩形边缘且处于扇区中间，关键是针对矩形的四个边，根据当前扇区的角度区间直接计算对应边上的坐标，而非用椭圆公式近似。

核心思路 #

矩形的四个边可按角度分成四个区间：

1. 右边缘：-π/4 < θ < π/4
2. 上边缘：π/4 < θ < 3π/4
3. 左边缘：3π/4 < θ < 5π/4
4. 下边缘：5π/4 < θ < 7π/4

针对每个区间，直接计算对应边上的坐标：

• 右边缘：x = 容器宽度，y = 中心y + 中心x * tan(θ)
• 上边缘：y = 0，x = 中心x + 中心y * cot(θ)
• 左边缘：x = 0，y = 中心y - 中心x * tan(θ)
• 下边缘：y = 容器高度，x = 中心x - 中心y * cot(θ)

修正后的代码 #

// 针对矩形(R)类型单独计算标签位置
function getLabelPositionForRect(width, height, currentAngle) {
    const centerX = width * 0.5;
    const centerY = height * 0.5;
    let x, y;
    // 把角度归一到0~2π范围，避免跨边界计算错误
    const normalizedAngle = ((currentAngle % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI);

    if (normalizedAngle < Math.PI / 4 || normalizedAngle > 7 * Math.PI / 4) {
        // 右边缘
        x = width;
        y = centerY + centerX * Math.tan(normalizedAngle);
    } else if (normalizedAngle < 3 * Math.PI / 4) {
        // 上边缘
        y = 0;
        x = centerX - centerY / Math.tan(normalizedAngle);
    } else if (normalizedAngle < 5 * Math.PI / 4) {
        // 左边缘
        x = 0;
        y = centerY - centerX * Math.tan(normalizedAngle - Math.PI);
    } else {
        // 下边缘
        y = height;
        x = centerX + centerY / Math.tan(normalizedAngle - Math.PI);
    }

    return { x, y };
}

// 在循环中调用函数，兼容原有图形类型逻辑
CELESTIAL_DIRECTIONS.forEach((currentDirection, index) => {
    const circleAngle = (2 * Math.PI) / 24;
    const newIndex = index + 2;
    const currentAngle = circleAngle * newIndex;
    let pos;

    if (pieChartKind === 'R') {
        pos = getLabelPositionForRect(width, height, currentAngle);
    } else {
        // 保留原有的圆形/椭圆/正方形计算逻辑
        const a = width * 0.5;
        const b = height * 0.5;
        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;

        pos = {
            x: factor * ro * Math.cos(currentAngle) * a + width * 0.5,
            y: factor * ro * Math.sin(currentAngle) * b + height * 0.5,
        };
    }

    elemAttrs[currentDirection] = {
        transform: `rotate(${360 - (currentAngle * 180 / Math.PI)}, ${pos.x}, ${pos.y})`,
        x: pos.x,
        y: pos.y,
    };
});

说明 #

• 角度归一化：确保角度在0到2π范围内，避免跨边界的计算错误
• 分边计算：直接针对矩形四条边的几何特性计算坐标，比椭圆近似更精准
• 兼容原有逻辑：保留了对圆形、椭圆、正方形的支持，只针对矩形类型替换计算方式

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