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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Метки:

Похожие статьи:

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