Canvas Based HTML5 HSV Color Picker Component

Category: Color , Javascript | June 10, 2020
Author: NC22
Views Total: 953 views
Official Page: Go to website
Last Update: June 10, 2020
License: MIT

Preview:

Canvas Based HTML5 HSV Color Picker Component

Description:

A simple and standalone JavaScript library used to render canvas based, mobile-friendly HSV color pickers in the document.

Basic usage:

Load the minified version of the HTML5 Color Picker in the document.

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

Create an html5 canvas element on the webpage.

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

Attach the HTML5 color picker to an input field.

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

Initialize the HTML5 color picker and done.

new KellyColorPicker({
    place : 'picker', 
    input : 'color'
});

More configurations to customize the color picker.

new KellyColorPicker({

    // canvas size  
    size: 200, 

    // initial color
    color: '#ffffff',

    // or 'quad'
    method: 'triangle',

    // applies theselected color to the background of the input
    inputColor: true,

    // hex or rgba or mixed
    inputFormat: 'mixed',

    // from 0 to 1
    alpha: 1,

    // shows alpha slider
    alphaSlider: false,

    // auto re-init on window resize
    resizeWith: true

});

Event handlers.

new KellyColorPicker({

    userEvents: {
      updateinput : function(handler, input, manualEnter) {},
      change : function(handler) {}, 
      mousemoveh : function(event, handler, dot) {}, 
      mouseuph : function(event, handler, dot) {}, 
      mousemovesv : function(event, handler, dot) {}, 
      mouseupsv : function(event, handler, dot) {}, 
      mousemoverest : function(event, handler, dot) {}, 
      mouseupalpha : function(event, handler, dot) {}, 
      mousemovealpha : function(event, handler, dot) {}, 
      setmethod : function (handler, newMethod) {},
      selectcolorsaver : function (handler, colorSaverObj) {},
    }

});

API Methods.

instance.setColorByHex(hex)
instance.setColor(color)
instance.setColorForColorSaver(color, side)
instance.setColorSaver(side) // side - "left" or "right"
instance.getColorSaver(side)
instance.addUserEvent(eventKey, event)
instance.removeUserEvent(eventKey)
instance.getCanvas()
instance.getCtx()
instance.getInput()
instance.getSvFig()
instance.getSvFigCursor()
instance.getWheel()
instance.getWheelCursor()
instance.getCurColorHsv()
instance.getCurColorRgb()
instance.getCurColorHex()
.instance.getCurColorRgba()
instance.getCurAlpha
instance.setAlpha(newAlpha)
instance.updateView(dropBuffer)
instance.resize(newSize)
instance.destroy()

Changelog:

06/10/2020

  • Doc updated

06/09/2020

  • fix readColor method

09/12/2018

  • fixed event reference in getEventDot function.

You Might Be Interested In:


Leave a Reply