Selector de color HSV/HSL para dispositivos móviles-rueda de color reinventado

Vista prévia

Descripción

Un selector de color amigable para dispositivos móviles que le ayuda a elegir un color de una rueda de color y luego aplica el código de color HSV/HSL a un elemento que especifique.

Funcionamiento

Instale la rueda de color reinventado.

# NPM
$ npm install reinvented-color-wheel --save

import "reinvented-color-wheel/css/reinvented-color-wheel.min.css";
import ReinventedColorWheel from "reinvented-color-wheel";

O importar el JavaScript & CSS desde una CDN.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/reinvented-color-wheel.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Cree un elemento para mantener el selector de color.

<div id="example"></div>

Crea una nueva rueda de color reinventada.

new ReinventedColorWheel({


appendTo: document.getElementById('example')
})

Opciones posibles para personalizar la rueda de color reinventado.

new ReinventedColorWheel({


hsv: [0, 100, 100],


hsl: [0, 100, 50],


wheelDiameter: 200,


wheelThickness: 20,


handleDiameter: 16,


wheelReflectsSaturation: true,
})

Ejecute una función cuando cambie el color.

new ReinventedColorWheel({


onChange: function (color) {


// the received argument `color` is the ReinventedColorWheel instance itself.


// console.log("hsl:", color.hsl[0], color.hsl[1], color.hsl[2]);


// console.log("hsv:", color.hsv[0], color.hsv[1], color.hsv[2]);


},
})

Establezca el color manualmente.

setHSL(HSLCODE);
setHSV(HSVCODE);

Registro de cambios

v0.2.4 (03/15/2019)

• Perf: supervisar el evento ' pointermove ' sólo para la rueda de color, no para la ventana.

11/03/2018

• calcular el matiz a un lugar decimal, reducir el error de conversión (RGB < = > HSV)