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
Разбираемся в CSS
-
Anonymous
1714265523
Anonymous
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.
Подробнее здесь: [url]https://stackoverflow.com/questions/78395349/calculating-rotation-angle-of-each-path-on-a-svg-circle-chart[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия