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.
Подробнее здесь: https://stackoverflow.com/questions/783 ... rcle-chart
Расчет угла поворота каждого пути на круговой диаграмме SVG ⇐ CSS
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение