Добавлено интересное знание css conic-gradient + компонент круговой диаграммы

Эта статья была написана членом командыBingLee1994Ему разрешено исключительное использование Tuya Front-end, включая, помимо прочего, редактирование, пометку оригинальности и другие права.

Вы чувствуете себя так: вы можете использовать несколько строкcssРисуй, не оглядывайсяsvg

Мы знакомы с линейным градиентом и коническим градиентом, а сегодня представляем еще одного партнера.conic-gradientКонический градиент.

совместимость

Основные современные браузеры совместимы.

css

Глоссарий

застой цвета

Точка застоя цвета состоит из цвета и положения, разделенных пробелами, как показано на следующем рисунке:Видно, что фон меняется с зеленого → красный → синий, а кружок, управляющий цветом, является точкой застоя цвета.На этом рисунке зеленый и синий находятся в голове и хвосте соответственно, а красный – в 25% Тогда красная точка торможения выражается как:red 25%, не нужно писать положение в начале и в конце.

направление и центр

На приведенном выше рисунке мы явно видим, что градиент направлен вправо, тогда мы можем указать направление градиента как любой угол, как показано ниже.Особый конусообразный градиент и радиационный градиент также могут задавать центральную точку, а радиус также может задавать радиус, эллиптический прототип и т.п.

`conic-gradient`

Итак, перейдем к делу, что такое конический градиент (конический градиент)? Как следует из названия, см. рисунокЯ нашел это?颜色绕着中心点вращается вокруг

грамматика

backgrouns-image: conic-gradient([ 角度 [at 位置] ], 颜色驻点1, 颜色驻点2, 颜色驻点...)0
В дополнение к проценту положение точки застоя цвета также может использовать обозначение угла.

попробуй

Грамматика выглядит немного длинной, не бойтесь, давайте напишемcssПопробуйте эффект:

div {
  width: 200px;
  height: 200px;
  background-image: conic-gradient(orange, blue 50%, purple)
}

Рендеринг выглядит следующим образом: сделайте круг вокруг центра, начиная от оранжевого до 50% до синего, затем от синего до 360° до фиолетового, это так просто!

Тогда для вышеуказанных 50% также можно использовать обозначение угла:conic-gradient(orange, blue 180deg, purple), в частности, можно указать два угла, представляющих угловую область, покрываемую цветом, напримерconic-gradient(orange, blue 180deg 240deg, purple).

Начните рисовать круговую диаграмму

Как это можно понять без практического применения? В этой статье мы используем обычную круговую диаграмму в качестве примера практического применения конусообразного градиента.

Как показано ниже: на оранжевую область приходится 30%.

В чем разница?

В отличие от этого, в чем разница между нашим градиентом выше и этой круговой диаграммой?
Да, нашел? Соединение между фоном круга и оранжевым гребешком (ниже мы будем называть его прогрессом) — жесткое, а не градиентное.Как это сделать?不要着急，让我们先把渐变画出来：

div {
  width: 200px;
  height: 200px;
  background-image: conic-gradient(orange, purple 30%)
}

Затвердевание стыка цветов

Увы, мы были приятно удивлены, обнаружив, что при 0° и 360° в начале вместо градиента идет жесткая линия от оранжевого к фиолетовому, ведь 0° = 360°,Если два цвета появляются под одним и тем же углом, то расстояние между двумя цветами равно 0. Другими словами, длина пространства, оставленного для градиента от оранжевого к фиолетовому, равна 0. Естественно, градиента нет, связь становится жесткой. , и цвет меняется напрямую..

Знайте эту истину, мы можем легко нарисовать круговую диаграмму выше, нужно только добавить две позиции 30% вышеупомянутой цветной застой, поэтому два из них будут напрямую переход.

div {
  width: 200px;
  height: 200px;
  background-image: conic-gradient(orange 30%, purple 30%);
  /*  30%的位置设置两个驻点橙色和紫色，那么在这个位置直接硬性过渡而无渐变 */
}

border-radius, Так легко!

Перемещение пирога

Мы должны инкапсулировать такую интересную вещь в компонент, чтобы использовать реальную сцену.Выше мы легко нарисовали круговую диаграмму 30%.Также круговую диаграмму можно перемещать, изменяя процент, поэтому давайте просто напишем демонстрационное управление круговой диаграммой, мы управляем им через ползунок!

Вы можете напрямую скопировать следующий HTML-код для практики

<body>
  <style>
    body {
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    #pie-chart {
      width: 200px;
      height: 200px;
      border-radius: 100px;
      background-image: conic-gradient(orange 0%, purple 0%);
      margin-bottom: 24px;
    }
  </style>

  <div id="pie-chart"></div>
  <input
    id="slider"
    type="range"
    value="0"
    max="100"
    min="0"
    step="10"
  />

  <script type="text/javascript">
    // js代码写这里
  </script>
</body>

добавить событие слайдера

В этом примере значение ползунка равно0 ~ 100, соответствующий положению точка застой цвета, добавив слайдерinputМероприятие для контроля процента круговой диаграммы:

