Круговые элементы интерфейса при помощи HTML5, CSS, JS и SVG. Часть 1

Круговые элементы интерфейса при помощи HTML5, CSS, JS и SVG

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

Нужный нам элемент это input типа range:

<input type="range" min="0" max="100" value="15" id="utilslider">

…и SVG элемент, на который выводятся данные. Мы взяли этот пример у Lea Verou из ее статьи CSS Secrets:

<div id="readout">
    <svg viewBox="0 0 100 100">
        <circle r="25" cx="50" cy="50" id="pie" />
    </svg>
</div>

(С помощью div позиционируются все элементы, в том числе и SVG. CodePen демо).

Стилизуем круг

Периметр SVG круга равен 2πr, т.е. 2 × 3.14 × 25 или приблизительно 158. Зная это, из SVG можно сделать круг с помощью border-radius. Обводку сделать можно с помощью свойства stroke, а с помощью свойства stroke- dasharray мы будем показывать только ее часть:

#readout {
    position: relative;
}   
svg {
    transform: rotate(-90deg);
    color: #333;
    background: currentcolor;
    border-radius: 50%;
    width: 100%;
}
#pie {
    fill: currentcolor;
    stroke: hsl(0,0%,50%);
    stroke-width: 50;
    stroke-dasharray: 55 158; 
}

Обратите внимание, что для объявления SVG и элемента circle с помощью CSS переменной я использовал currentcolor. Свойство stroke-width – диаметр круга: все обводки в SVG 1.1 проходят точно через центр элемента path. Свойство border-radius «обрезает» внешний край обводки, а вращение делает так, что обводка превращается в сектор круга.
Задаем значение

Для отображения действий пользователя в виде счетчика мы добавим элементы label и output. Наша разметка станет такой:

<label for="utilslider">Task CPU Utilization</label>
    <div id="readout">
        <svg viewBox="0 0 100 100">
            <circle r="25" cx="50" cy="50" id="pie" />
        </svg>
    <output for="utilslider">15%</output>
</div>
<input type="range" min="0" max="100" value="15" id="utilslider">

Стили к этим элементам я не стал включать в статью, посмотреть их можно в демо CodePen. А наше внимание мы обратим на код JavaScript в нижней части страницы. В первую очередь найдем ссылки на нужные нам объекты и переменные:

var utilslider = document.getElementById("utilslider"),
circle = document.getElementById("pie"),
radius = parseInt(circle.getAttribute('r'), 2),
circumference = 2 * radius * Math.PI,
percentDisplay = document.querySelector("#readout output");

Мы не будем прописывать статичные значения радиуса и длины окружности в JS. Мы будем считывать значение радиуса (переводить значение из текстового типа в число с плавающей точкой) и вычислять длину окружности по этому значению.
Обратите внимание: хотя SVG и адаптивен, длина окружности будет оставаться одной и той же и не будет зависеть от размера окна, так как радиус SVG не меняется.

Чтобы правильно вычислять сектор элемента circle с текущим значением utilsider, необходимо вызывать определенную функцию. С помощью этой же функции будет задаваться сектор круга от значения utilsider:

utilslider.addEventListener("input", 
    function() { pieSlicer(); }
)
pieSlicer();

Сама функция pieSlicer:

function pieSlicer() {
    var percentValue = (utilslider.value / 100) * circumference;
    pie.style.strokeDasharray = percentValue + " " + circumference;
    percentDisplay.innerHTML = utilslider.value + "%";
}

Как менять цвета

По умолчанию цвет сектора круга всегда будет таким, какой был задан в CSS. Простейший способ менять его динамически это HSL. Красный будет задаваться так (0, 50%, 50%), насыщенность цвета задается средним значением. Если в нашей функции вместо насыщенности передавать значение utilslider:

pie.style.stroke = "hsl(0 ," + utilslider.value + "%, 50%)";

…цвет сектора будет меняться от черного до ярко красного с увеличением значения. Также можно менять цвет с увеличением значения, об этом я расскажу в следующей статье.

Tony Downey предложил использовать плавные переходы вместе с обводкой, тогда величина сектора будет изменяться по клику на элемент range моментально и не будет «перепрыгивать» на новое значение. CSS код:

#pie {
  transition:stroke-dasharray 2s;
}

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

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree