对齐矩形边框上的标签

Question

我有以下 SVG 我正在使用下面的 javasript 代码进行绘制。 它将在圆形路线上对齐标签。 我想要第二个版本，其中标签将成为矩形的边缘，但仍位于圆形饼图的每个部分的中间。 我无法弄清楚如何计算职位，有人可以帮忙吗？

当前SVG

当前代码：

// height/width = size of the element containing the circle
// celestialDirectionsDistanceToCenter = distance to the center of the circle
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,
    };
        
});

想要的结果 SVG - 不完全对齐

Answer 1

尝试通过较大的分量对坐标的正弦部分进行归一化。

const factor = Math.sqrt(2.0) / Math.max(
    Math.abs(Math.cos(circleAngle * newIndex)), 
    Math.abs(Math.sin(circleAngle * newIndex))
)

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