@radial-color-picker/angular-color-picker
Version:
Radial Color Picker - Angular
76 lines • 10.5 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 var paintColorWheelToCanvas = function (canvas, size) {
var half = size / 2;
var radius = Math.sqrt(2) * half;
var deg = Math.PI / 180;
var pi2 = Math.PI * 2;
canvas.width = canvas.height = size;
var ctx = canvas.getContext('2d');
// .02: To prevent empty blank line and corresponding moire
// only non-alpha colors are cared now
var 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 (var i = 0; i < 360; i += 0.5) {
ctx.fillStyle = "hsl(" + i + ", 100%, 50%)";
ctx.beginPath();
ctx.moveTo(half, half);
var beginArg = i * deg;
var 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 var renderColorMap = function (canvas, diameter, coefficient) {
if (coefficient === void 0) { coefficient = 0.77; }
canvas.width = canvas.height = diameter;
var radius = diameter / 2;
var toRad = (2 * Math.PI) / 360;
var step = 0.2;
var aliasing = 1;
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, diameter, diameter);
for (var i = 0; i < 360; i += step) {
var sRad = (i - aliasing) * toRad;
var 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3ItZ3JhZGllbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AcmFkaWFsLWNvbG9yLXBpY2tlci9hbmd1bGFyLWNvbG9yLXBpY2tlci8iLCJzb3VyY2VzIjpbImxpYi9oZWxwZXJzL2NvbG9yLWdyYWRpZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7Ozs7O0dBVUc7QUFDSCxNQUFNLENBQUMsSUFBTSx1QkFBdUIsR0FBRyxVQUFDLE1BQXlCLEVBQUUsSUFBWTtJQUM3RSxJQUFNLElBQUksR0FBRyxJQUFJLEdBQUcsQ0FBQyxDQUFDO0lBQ3RCLElBQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDO0lBQ25DLElBQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxFQUFFLEdBQUcsR0FBRyxDQUFDO0lBQzFCLElBQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxFQUFFLEdBQUcsQ0FBQyxDQUFDO0lBRXhCLE1BQU0sQ0FBQyxLQUFLLEdBQUcsTUFBTSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUM7SUFDcEMsSUFBTSxHQUFHLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUVwQywyREFBMkQ7SUFDM0Qsc0NBQXNDO0lBQ3RDLElBQU0sV0FBVyxHQUFHLEdBQUcsR0FBRyxHQUFHLEdBQUcsSUFBSSxDQUFDO0lBRXJDLGtGQUFrRjtJQUNsRixHQUFHLENBQUMsU0FBUyxDQUFDLElBQUksRUFBRSxJQUFJLENBQUMsQ0FBQztJQUMxQixHQUFHLENBQUMsTUFBTSxDQUFDLENBQUMsSUFBSSxDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUMsQ0FBQztJQUN6QixHQUFHLENBQUMsU0FBUyxDQUFDLENBQUMsSUFBSSxFQUFFLENBQUMsSUFBSSxDQUFDLENBQUM7SUFFNUIsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksR0FB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LEVBQUUsQ0FBQyxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUNoRCxHQUFHLENBQUMsTUFBTSxFQUFFLENBQUM7SUFHYixPQUFPLE1BQU0sQ0FBQztBQUNoQixDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcclxuICogTW9kaWZpZWQgdmVyc2lvbiBvZiBMZWEgVmVyb3Unc1xyXG4gKiB7QGxpbmsgaHR0cHM6Ly9naXRodWIuY29tL2xlYXZlcm91L2NvbmljLWdyYWRpZW50IGNvbmljLWdyYWRpZW50fS5cclxuICpcclxuICogQGV4YW1wbGVcclxuICogcGFpbnRDb2xvcldoZWVsVG9DYW52YXMoZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI2NhbnZhcycpLCAyNTApO1xyXG4gKlxyXG4gKiBAcGFyYW0gY2FudmFzIENhbnZhcyB0byBwYWludCB0aGUgY29sb3Igd2hlZWxcclxuICogQHBhcmFtIHNpemUgICBDb2xvciB3aGVlbCBkaWFtZXRlciBpbiBwaXhlbHNcclxuICogQHJldHVybnMgY2FudmFzIFRoZSBwYXNzZWQgY2FudmFzIGZvciBlYXNpZXIgY2hhaW5pbmdcclxuICovXHJcbmV4cG9ydCBjb25zdCBwYWludENvbG9yV2hlZWxUb0NhbnZhcyA9IChjYW52YXM6IEhUTUxDYW52YXNFbGVtZW50LCBzaXplOiBudW1iZXIpOiBIVE1MQ2FudmFzRWxlbWVudCA9PiB7XHJcbiAgY29uc3QgaGFsZiA9IHNpemUgLyAyO1xyXG4gIGNvbnN0IHJhZGl1cyA9IE1hdGguc3FydCgyKSAqIGhhbGY7XHJcbiAgY29uc3QgZGVnID0gTWF0aC5QSSAvIDE4MDtcclxuICBjb25zdCBwaTIgPSBNYXRoLlBJICogMjtcclxuXHJcbiAgY2FudmFzLndpZHRoID0gY2FudmFzLmhlaWdodCA9IHNpemU7XHJcbiAgY29uc3QgY3R4ID0gY2FudmFzLmdldENvbnRleHQoJzJkJyk7XHJcblxyXG4gIC8vIC4wMjogVG8gcHJldmVudCBlbXB0eSBibGFuayBsaW5lIGFuZCBjb3JyZXNwb25kaW5nIG1vaXJlXHJcbiAgLy8gb25seSBub24tYWxwaGEgY29sb3JzIGFyZSBjYXJlZCBub3dcclxuICBjb25zdCB0aGV0YU9mZnNldCA9IDAuNSAqIGRlZyArIDAuMDI7XHJcblxyXG4gIC8vIFRyYW5zZm9ybSBjb29yZGluYXRlIHN5c3RlbSBzbyB0aGF0IGFuZ2xlcyBzdGFydCBmcm9tIHRoZSB0b3AgbGVmdCwgbGlrZSBpbiBDU1NcclxuICBjdHgudHJhbnNsYXRlKGhhbGYsIGhhbGYpO1xyXG4gIGN0eC5yb3RhdGUoLU1hdGguUEkgLyAyKTtcclxuICBjdHgudHJhbnNsYXRlKC1oYWxmLCAtaGFsZik7XHJcblxyXG4gIGZvciAobGV0IGkgPSAwOyBpIDwgMzYwOyBpICs9IDAuNSkge1xyXG4gICAgY3R4LmZpbGxTdHlsZSA9IGBoc2woJHtpfSwgMTAwJSwgNTAlKWA7XHJcbiAgICBjdHguYmVnaW5QYXRoKCk7XHJcbiAgICBjdHgubW92ZVRvKGhhbGYsIGhhbGYpO1xyXG5cclxuICAgIGNvbnN0IGJlZ2luQXJnID0gaSAqIGRlZztcclxuICAgIGNvbnN0IGVuZEFyZyA9IE1hdGgubWluKHBpMiwgYmVnaW5BcmcgKyB0aGV0YU9mZnNldCk7XHJcblxyXG4gICAgY3R4LmFyYyhoYWxmLCBoYWxmLCByYWRpdXMsIGJlZ2luQXJnLCBlbmRBcmcpO1xyXG5cclxuICAgIGN0eC5jbG9zZVBhdGgoKTtcclxuICAgIGN0eC5maWxsKCk7XHJcbiAgfVxyXG5cclxuICByZXR1cm4gY2FudmFzO1xyXG59O1xyXG5cclxuLyoqXHJcbiAqXHJcbiAqIEBwYXJhbSBjYW52YXMgQ2FudmFzIHRvIHBhaW50IHRoZSBjb2xvciB3aGVlbFxyXG4gKiBAcGFyYW0gZGlhbWV0ZXIgQ29sb3Igd2hlZWwgZGlhbWV0ZXIgaW4gcGl4ZWxzXHJcbiAqIEBwYXJhbSBjb2VmZmljaWVudCBSZWxhdGlvbiBiZXR3ZWVuIGlubmVyIHdoaXRlIGNpcmNsZSBvdXRlciBib3JkZXIgYW5kIGNvbG9yIGNpcmNsZSBvdXRlciBib3JkZXIsIGNvbnRyb2xzIHRoZSB3aWR0aCBvZiB0aGUgY29sb3IgZ3JhZGllbnQgcGF0aFxyXG4gKiBAcmV0dXJucyBjYW52YXMgVGhlIHBhc3NlZCBjYW52YXMgZm9yIGVhc2llciBjaGFpbmluZ1xyXG4gKi9cclxuZXhwb3J0IGNvbnN0IHJlbmRlckNvbG9yTWFwID0gKGNhbnZhczogSFRNTENhbnZhc0VsZW1lbnQsIGRpYW1ldGVyOiBudW1iZXIsIGNvZWZmaWNpZW50OiBudW1iZXIgPSAwLjc3KTogSFRNTENhbnZhc0VsZW1lbnQgPT4ge1xyXG4gIGNhbnZhcy53aWR0aCA9IGNhbnZhcy5oZWlnaHQgPSBkaWFtZXRlcjtcclxuICBjb25zdCByYWRpdXMgPSBkaWFtZXRlciAvIDI7XHJcbiAgY29uc3QgdG9SYWQgPSAoMiAqIE1hdGguUEkpIC8gMzYwO1xyXG4gIGNvbnN0IHN0ZXAgPSAwLjI7XHJcbiAgY29uc3QgYWxpYXNpbmcgPSAxO1xyXG5cclxuXHJcbiAgY29uc3QgY3R4ID0gY2FudmFzLmdldENvbnRleHQoJzJkJyk7XHJcbiAgY3R4LmNsZWFyUmVjdCgwLCAwLCBkaWFtZXRlciwgZGlhbWV0ZXIpO1xyXG4gIGZvciAobGV0IGkgPSAwOyBpIDwgMzYwOyBpICs9IHN0ZXApIHtcclxuICAgIGNvbnN0IHNSYWQgPSAoaSAtIGFsaWFzaW5nKSAqIHRvUmFkO1xyXG4gICAgY29uc3QgZVJhZCA9IChpICsgc3RlcCkgKiB0b1JhZDtcclxuICAgIGN0eC5iZWdpblBhdGgoKTtcclxuICAgIGN0eC5hcmMocmFkaXVzLCByYWRpdXMsIHJhZGl1cyAvIDIsIHNSYWQsIGVSYWQsIGZhbHNlKTtcclxuICAgIGN0eC5zdHJva2VTdHlsZSA9ICdoc2woJyArIGkgKyAnLCAxMDAlLCA1MCUpJztcclxuICAgIGN0eC5saW5lV2lkdGggPSByYWRpdXM7XHJcbiAgICBjdHguY2xvc2VQYXRoKCk7XHJcbiAgICBjdHguc3Ryb2tlKCk7XHJcbiAgfVxyXG5cclxuICBjdHguZmlsbFN0eWxlID0gJ3JnYigyNTUsIDI1NSwgMjU1KSc7XHJcbiAgY3R4LmJlZ2luUGF0aCgpO1xyXG4gIGN0eC5hcmMocmFkaXVzLCByYWRpdXMsIHJhZGl1cyAqIGNvZWZmaWNpZW50LCAwLCBNYXRoLlBJICogMiwgdHJ1ZSk7XHJcbiAgY3R4LmNsb3NlUGF0aCgpO1xyXG4gIGN0eC5maWxsKCk7XHJcblxyXG4gIGN0eC5zdHJva2VTdHlsZSA9ICdyZ2IoMjU1LCAyNTUsIDI1NSknO1xyXG4gIGN0eC5saW5lV2lkdGggPSAyO1xyXG4gIGN0eC5iZWdpblBhdGgoKTtcclxuICBjdHguYXJjKHJhZGl1cywgcmFkaXVzLCByYWRpdXMsIDAsIDIgKiBNYXRoLlBJKTtcclxuICBjdHguc3Ryb2tlKCk7XHJcblxyXG5cclxuICByZXR1cm4gY2FudmFzO1xyXG59O1xyXG4iXX0=