当切片不以角度 0 开始时，如何找到圆弧切片的质心？

Question

我试图找到饼图中每个切片的质心。假设圆心为原点，如何计算每个切片的质心x和y坐标？

我有每个切片的半径、起始角和结束角。

我知道当切片的起始角度为 0 时如何计算该切片的质心；答案是 here. 但这假设你有切片的角度 alpha，从 0 开始（JavaScript 假设通常被认为是 pi/2 的地方）。我想要这张照片中红色切片的质心的坐标：

。

假设红色切片的角度 alpha 为 1 弧度（为简单起见，startAngle = 6 和 endAngle = 5，这不准确但接近照片中的实际角度）和图表的半径是400px。使用公式，xbar = (2/3)(r/a)sin(a) = (2/3)(400/1)(.84147) = 224.39226px 这将是 ~225px 到 right 的原点，离质心的实际 x 坐标不远，因为公式假定切片的起始角度为 0。

此外，起点是 pi/2 的坐标而不是 0 可能会导致问题？我不确定。

如何找到质心的实际 x 坐标？

Answer 1

多亏了 Ben West 的评论，我才能确定答案。您必须围绕圆的中心点旋转该点 startAngle 弧度。

另请注意，如果使用 JavaScript，圆从 pi/2 开始并顺时针旋转，而不是像 sin 和 cos 函数那样逆时针旋转，因此您必须考虑到这一点。

代码：

computeCentroid(slice, chart) {
    const startAngle = slice.startAngle - (Math.PI / 2), endAngle = slice.endAngle - (Math.PI / 2);
    const alpha = endAngle - startAngle;
    const radius = chart.radius;

    // get coordinates of centroid if startAngle = 0
    const xbar = (2 / 3) * (radius / alpha) * Math.sin(alpha);
    const ybar = (-2 / 3) * (radius / alpha) * (Math.cos(alpha) - 1);

    // rotate coordinates about (0, 0) by startAngle
    const xCoord = xbar * Math.cos(startAngle) - ybar * Math.sin(startAngle);
    const yCoord = ybar * Math.cos(startAngle) + xbar * Math.sin(startAngle);

    return [xCoord, yCoord];
}

当切片不以角度 0 开始时，如何找到圆弧切片的质心？

How to find the centroid of an arc slice when the slice does not start at angle 0?

javascript

geometry

pie-chart