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

【问题标题】：How to find the centroid of an arc slice when the slice does not start at angle 0?当切片不是从角度 0 开始时，如何找到圆弧切片的质心？
【发布时间】：2018-06-29 23:56:10
【问题描述】：

我正在尝试在饼图中找到每个切片的质心。假设圆心为原点，如何计算每个切片质心的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，这将是 right 的原点，与质心的实际 x 坐标相去甚远，因为公式假定切片的起始角度为 0。

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

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

【问题讨论】：

取你找到的点并围绕圆心旋转起始角度
我该怎么做？
哎呀，找到this，一旦我得到它，我会弄清楚并发布我的完整答案。谢谢你，@BenWest！

标签： javascript geometry pie-chart

【解决方案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];
}

【讨论】：