Elegante HTML5/JavaScript Color Picker-IRO. js

Tiempo de ejecución: 30 minutos. Empezar

Autor: jaames
Views Total: 5,693
Sitio oficial: Ir a la web
Actualizado: April 14, 2019
Licencia: MIT

Vista prévia

Elegante HTML5/JavaScript Color Picker-IRO. js

Descripción

IRO. js es un elegante selector de color basado en HSV de JavaScript para generar una bonita interfaz de usuario de Canvas basado en la rueda de color con soporte táctil.

También proporciona métodos de API que le permiten establecer, actualizar, convertir entre colores.

Instalación

# NPM
$ npm install @jaames/iro --save

Funcionamiento

Importe el módulo.

import iro from "@jaames/iro";

O agregue la biblioteca de JavaScript principal a la página HTML:

<script src="iro.min.js"></script>

Cree un elemento de marcador de posición para el selector de color.

<div class="wheel" id="colorWheelDemo"></div>

Genere un selector de color básico dentro del contenedor ' colorWheelDemo '.

var colorWheel = iro.ColorPicker("#colorWheelDemo", {


// options here
});

Opciones posibles para personalizar el selector de color.

var colorWheel = iro.ColorPicker("#colorWheelDemo", {


width: 300,


color: '#fff',


padding: 6,


borderWidth: 0,


borderColor: '#fff',


handleRadius: 8,


handleSvg: null, // Custom handle SVG


handleOrigin: {



x: 0,



y: 0


},


wheelLightness: true,


sliderHeight: undefined,


sliderMargin: 12,


display: 'block', // CSS display value


layout: {} // Custom Layouts
});

Event handlers available.

colorWheel.on('color:change', function(color, changes){

// when the color has changed, the callback gets passed the color object and an object providing which color channels (out of H, S, V) have changed.
})

colorWheel.on('color:init', function(color){

// same as color:change, but only fired once with the initial color value provided to the color picker.
})

colorWheel.on('input:change', function(color, changes){

// Similar to color:change, except this is only fired whenever the color is changed with direct user input.
 })

colorWheel.on('input:start', function(color){

// when the user starts interacting with the color picker, the callback gets passed the color object
})

colorWheel.on('input:end', function(color){

// when the user has finished interacting with the color picker, the callback gets passed the color object
})

colorWheel.on('mount', function(color){

// fired once the color picker UI has been mounted into the DOM
})

Métodos de API útiles.

// sets color
color.set(color);

// sets color chanel
color.setChannel('rgb', 'r', 255);

// clones color
color.clone(color);

// converts HSV to RGB
color.hsvToRgb(HSV);

// converts RGB to HSV
color.rgbToHsv(RGB);

// converts HSV to HSL
color.hsvToHsl(HSV);

// converts HSL to HSV
color.hslToHsv(HSL);

Registro de cambios

v4.3.3 (04/14/2019)

  • Corrige un problema que provocaba que el componente alfa no se analizaba correctamente desde las cadenas RGBA y HSLA.

v4.3.2 (04/12/2019)

  • Hotfix: Input: Change no estaba disparando

v4.3.1 (04/09/2019)

  • Corrige algunos problemas relacionados con el modo en que se gestionó internamente el color alfa/transparencia, lo que causaba problemas con IRO-Transparency-plugin. Establecer un color en un valor sin un componente alfa (por ejemplo, hexString = "#fff") ahora establecerá el valor alfa en 1, y el componente alfa dejará de ser indefinido al usar la nueva IRO. Color.

v4.3.0 (04/08/2019)

  • Entrada añadida: cambio – igual que color: cambiar, pero sólo se activa cuando el color se ha establecido con la entrada del usuario
  • Color añadido: init – igual que el color: cambiar, pero disparado una vez con el valor de color inicial
  • métodos de encendido y apagado ahora pueden tomar matrices de eventTypes, así como cadenas
  • Nuevo método deferredEmit (sólo debe ser utilizado por los plugins)
  • El evento color: Change ya no se activa con el valor de color inicial, ya que esto estaba atrapando a algunas personas. Asegúrese de escuchar tanto el color: init y color: cambiar los eventos con el mismo agente de escucha

v4.2.2 (03/27/2019)

  • Se asegura de que la entrada: iniciar incendios antes de color: actualizar y que entrada: finalizar fuegos después de color: actualizar.

v4.2.1 (03/19/2019)

  • Corrige el control de eventos DOM del selector de color en IE11

v4.2.0 (03/12/2019)

  • La API del plugin interno cambia para permitir que los plugins Personen el tipo de slider
  • Añade compatibilidad con los reguladores de matiz y saturación

v4.0.3 (03/07/2019)

  • agregar el deslizador getValueFromPoint para hacer el desarrollo del plugin un poco más fácil

v4.0.2 (03/02/2019)

  • color de fuego: cambiar si se registró antes de montar el selector de color

v4.0.0 (02/23/2019)

  • Los identificadores SVG personalizados
  • Las opciones de configuración de diseño personalizadas
  • Actualizado plugin API
  • Las pruebas de código
  • Codebase reescrito, ahora es mucho más limpio
  • Los componentes del selector de color ahora se construyen mediante preact
  • Reescrito documentaciones y README, que se centran enormemente en hacer las cosas más fáciles de seguir

02/02/2019

  • v3.5.6: hotfix for svg url generation in older iOS webviews

01/28/2019

  • v3.5.5: hotfix for hsl string parsing bug

12/23/2018

  • v3.5.4: hotfix for black output on mobile and desktop Safari

10/02/2018

  • v3.5.3: Fixed small issue with parent container size

09/24/2018

  • v3.5.2: Improve workaround for broken gradient URLs in Safari

08/17/2018

  • v3.5.0: Rewritten API classes using the es6 syntax

08/12/2018

  • v3.4.3: fix touch scrolling intervention in chrome

08/08/2018

  • v3.4.2: Fixes a warning caused by some recent Chrome changes

08/02/2018

  • v3.4.1: Fixed rounding issues when converting between color models, particularly when converting certain colors from RGB hex -> HSL -> RGB hex.

Te puede interesar: