Skip to content

Latest commit

 

History

History
92 lines (69 loc) · 2.23 KB

README.md

File metadata and controls

92 lines (69 loc) · 2.23 KB
Raw

ColorWheel 2

Demo: https://keupoz.github.io/ColorWheel2/

Touch-friendly HSV color picker. Uses one canvas tag and has it's own color manager.

Usage

ColorWheel2 is a UMD module, so you can include it via script tag or require statement. Also it can be imported as an ES module (use ColorWheel2.es.js)

Install via npm:

npm i @keupoz/colorwheel2
<script src="ColorWheel2.min.js"></script>
import ColorWheel from '@keupoz/colorwheel2';
// or
const ColorWheel = require('./ColorWheel2.js');
let picker = new ColorWheel('#output', 256, function (eventCode, eventName) {
  // Do something here when color is changed
});

API

Constructor

new ColorWheel(canvas, size, callback);
  • canvas - CSS selector, HTMLCanvasElement or CanvasRenderingContext2D. Set to null to create new instances automatically
  • size - output canvas size in pixels
  • callback - called after each color change with arguments eventCode and eventName

Event codes

  • 0: interaction started
  • 1: interaction continued
  • 2: interaction ended
  • 3: updated picker after changing color programmatically

Event names

  • rotateWheel: changed hue
  • moveCursor: moved cursor
  • update: updated picker. Event code is always 3

Properties

ColorWheel.version

Static property

ColorWheel.version; // '1.0.0'

ColorWheel.domElement

Output canvas element

document.body.appendChild(picker.domElement);
picker.canvas.classList.add('picker');

ColorWheel.color

Color instance

Properties:

  • HSV, HSL, RGB - arrays. They aren't replaced while changing the color, so you can reuse them
  • hex, num
  • css - css string in HSL model

Methods:

  • isDark - can be used to make text readable. Returns true if text color should be white
  • getName - returns CSS name for current color if it exists, otherwise returns hex code

ColorWheel.setSize

Sets output canvas size

picker.setSize(300);

ColorWheel.setColor

Removed in 1.2.0. Use set methods from color instance and update picker via picker.update(). See dist/ColorWheel2.d.ts for color methods

picker.setHSV(180,1,1);
picker.update();