angular-color-picker-fixed
Version:
Radial Color Picker - Angular
76 lines • 10.2 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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LEVBQUUsQ0FBQyxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUNoRCxHQUFHLENBQUMsTUFBTSxFQUFFLENBQUM7SUFHYixPQUFPLE1BQU0sQ0FBQztBQUNoQixDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIE1vZGlmaWVkIHZlcnNpb24gb2YgTGVhIFZlcm91J3NcbiAqIHtAbGluayBodHRwczovL2dpdGh1Yi5jb20vbGVhdmVyb3UvY29uaWMtZ3JhZGllbnQgY29uaWMtZ3JhZGllbnR9LlxuICpcbiAqIEBleGFtcGxlXG4gKiBwYWludENvbG9yV2hlZWxUb0NhbnZhcyhkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjY2FudmFzJyksIDI1MCk7XG4gKlxuICogQHBhcmFtIGNhbnZhcyBDYW52YXMgdG8gcGFpbnQgdGhlIGNvbG9yIHdoZWVsXG4gKiBAcGFyYW0gc2l6ZSAgIENvbG9yIHdoZWVsIGRpYW1ldGVyIGluIHBpeGVsc1xuICogQHJldHVybnMgY2FudmFzIFRoZSBwYXNzZWQgY2FudmFzIGZvciBlYXNpZXIgY2hhaW5pbmdcbiAqL1xuZXhwb3J0IGNvbnN0IHBhaW50Q29sb3JXaGVlbFRvQ2FudmFzID0gKGNhbnZhczogSFRNTENhbnZhc0VsZW1lbnQsIHNpemU6IG51bWJlcik6IEhUTUxDYW52YXNFbGVtZW50ID0+IHtcbiAgY29uc3QgaGFsZiA9IHNpemUgLyAyO1xuICBjb25zdCByYWRpdXMgPSBNYXRoLnNxcnQoMikgKiBoYWxmO1xuICBjb25zdCBkZWcgPSBNYXRoLlBJIC8gMTgwO1xuICBjb25zdCBwaTIgPSBNYXRoLlBJICogMjtcblxuICBjYW52YXMud2lkdGggPSBjYW52YXMuaGVpZ2h0ID0gc2l6ZTtcbiAgY29uc3QgY3R4ID0gY2FudmFzLmdldENvbnRleHQoJzJkJyk7XG5cbiAgLy8gLjAyOiBUbyBwcmV2ZW50IGVtcHR5IGJsYW5rIGxpbmUgYW5kIGNvcnJlc3BvbmRpbmcgbW9pcmVcbiAgLy8gb25seSBub24tYWxwaGEgY29sb3JzIGFyZSBjYXJlZCBub3dcbiAgY29uc3QgdGhldGFPZmZzZXQgPSAwLjUgKiBkZWcgKyAwLjAyO1xuXG4gIC8vIFRyYW5zZm9ybSBjb29yZGluYXRlIHN5c3RlbSBzbyB0aGF0IGFuZ2xlcyBzdGFydCBmcm9tIHRoZSB0b3AgbGVmdCwgbGlrZSBpbiBDU1NcbiAgY3R4LnRyYW5zbGF0ZShoYWxmLCBoYWxmKTtcbiAgY3R4LnJvdGF0ZSgtTWF0aC5QSSAvIDIpO1xuICBjdHgudHJhbnNsYXRlKC1oYWxmLCAtaGFsZik7XG5cbiAgZm9yIChsZXQgaSA9IDA7IGkgPCAzNjA7IGkgKz0gMC41KSB7XG4gICAgY3R4LmZpbGxTdHlsZSA9IGBoc2woJHtpfSwgMTAwJSwgNTAlKWA7XG4gICAgY3R4LmJlZ2luUGF0aCgpO1xuICAgIGN0eC5tb3ZlVG8oaGFsZiwgaGFsZik7XG5cbiAgICBjb25zdCBiZWdpbkFyZyA9IGkgKiBkZWc7XG4gICAgY29uc3QgZW5kQXJnID0gTWF0aC5taW4ocGkyLCBiZWdpbkFyZyArIHRoZXRhT2Zmc2V0KTtcblxuICAgIGN0eC5hcmMoaGFsZiwgaGFsZiwgcmFkaXVzLCBiZWdpbkFyZywgZW5kQXJnKTtcblxuICAgIGN0eC5jbG9zZVBhdGgoKTtcbiAgICBjdHguZmlsbCgpO1xuICB9XG5cbiAgcmV0dXJuIGNhbnZhcztcbn07XG5cbi8qKlxuICpcbiAqIEBwYXJhbSBjYW52YXMgQ2FudmFzIHRvIHBhaW50IHRoZSBjb2xvciB3aGVlbFxuICogQHBhcmFtIGRpYW1ldGVyIENvbG9yIHdoZWVsIGRpYW1ldGVyIGluIHBpeGVsc1xuICogQHBhcmFtIGNvZWZmaWNpZW50IFJlbGF0aW9uIGJldHdlZW4gaW5uZXIgd2hpdGUgY2lyY2xlIG91dGVyIGJvcmRlciBhbmQgY29sb3IgY2lyY2xlIG91dGVyIGJvcmRlciwgY29udHJvbHMgdGhlIHdpZHRoIG9mIHRoZSBjb2xvciBncmFkaWVudCBwYXRoXG4gKiBAcmV0dXJucyBjYW52YXMgVGhlIHBhc3NlZCBjYW52YXMgZm9yIGVhc2llciBjaGFpbmluZ1xuICovXG5leHBvcnQgY29uc3QgcmVuZGVyQ29sb3JNYXAgPSAoY2FudmFzOiBIVE1MQ2FudmFzRWxlbWVudCwgZGlhbWV0ZXI6IG51bWJlciwgY29lZmZpY2llbnQ6IG51bWJlciA9IDAuNzcpOiBIVE1MQ2FudmFzRWxlbWVudCA9PiB7XG4gIGNhbnZhcy53aWR0aCA9IGNhbnZhcy5oZWlnaHQgPSBkaWFtZXRlcjtcbiAgY29uc3QgcmFkaXVzID0gZGlhbWV0ZXIgLyAyO1xuICBjb25zdCB0b1JhZCA9ICgyICogTWF0aC5QSSkgLyAzNjA7XG4gIGNvbnN0IHN0ZXAgPSAwLjI7XG4gIGNvbnN0IGFsaWFzaW5nID0gMTtcblxuXG4gIGNvbnN0IGN0eCA9IGNhbnZhcy5nZXRDb250ZXh0KCcyZCcpO1xuICBjdHguY2xlYXJSZWN0KDAsIDAsIGRpYW1ldGVyLCBkaWFtZXRlcik7XG4gIGZvciAobGV0IGkgPSAwOyBpIDwgMzYwOyBpICs9IHN0ZXApIHtcbiAgICBjb25zdCBzUmFkID0gKGkgLSBhbGlhc2luZykgKiB0b1JhZDtcbiAgICBjb25zdCBlUmFkID0gKGkgKyBzdGVwKSAqIHRvUmFkO1xuICAgIGN0eC5iZWdpblBhdGgoKTtcbiAgICBjdHguYXJjKHJhZGl1cywgcmFkaXVzLCByYWRpdXMgLyAyLCBzUmFkLCBlUmFkLCBmYWxzZSk7XG4gICAgY3R4LnN0cm9rZVN0eWxlID0gJ2hzbCgnICsgaSArICcsIDEwMCUsIDUwJSknO1xuICAgIGN0eC5saW5lV2lkdGggPSByYWRpdXM7XG4gICAgY3R4LmNsb3NlUGF0aCgpO1xuICAgIGN0eC5zdHJva2UoKTtcbiAgfVxuXG4gIGN0eC5maWxsU3R5bGUgPSAncmdiKDI1NSwgMjU1LCAyNTUpJztcbiAgY3R4LmJlZ2luUGF0aCgpO1xuICBjdHguYXJjKHJhZGl1cywgcmFkaXVzLCByYWRpdXMgKiBjb2VmZmljaWVudCwgMCwgTWF0aC5QSSAqIDIsIHRydWUpO1xuICBjdHguY2xvc2VQYXRoKCk7XG4gIGN0eC5maWxsKCk7XG5cbiAgY3R4LnN0cm9rZVN0eWxlID0gJ3JnYigyNTUsIDI1NSwgMjU1KSc7XG4gIGN0eC5saW5lV2lkdGggPSAyO1xuICBjdHguYmVnaW5QYXRoKCk7XG4gIGN0eC5hcmMocmFkaXVzLCByYWRpdXMsIHJhZGl1cywgMCwgMiAqIE1hdGguUEkpO1xuICBjdHguc3Ryb2tlKCk7XG5cblxuICByZXR1cm4gY2FudmFzO1xufTtcbiJdfQ==