计算svg圆形图表上每条路径的旋转角度

Question

https://jsfiddle.net/p4d57e8x/3/

const getArcPath = (start, end, innerRadius, outerRadius) => {
    const startAngle = start * Math.PI * 2;
    const endAngle = end * Math.PI * 2;
    const x1 = innerRadius * Math.sin(startAngle);
    const y1 = innerRadius * -Math.cos(startAngle);
    const x2 = outerRadius * Math.sin(startAngle);
    const y2 = outerRadius * -Math.cos(startAngle);
    const x3 = outerRadius * Math.sin(endAngle);
    const y3 = outerRadius * -Math.cos(endAngle);
    const x4 = innerRadius * Math.sin(endAngle);
    const y4 = innerRadius * -Math.cos(endAngle);
    const bigArc = end - start >= 0.5;
    const outerFlags = bigArc ? '1 1 1' : '0 0 1';
    const innerFlags = bigArc ? '1 1 0' : '1 0 0';
    return `M ${x1},${y1} L ${x2},${y2} A ${outerRadius} ${outerRadius} ${outerFlags} ${x3},${y3} 
        L ${x4},${y4} A ${innerRadius} ${innerRadius} ${innerFlags} ${x1},${y1} Z`;
};

这是路径本身的代码，以及它们创建一个圆圈的所有路径。

我不知道如何获得圆圈中每条路径的旋转角度（比如说有红色，绿色，蓝色，紫色），我已经尝试了很多东西，但这似乎更像是一个数学问题。

我尝试了一堆我发现的随机代码，例如这个

const getRotationAngle = (start, end) => {
    const startAngle = start * 360;
    const endAngle = end * 360; 
    return (startAngle + endAngle) / 2;
};
``` but it doesn't work of course because it's just gibberish for me and I have no idea what I even need to calculate to get the angle.

Answer 1

您的 JSFiddle 引用了 44 KB React 解决方案；有一个 999 Bytes Web 组件：

我为此写了一篇开发帖子

<script src="https://pie-meister.github.io/PieMeister.min.js"></script>

<pie-chart stroke-width="120" pull="-150" stroke="blue,purple,red,green">
    <style>
      text {
        font-size: 4em;
        text-anchor: middle;
        fill:beige
      }
    </style>
    <slice size="100"></slice>
    <slice size="200"></slice>
    <slice size="300"></slice>
    <slice size="150"></slice>
  </pie-chart>