Раскрасьте свое приложение с помощью этой мощной крошечной библиотеки JavaScript!
Многие разработчики разрабатывают цветовые коды и масштабируют их с помощью CSS, выбирая цвет из какой-либо цветовой палитры в Интернете. Однако это не всеми любимый инструмент. Хорошая новость в том, что у нас есть небольшая библиотека Chroma.js, которая может сильно помочь в создании цветовой шкалы в коде JavaScript. Это означает, что вы можете напрямую подключить его к своей платформе JavaScript!
Давайте начнем!
Установить
В своем веб-приложении вы можете использовать ссылку из CDNJS в своем HTML-документе.
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js" integrity="sha512-yocoLferfPbcwpCMr8v/B0AB4SWpJlouBwgE0D3ZHaiP1nuu5djZclFEIj9znuqghaZ3tdCMRrreLoM8km+jIQ==" crossorigin="anonymous"></script>
Или вы также можете установить его с помощью NPM.
$ npm install chroma-js
Пример использования
Вы можете просто создать цветовую шкалу в своем коде JavaScript с помощью функции chroma.scale([<color1>,<color2>, ... , <color n>]), которая создаст цветовую шкалу между цветами, которые вы назначаете.
Например, вы можете создать цветовую шкалу от желтого до красного с помощью следующего скрипта:
var color_scale = chroma.scale([‘yellow’, ‘red’]);
Затем вы можете получить доступ к цвету в RGB или HEX-коде с помощью
color_scale(0).rgb() // [255, 255, 0] color_scale(0.1).rgb() // [255, 230, 0] color_scale(0.2).rgb() // [255, 204, 0] color_scale(0.3).rgb() // [255, 179, 0] ... color_scale(1.0).rgb() // [255, 0, 0] =================================== color_scale(0).hex() // "#ffff00" color_scale(0.1).hex() // "#ffe600" color_scale(0.2).hex() // "#ffcc00" color_scale(0.3).hex() // "#ffb300" ... color_scale(1.0).hex() // "#ff0000"
Есть еще много вариантов, которые можно сделать с помощью цветовой шкалы, например, цветовая шкала на основе ColorBrewer. Смешивание нескольких цветовых кодов.
Вот еще несколько примеров:
chroma.scale('Spectral');
chroma.scale('RdPu');
chroma.scale('RdPu').domain([1,0]); // reverse color scales
Вот и все!
Если вам нравится этот инструмент, вы можете найти более сложные руководства на https://gka.github.io/chroma.js/, если вам нужно комбинировать манипуляции с цветом в методах масштабирования. В целом, я надеюсь, что вам понравилась эта статья, и вы сможете применить этот инструмент в своем приложении или проекте.
Будьте безопасны и здоровы! Удачи кодированию!
Спасибо за чтение. 👋 😄
