angular-color-picker-fixed
Version:
Radial Color Picker - Angular
75 lines • 10.1 kB
JavaScript
/**
* Modified version of Lea Verou's
* {@link https://github.com/leaverou/conic-gradient conic-gradient}.
*
* @example
* paintColorWheelToCanvas(document.querySelector('#canvas'), 250);
*
* @param canvas Canvas to paint the color wheel
* @param size Color wheel diameter in pixels
* @returns canvas The passed canvas for easier chaining
*/
export const paintColorWheelToCanvas = (canvas, size) => {
const half = size / 2;
const radius = Math.sqrt(2) * half;
const deg = Math.PI / 180;
const pi2 = Math.PI * 2;
canvas.width = canvas.height = size;
const ctx = canvas.getContext('2d');
// .02: To prevent empty blank line and corresponding moire
// only non-alpha colors are cared now
const thetaOffset = 0.5 * deg + 0.02;
// Transform coordinate system so that angles start from the top left, like in CSS
ctx.translate(half, half);
ctx.rotate(-Math.PI / 2);
ctx.translate(-half, -half);
for (let i = 0; i < 360; i += 0.5) {
ctx.fillStyle = `hsl(${i}, 100%, 50%)`;
ctx.beginPath();
ctx.moveTo(half, half);
const beginArg = i * deg;
const endArg = Math.min(pi2, beginArg + thetaOffset);
ctx.arc(half, half, radius, beginArg, endArg);
ctx.closePath();
ctx.fill();
}
return canvas;
};
/**
*
* @param canvas Canvas to paint the color wheel
* @param diameter Color wheel diameter in pixels
* @param coefficient Relation between inner white circle outer border and color circle outer border, controls the width of the color gradient path
* @returns canvas The passed canvas for easier chaining
*/
export const renderColorMap = (canvas, diameter, coefficient = 0.77) => {
canvas.width = canvas.height = diameter;
const radius = diameter / 2;
const toRad = (2 * Math.PI) / 360;
const step = 0.2;
const aliasing = 1;
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, diameter, diameter);
for (let i = 0; i < 360; i += step) {
const sRad = (i - aliasing) * toRad;
const eRad = (i + step) * toRad;
ctx.beginPath();
ctx.arc(radius, radius, radius / 2, sRad, eRad, false);
ctx.strokeStyle = 'hsl(' + i + ', 100%, 50%)';
ctx.lineWidth = radius;
ctx.closePath();
ctx.stroke();
}
ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.beginPath();
ctx.arc(radius, radius, radius * coefficient, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
ctx.strokeStyle = 'rgb(255, 255, 255)';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(radius, radius, radius, 0, 2 * Math.PI);
ctx.stroke();
return canvas;
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3ItZ3JhZGllbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AcmFkaWFsLWNvbG9yLXBpY2tlci9hbmd1bGFyLWNvbG9yLXBpY2tlci8iLCJzb3VyY2VzIjpbImxpYi9oZWxwZXJzL2NvbG9yLWdyYWRpZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7Ozs7O0dBVUc7QUFDSCxNQUFNLENBQUMsTUFBTSx1QkFBdUIsR0FBRyxDQUFDLE1BQXlCLEVBQUUsSUFBWSxFQUFxQixFQUFFO0lBQ3BHLE1BQU0sSUFBSSxHQUFHLElBQUksR0FBRyxDQUFDLENBQUM7SUFDdEIsTUFBTSxNQUFNLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUM7SUFDbkMsTUFBTSxHQUFHLEdBQUcsSUFBSSxDQUFDLEVBQUUsR0FBRyxHQUFHLENBQUM7SUFDMUIsTUFBTSxHQUFHLEdBQUcsSUFBSSxDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUM7SUFFeEIsTUFBTSxDQUFDLEtBQUssR0FBRyxNQUFNLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQztJQUNwQyxNQUFNLEdBQUcsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBRXBDLDJEQUEyRDtJQUMzRCxzQ0FBc0M7SUFDdEMsTUFBTSxXQUFXLEdBQUcsR0FBRyxHQUFHLEdBQUcsR0FBRyxJQUFJLENBQUM7SUFFckMsa0ZBQWtGO0lBQ2xGLEdBQUcsQ0FBQyxTQUFTLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQzFCLEdBQUcsQ0FBQyxNQUFNLENBQUMsQ0FBQyxJQUFJLENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQyxDQUFDO0lBQ3pCLEdBQUcsQ0FBQyxTQUFTLENBQUMsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUU1QixLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxHQUFHLEVBQUU7UUFDakMsR0FBRyxDQUFDLFNBQVMsR0FBRyxPQUFPLENBQUMsY0FBYyxDQUFDO1FBQ3ZDLEdBQUcsQ0FBQyxTQUFTLEVBQUUsQ0FBQztRQUNoQixHQUFHLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxJQUFJLENBQUMsQ0FBQztRQUV2QixNQUFNLFFBQVEsR0FBRyxDQUFDLEdBQUcsR0FBRyxDQUFDO1FBQ3pCLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsR0FBRyxFQUFFLFFBQVEsR0FBRyxXQUFXLENBQUMsQ0FBQztRQUVyRCxHQUFHLENBQUMsR0FBRyxDQUFDLElBQUksRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxNQUFNLENBQUMsQ0FBQztRQUU5QyxHQUFHLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDaEIsR0FBRyxDQUFDLElBQUksRUFBRSxDQUFDO0tBQ1o7SUFFRCxPQUFPLE1BQU0sQ0FBQztBQUNoQixDQUFDLENBQUM7QUFFRjs7Ozs7O0dBTUc7QUFDSCxNQUFNLENBQUMsTUFBTSxjQUFjLEdBQUcsQ0FBQyxNQUF5QixFQUFFLFFBQWdCLEVBQUUsY0FBc0IsSUFBSSxFQUFxQixFQUFFO0lBQzNILE1BQU0sQ0FBQyxLQUFLLEdBQUcsTUFBTSxDQUFDLE1BQU0sR0FBRyxRQUFRLENBQUM7SUFDeEMsTUFBTSxNQUFNLEdBQUcsUUFBUSxHQUFHLENBQUMsQ0FBQztJQUM1QixNQUFNLEtBQUssR0FBRyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsRUFBRSxDQUFDLEdBQUcsR0FBRyxDQUFDO0lBQ2xDLE1BQU0sSUFBSSxHQUFHLEdBQUcsQ0FBQztJQUNqQixNQUFNLFFBQVEsR0FBRyxDQUFDLENBQUM7SUFHbkIsTUFBTSxHQUFHLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNwQyxHQUFHLENBQUMsU0FBUyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsUUFBUSxFQUFFLFFBQVEsQ0FBQyxDQUFDO0lBQ3hDLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLElBQUksRUFBRTtRQUNsQyxNQUFNLElBQUksR0FBRyxDQUFDLENBQUMsR0FBRyxRQUFRLENBQUMsR0FBRyxLQUFLLENBQUM7UUFDcEMsTUFBTSxJQUFJLEdBQUcsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLEdBQUcsS0FBSyxDQUFDO1FBQ2hDLEdBQUcsQ0FBQyxTQUFTLEVBQUUsQ0FBQztRQUNoQixHQUFHLENBQUMsR0FBRyxDQUFDLE1BQU0sRUFBRSxNQUFNLEVBQUUsTUFBTSxHQUFHLENBQUMsRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLEtBQUssQ0FBQyxDQUFDO1FBQ3ZELEdBQUcsQ0FBQyxXQUFXLEdBQUcsTUFBTSxHQUFHLENBQUMsR0FBRyxjQUFjLENBQUM7UUFDOUMsR0FBRyxDQUFDLFNBQVMsR0FBRyxNQUFNLENBQUM7UUFDdkIsR0FBRyxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ2hCLEdBQUcsQ0FBQyxNQUFNLEVBQUUsQ0FBQztLQUNkO0lBRUQsR0FBRyxDQUFDLFNBQVMsR0FBRyxvQkFBb0IsQ0FBQztJQUNyQyxHQUFHLENBQUMsU0FBUyxFQUFFLENBQUM7SUFDaEIsR0FBRyxDQUFDLEdBQUcsQ0FBQyxNQUFNLEVBQUUsTUFBTSxFQUFFLE1BQU0sR0FBRyxXQUFXLEVBQUUsQ0FBQyxFQUFFLElBQUksQ0FBQyxFQUFFLEdBQUcsQ0FBQyxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQ3BFLEdBQUcsQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNoQixHQUFHLENBQUMsSUFBSSxFQUFFLENBQUM7SUFFWCxHQUFHLENBQUMsV0FBVyxHQUFHLG9CQUFvQixDQUFDO0lBQ3ZDLEdBQUcsQ0FBQyxTQUFTLEdBQUcsQ0FBQyxDQUFDO0lBQ2xCLEdBQUcsQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNoQixHQUFHLENBQUMsR0FBRyxDQUFDLE1BQU0sRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFFLENBQUMsRUFBRSxDQUFDLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQ2hELEdBQUcsQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUdiLE9BQU8sTUFBTSxDQUFDO0FBQ2hCLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogTW9kaWZpZWQgdmVyc2lvbiBvZiBMZWEgVmVyb3Unc1xuICoge0BsaW5rIGh0dHBzOi8vZ2l0aHViLmNvbS9sZWF2ZXJvdS9jb25pYy1ncmFkaWVudCBjb25pYy1ncmFkaWVudH0uXG4gKlxuICogQGV4YW1wbGVcbiAqIHBhaW50Q29sb3JXaGVlbFRvQ2FudmFzKGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNjYW52YXMnKSwgMjUwKTtcbiAqXG4gKiBAcGFyYW0gY2FudmFzIENhbnZhcyB0byBwYWludCB0aGUgY29sb3Igd2hlZWxcbiAqIEBwYXJhbSBzaXplICAgQ29sb3Igd2hlZWwgZGlhbWV0ZXIgaW4gcGl4ZWxzXG4gKiBAcmV0dXJucyBjYW52YXMgVGhlIHBhc3NlZCBjYW52YXMgZm9yIGVhc2llciBjaGFpbmluZ1xuICovXG5leHBvcnQgY29uc3QgcGFpbnRDb2xvcldoZWVsVG9DYW52YXMgPSAoY2FudmFzOiBIVE1MQ2FudmFzRWxlbWVudCwgc2l6ZTogbnVtYmVyKTogSFRNTENhbnZhc0VsZW1lbnQgPT4ge1xuICBjb25zdCBoYWxmID0gc2l6ZSAvIDI7XG4gIGNvbnN0IHJhZGl1cyA9IE1hdGguc3FydCgyKSAqIGhhbGY7XG4gIGNvbnN0IGRlZyA9IE1hdGguUEkgLyAxODA7XG4gIGNvbnN0IHBpMiA9IE1hdGguUEkgKiAyO1xuXG4gIGNhbnZhcy53aWR0aCA9IGNhbnZhcy5oZWlnaHQgPSBzaXplO1xuICBjb25zdCBjdHggPSBjYW52YXMuZ2V0Q29udGV4dCgnMmQnKTtcblxuICAvLyAuMDI6IFRvIHByZXZlbnQgZW1wdHkgYmxhbmsgbGluZSBhbmQgY29ycmVzcG9uZGluZyBtb2lyZVxuICAvLyBvbmx5IG5vbi1hbHBoYSBjb2xvcnMgYXJlIGNhcmVkIG5vd1xuICBjb25zdCB0aGV0YU9mZnNldCA9IDAuNSAqIGRlZyArIDAuMDI7XG5cbiAgLy8gVHJhbnNmb3JtIGNvb3JkaW5hdGUgc3lzdGVtIHNvIHRoYXQgYW5nbGVzIHN0YXJ0IGZyb20gdGhlIHRvcCBsZWZ0LCBsaWtlIGluIENTU1xuICBjdHgudHJhbnNsYXRlKGhhbGYsIGhhbGYpO1xuICBjdHgucm90YXRlKC1NYXRoLlBJIC8gMik7XG4gIGN0eC50cmFuc2xhdGUoLWhhbGYsIC1oYWxmKTtcblxuICBmb3IgKGxldCBpID0gMDsgaSA8IDM2MDsgaSArPSAwLjUpIHtcbiAgICBjdHguZmlsbFN0eWxlID0gYGhzbCgke2l9LCAxMDAlLCA1MCUpYDtcbiAgICBjdHguYmVnaW5QYXRoKCk7XG4gICAgY3R4Lm1vdmVUbyhoYWxmLCBoYWxmKTtcblxuICAgIGNvbnN0IGJlZ2luQXJnID0gaSAqIGRlZztcbiAgICBjb25zdCBlbmRBcmcgPSBNYXRoLm1pbihwaTIsIGJlZ2luQXJnICsgdGhldGFPZmZzZXQpO1xuXG4gICAgY3R4LmFyYyhoYWxmLCBoYWxmLCByYWRpdXMsIGJlZ2luQXJnLCBlbmRBcmcpO1xuXG4gICAgY3R4LmNsb3NlUGF0aCgpO1xuICAgIGN0eC5maWxsKCk7XG4gIH1cblxuICByZXR1cm4gY2FudmFzO1xufTtcblxuLyoqXG4gKlxuICogQHBhcmFtIGNhbnZhcyBDYW52YXMgdG8gcGFpbnQgdGhlIGNvbG9yIHdoZWVsXG4gKiBAcGFyYW0gZGlhbWV0ZXIgQ29sb3Igd2hlZWwgZGlhbWV0ZXIgaW4gcGl4ZWxzXG4gKiBAcGFyYW0gY29lZmZpY2llbnQgUmVsYXRpb24gYmV0d2VlbiBpbm5lciB3aGl0ZSBjaXJjbGUgb3V0ZXIgYm9yZGVyIGFuZCBjb2xvciBjaXJjbGUgb3V0ZXIgYm9yZGVyLCBjb250cm9scyB0aGUgd2lkdGggb2YgdGhlIGNvbG9yIGdyYWRpZW50IHBhdGhcbiAqIEByZXR1cm5zIGNhbnZhcyBUaGUgcGFzc2VkIGNhbnZhcyBmb3IgZWFzaWVyIGNoYWluaW5nXG4gKi9cbmV4cG9ydCBjb25zdCByZW5kZXJDb2xvck1hcCA9IChjYW52YXM6IEhUTUxDYW52YXNFbGVtZW50LCBkaWFtZXRlcjogbnVtYmVyLCBjb2VmZmljaWVudDogbnVtYmVyID0gMC43Nyk6IEhUTUxDYW52YXNFbGVtZW50ID0+IHtcbiAgY2FudmFzLndpZHRoID0gY2FudmFzLmhlaWdodCA9IGRpYW1ldGVyO1xuICBjb25zdCByYWRpdXMgPSBkaWFtZXRlciAvIDI7XG4gIGNvbnN0IHRvUmFkID0gKDIgKiBNYXRoLlBJKSAvIDM2MDtcbiAgY29uc3Qgc3RlcCA9IDAuMjtcbiAgY29uc3QgYWxpYXNpbmcgPSAxO1xuXG5cbiAgY29uc3QgY3R4ID0gY2FudmFzLmdldENvbnRleHQoJzJkJyk7XG4gIGN0eC5jbGVhclJlY3QoMCwgMCwgZGlhbWV0ZXIsIGRpYW1ldGVyKTtcbiAgZm9yIChsZXQgaSA9IDA7IGkgPCAzNjA7IGkgKz0gc3RlcCkge1xuICAgIGNvbnN0IHNSYWQgPSAoaSAtIGFsaWFzaW5nKSAqIHRvUmFkO1xuICAgIGNvbnN0IGVSYWQgPSAoaSArIHN0ZXApICogdG9SYWQ7XG4gICAgY3R4LmJlZ2luUGF0aCgpO1xuICAgIGN0eC5hcmMocmFkaXVzLCByYWRpdXMsIHJhZGl1cyAvIDIsIHNSYWQsIGVSYWQsIGZhbHNlKTtcbiAgICBjdHguc3Ryb2tlU3R5bGUgPSAnaHNsKCcgKyBpICsgJywgMTAwJSwgNTAlKSc7XG4gICAgY3R4LmxpbmVXaWR0aCA9IHJhZGl1cztcbiAgICBjdHguY2xvc2VQYXRoKCk7XG4gICAgY3R4LnN0cm9rZSgpO1xuICB9XG5cbiAgY3R4LmZpbGxTdHlsZSA9ICdyZ2IoMjU1LCAyNTUsIDI1NSknO1xuICBjdHguYmVnaW5QYXRoKCk7XG4gIGN0eC5hcmMocmFkaXVzLCByYWRpdXMsIHJhZGl1cyAqIGNvZWZmaWNpZW50LCAwLCBNYXRoLlBJICogMiwgdHJ1ZSk7XG4gIGN0eC5jbG9zZVBhdGgoKTtcbiAgY3R4LmZpbGwoKTtcblxuICBjdHguc3Ryb2tlU3R5bGUgPSAncmdiKDI1NSwgMjU1LCAyNTUpJztcbiAgY3R4LmxpbmVXaWR0aCA9IDI7XG4gIGN0eC5iZWdpblBhdGgoKTtcbiAgY3R4LmFyYyhyYWRpdXMsIHJhZGl1cywgcmFkaXVzLCAwLCAyICogTWF0aC5QSSk7XG4gIGN0eC5zdHJva2UoKTtcblxuXG4gIHJldHVybiBjYW52YXM7XG59O1xuIl19