Componente de selector de color HTML5 HSV basado en lienzo

Vista prévia

Descripción

Una biblioteca de JavaScript sencilla e independiente que se utiliza para representar a los selectores de color HSV basados en lienzo en el documento.

¿Cómo funciona?

Cargue la versión minimizada del selector de color de HTML5 en el documento.

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

Cree un elemento canvas de HTML5 en la Página Web.

<canvas id="picker"></canvas>

Adjunte el selector de color HTML5 a un campo de entrada.

<input id="color" value="#54aedb">

Inicializar el selector de color HTML5.

new KellyColorPicker({


place : 'picker',


 input : 'color'
});

Parámetros de configuración disponibles.

var method = 'quad';
var alpha = false;




// is alpha slider enabled
var drag = false;
var cursorAnimReady = true; // sets by requestAnimationFrame to limit FPS on events like mousemove etc. when draging

 var events = new Array();
var userEvents = new Array();

var canvasHelper = document.createElement("canvas");
var canvasHelperCtx = false; // used if needed to copy image data throw ctx.drawImage for save alpha channel
var rendered = false;



// is colorpicecker rendered (without side alpha bar and cursors, rendered image stores in canvasHelperData
var canvasHelperData = null; // rendered interface without cursors and without alpha slider [wheelBlockSize x wheelBlockSize]

var input = false;

// used by updateInput() function if not overloaded by user event
var inputColor = true;

 // update input color according to picker
var inputFormat = 'mixed'; // mixed | hex | rgba

var popup = new Object;

// popup block for input
popup.tag = false;



 // Dom element if popup is enabled
popup.margin = 6;




// margin from input in pixels

// container, or canvas element
var place = false;
var handler = this;

var basePadding = 2;

var padding;
var wheelBlockSize = 200;
var center;

// current color
var hsv;
var rgb;
var hex = '#000000';
var a = 1;

var wheel = new Object;
wheel.width = 18;
wheel.imageData = null; // rendered wheel image data
wheel.innerRadius;
wheel.startAngle = 0; // 150
wheel.outerRadius;
wheel.outerStrokeStyle = 'rgba(0,0,0,0.2)';
wheel.innerStrokeStyle = 'rgba(0,0,0,0.2)';
wheel.pos; // center point; wheel cursor \ hsv quad \ hsv triangle positioned relative that point

Registro de cambios

09/12/2018

• referencia de evento fija en la función getEventDot.