<script type="text/javascript">
    const elPieChart = document.getElementById('pie-chart')
    const elSlider = document.getElementById('slider')

    elSlider.oninput = function updateChart() {
      const { value } = elSlider
      //将滑块value转换为驻点位置
      elPieChart.style.backgroundImage = `conic-gradient(orange ${value}%, purple ${value}%)`
    }
  </script>

Видите ли, с помощью всего нескольких строк кода круговая диаграмма может двигаться 😊! 230c6ade-b5fe-47dd-813d-10ce571a7991-屏幕录制2021-06-05 上午10.43.44.gif

Компоненты могут быть настроены

Фиолетовый торт выше может не подойти вам по вкусу, давайте изменим цвет в коде js, мы определим две переменные, цвет фона, цвет прогресса и, наконец, изменимcssПросто фон:

<script type="text/javascript">
    // 自定义颜色
    const chartColor = '#C6E9FF'
    const chartProgressColor = '#4589EF'
    
    const elPieChart = document.getElementById('pie-chart')
    const elSlider = document.getElementById('slider')

   // 首次渲染设置颜色
    elPieChart.style.backgroundImage = `conic-gradient(${chartProgressColor} 0%, ${chartColor} 0%)`

    elSlider.oninput = function updateChart() {
      const { value } = elSlider
      //更改饼图进度
      elPieChart.style.backgroundImage = `conic-gradient(${chartProgressColor} ${value}%, ${chartColor} ${value}%)`
    }
  </script>

Непрерывная оптимизация

Как вы думаете, я пишу вам в конце? Давайте вернемся и посмотрим на код, только увеличил спрос на цвет,jsКод начинает становиться действительно уродливым, в основном вelPieChart.style.backgroundImage = `conic-gradient(${chartProgressColor} ${value * 100}%, ${chartColor} ${value * 100}%)

Этот беспорядок кода очень ослепителен, потому что:

этоcssСтруны вонючие длинные.
существуетjsсоединениеcssСтрока, потому что нет подсказок кода, очень легко ошибиться в середине того, что мало пробела пунктуации, отлаживать отвратительно.
Сегодня пишу, могу понять, несколько дней смотрю, не читал, ремонтопригодности нет!

Если вы сталкиваетесь с подобными неприятностями в повседневной разработке компонентов, хорошая новость:Это типичное использованиеcssРазличные сценарии применения,Учебный портал.

Пригодность кода очень важна во всем проекте, не игнорируйте прогресс или ленивый.

похудение с помощью переменных css

Теперь давайте остановимся на всех вещах, связанных со всеми стилями.cssКод, в этом случае два цветных круговой диаграммы и график, то соответствующие, мы хотим разоблачать соответствующуюcssПеременные пустьjsработать. Да,cssКод должен просто остатьсяcssВнутри не выходите, чтобы присоединиться к веселью.

изменить вышеуказанноеcssКод выглядит следующим образом, определение должно быть выставленоjsпеременные и присвоить начальные значения:

#pie-chart {
  /* 声明变量并初始化 */
  --chartColor: orange; /* 背景色 */
  --chartProgressColor: purple; /* 进度色 */
  --chartProgress: 0%; /* 进度 */

  width: 200px;
  height: 200px;
  border-radius: 100px;
  /* 使用变量，（有点模板的意思） */
  background-image: conic-gradient(
    var(--chartProgressColor) var(--chartProgress), 
    var(--chartColor) var(--chartProgress)
  );
  margin-bottom: 24px;
}

затем вjsдействовать напрямуюcssПеременная,API-порт

<script type="text/javascript">
    // 自定义颜色
    const chartColor = '#C6E9FF'
    const chartProgressColor = '#4589EF'
    
    const elPieChart = document.getElementById('pie-chart')
    const { style } = elPieChart
    const elSlider = document.getElementById('slider')
    
     // 首次渲染设置颜色
    style.setProperty('--chartColor', chartColor)
    style.setProperty('--chartProgressColor', chartProgressColor)

    elSlider.oninput = function updateChart() {
      const { value } = elSlider
      //更改饼图进度
      style.setProperty('--chartColor', chartColor)
      style.setProperty('--chartProgressColor', chartProgressColor)
      style.setProperty('--chartProgress', `${value}%`)
    }
  </script>

Теперь мы используем лучшую, более читаемую переменную вместо традиционногоcssобъединенные строки, оптимизированныеjsкод большеjs.

Вы можете продолжать рефакторировать так, как вам нравится, то вышеуказанная операцияcssПеременная часть действительно может быть переоптимизирована, а классы инструментов могут быть написаны, но в любом случае я от нее окончательно избавилсяcss.

Представьте, если бы наш компонентdomИерархия очень глубокая, и найти узлы слой за слоем и стилизовать проникновение по старому дурацкому методу будет кошмаром.cssПеременная, просто сосредоточиться на самих переменных, без учетаdomуровень, и разработчики могут поддерживать его лучше, а также пользователям удобно проходитьcss hackСредства для настройки стиля, я надеюсь, вы сможете добраться до этого момента.

больше сцен

В дополнение к круговым диаграммам круговые индикаторы выполнения, анимация загрузки, маски и т. д. также являются сценариями использования конических градиентов, так что дайте волю своему воображению.

Если вам понравилась эта статья, не забудьте трижды поддержать ее 😙