Woo-Dong93/color-sampler

A jQuery plugin provides color sampler function for Canvas.

color-sampler

A jQuery plugin provides color sampler function for Canvas.

Download

Compress JS
Compress CSS
Uncompress JS
Uncompress CSS

Installation

You can also install color-sampler by using Bower.

bower install color-sampler

Demo

Demo

Usage

You could just use jQuery bind, delegate or on to listen event. HTML

<canvas id="#canvas">
</canvas>

JavaScript

$('#canvas').colorSampler({
  onPreview: function (color) {
    // ... or sampler:preview event
  },
  onSelect: function (color) {
    // ... or sampler:select event
  }
});

Events

sampler:preview

Preview event.

sampler:preview

Select event.

Methods

enable()

Enable the color sampler function.

disable()

Disable the color sampler function.

resize()

When timer is disabled, call this method to tell color sampler that canvas size change.

$.colorSampler.setInterval(inverval)

Set interval of timer that check canvas resize.

inverval: Number (default: 50)

Interval of timer. Set 0 to disable timer, and you can use resize() to update manually.

Example

$('#canvas').colorSampler('enable');
$('#canvas').colorSampler('disable');
$('#canvas').colorSampler('resize');
$('#canvas').bind('sampler:preview', function (e, color) {
  // ...
});
$('#canvas').bind('sampler:select', function (e, color) {
  // ...
});
// disable timer
$.colorSampler.setInterval(0);

License

The project is released under the MIT license.

Contact

The project's website is located at https://github.com/emn178/color-sampler
Author: Chen, Yi-Cyuan (emn178@gmail.com)