Сегодня я поделюсь с вами реактивным компонентом динамической процентной круговой диаграммы, недавно разработанной в соответствии с потребностями бизнеса (сегодня она относительно простаивает).
Сначала я использовал CSS3, чтобы понять, что я не могу добиться этого эффекта, а затем я попытался использовать Canvas, но обнаружил, что он не подходит в половине случаев, и есть неясные проблемы, поэтому я сдался. Наконец решил использовать SVG!
Основная идея состоит в том, чтобы использовать команду дуги эллипса пути (A) для рисования сектора, а затем увеличивать или уменьшать дугу сектора в соответствии с приращением (значение в поле ввода).Поле ввода предназначено только для демонстрации, и фактически используются данные фонового интерфейса.
Структура HTML выглядит следующим образом:
Инструкции по эллиптической дуге SVG от :(CSDN)
| инструкция | А (абсолютное) а (относительное) |
|---|---|
| имя | эллиптическая дуга |
| параметр |
Код: RX RY X-AXIS-ROTITATION HARD-ARCE-FLAG FLAG FLOW-FLAG X Y rx ry- длины двух полуосей эллипса. x-axis-rotationугол поворота эллипса относительно системы координат в градусах, а не в радианах. large-arc-flagОтмечать ли на чертеже большую дугу (1) или маленькую дугу (0). sweep-flagМаркер рисуется по часовой стрелке (1) или против часовой стрелки (0). x y – координаты конечной точки дуги. |
| описывать | Нарисуйте дугу эллипса от текущей точки до точки (x, y). Размер и направление эллипса определяются параметрами (rx, ry) и вращения оси x. Параметр вращения оси x указывает общий эллипс относительно текущей системы координат Угол поворота. Координаты центра (cx, cy) эллипса вычисляются автоматически, чтобы удовлетворить другие параметрические ограничения. Флаг большой дуги и флаг развертки также используются для расчета и рисования дуги. |
Не думайте сначала об эффекте анимации, просто посмотрите, как нарисовать веер: (Сложнее сказать, просто расскажите построчно в комментариях)
где PI — константа, которую я определил перед компонентом:const PI = 3.1416
x1, y1, x2, y2, объявленные вышеприведенным кодом, представляют координаты начального и конечного ребер дуги, как показано на рисунке:
Таким образом, функция рисования формы веера написана~
Следующий шаг — заставить его двигаться! И гладкой, как шелк! Как это исправить? Конечно использоватьrequestAnimationFrame! Если вы еще этого не знаете, пожалуйста, перейдите ->Портал MDN
Затем просто вызовите animationSvg. Вы можете получить значение в радианах из поля ввода или получить расчет из данных в фоновом режиме. Обратите внимание, что его необходимо преобразовать из процентов в радианы:
const value = Number((this.input.value / 100) * PI * 2);
this.animationSvg(value);Этим достигается эффект GIF в начале статьи, который можно резюмировать следующим образом:
- Получить данные, увеличить или уменьшить, единица измерения - радианы;
- Выполнить анимацию requestAnimationFrame;
- Вычислить путь и визуализировать его в DOM;
- Повторяйте шаги со 2 по 3, пока не будет достигнут конец дуги.
Увидеть значит поверить, вы можете перейти сюда, чтобы посмотреть онлайн-ДЕМО:портал
Возможно, реализация кода не самая лаконичная, все великие боги, проходящие мимо, могут дать предложения~