Давайте посмотрим на функцию масштабирования chroma.js
Недавно я наткнулся на полезную библиотеку JavaScript под названием chroma.js. Chroma.js - это небольшая библиотека JavaScript с нулевой зависимостью для всех видов преобразования цветов и цветовых шкал.
С chroma.js можно делать много вещей, в том числе:
- Чтение цветов из широкого диапазона форматов
- Анализируйте цвета и управляйте ими
- Преобразование цветов в широкий спектр форматов
- Линейная интерполяция и интерполяция Безье в разных цветовых пространствах
В этой статье мы рассмотрим эту библиотеку, построив генератор цветовой шкалы с использованием HTML, CSS и JavaScript. Вот предварительный просмотр того, что мы будем строить.
Вы можете просмотреть проект вживую здесь или проверить код всего проекта в моем репозитории GitHub ниже.
Настройка нашего HTML
Давайте начнем с настройки нашего приложения. У нас будет три файла: index.html, styles.css и script.js.
Сначала мы подключим наши файлы styles.css и script.js, а также добавим CDN для chroma.js в наш HTML-файл. Добавьте эту строку кода в тег заголовка.
<link rel="stylesheet" href="styles.css">
И эти строки кода над закрывающим тегом тела.
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js"></script> <script src="script.js"></script>
Теперь давайте создадим тело нашего HTML-файла. В теге body у нас будет заголовок с тегом h1 для нашего заголовка. Оставаясь внутри нашего заголовка, мы создадим div, который будет содержать наши входные цвета. Здесь у нас будет два входа с типом цвета, и каждый вход будет иметь идентификатор. Под нашим заголовком у нас будет один тег div, который будет контейнером для отображения цветовых шкал. Наш HTML-файл должен выглядеть так, как показано ниже.
Добавление стилей с помощью CSS
Мы добавим в наше приложение некоторые базовые стили с помощью CSS. В нашем приложении мы используем flexbox для нашего макета и для функции наведения. Если вы не знакомы с flexbox, ознакомьтесь с приведенным ниже руководством от CSS-Tricks.
Вы можете взглянуть на изображение styles.css ниже или проверить мое репо, если хотите скопировать файл.
Функция масштабирования с помощью Chroma.js
В нашем приложении мы будем использовать функцию масштабирования из chroma.js для создания цветовой шкалы. Это функция, которая отображает числовые значения в цветовую палитру. Вы можете передать массив цветов в chroma.scale. Если передать более двух цветов, они будут распределены по градиенту.
chroma.scale([color1, color2]);
Мы также будем связывать другую функцию с именем scale.colors, которая принимает число в качестве аргумента. Эта функция берет это количество равноудаленных цветов из цветовой шкалы и возвращает массив цветов.
chroma.scale([color1, color2]).colors(6);
В нашем приложении мы будем использовать только функции chroma.scale и scale.colors. Однако вы можете воспользоваться множеством других полезных функций, включая scale.domain и scale.mode.
scale.domain позволяет вам изменить входной домен в соответствии с вашим вариантом использования. Вы также можете установить позиции для каждого цвета, если у вас более двух входов цвета.
scale.mode позволяет вам изменить цветовой режим, который вы хотите использовать. Иногда, когда вы смешиваете цвета, градиенты становятся темнее в центре. Я определенно не эксперт в этой области, но считаю, что это видео было полезным, чтобы объяснить, почему это происходит. На изображении ниже показаны некоторые эффекты цветовых градиентов при изменении режима.
Создание нашего файла JavaScript
Теперь, когда мы понимаем, как использовать функцию масштабирования цветности, давайте закончим наше приложение добавлением функций с помощью JavaScript. Сначала мы получим ссылку на наши входы цвета и наш контейнер цвета.
const colorOne = document.getElementById('color1');
const colorTwo = document.getElementById('color2');
const colorContainer = document.getElementById('container');
Затем давайте добавим слушателей событий на наши входы цвета, которые будут срабатывать при изменении входного цвета.
colorOne.addEventListener('change', () => {
generateColors(colorOne.value, colorTwo.value);
});
colorTwo.addEventListener('change', () => {
generateColors(colorOne.value, colorTwo.value);
});
Далее мы создадим функцию generateColors. Эта функция будет принимать входные значения цвета и генерировать цветовую шкалу с помощью chroma.js. Затем мы добавим эти цвета в наш цветной контейнер.
const generateColors = (color1, color2) => {
colorContainer.innerHTML = '';
const colorPalette = chroma.scale([color1, color2]).colors(6);
colorPalette.forEach(color => {
const colorItem = document.createElement('div');
colorItem.classList.add('container-item');
colorItem.style.background = color;
colorContainer.appendChild(colorItem);
});
};
Наконец, мы сначала вызовем функцию generateColors со значениями по умолчанию в наших входных данных.
generateColors(colorOne.value, colorTwo.value);
Ваш окончательный файл script.js должен выглядеть, как показано ниже.
Вот и все! Теперь ваше приложение должно быть завершено, и вы можете продолжать добавлять стили и функции по своему усмотрению.
Есть так много всего, что вы можете делать с цветами с помощью библиотеки chroma.js, я рекомендую проверить их документацию, чтобы узнать больше.
Спасибо за прочтение! Если вам понравилась эта статья, взгляните на статью ниже, где мы рассмотрели библиотеку Anime.js и создали анимацию отскока.
