49 lines
1.3 KiB
JavaScript
49 lines
1.3 KiB
JavaScript
const STEPS = 8;
|
|
|
|
class Picker extends Canvas {
|
|
|
|
setColor0;
|
|
|
|
setColor1;
|
|
|
|
constructor(size, canvasElementId, setColor0, setColor1) {
|
|
super(canvasElementId, (STEPS + 1) * size, 7 * size, (event) => this.mouseEvent(event));
|
|
this.setColor0 = setColor0;
|
|
this.setColor1 = setColor1;
|
|
this.size = size;
|
|
this.draw();
|
|
}
|
|
|
|
mouseEvent(event) {
|
|
const color = this.getPixelColor(event);
|
|
if (Boolean(event.buttons & 1)) {
|
|
this.setColor0(color);
|
|
} else if (Boolean(event.buttons & 2)) {
|
|
this.setColor1(color);
|
|
}
|
|
}
|
|
|
|
draw() {
|
|
this.ctx.fillStyle = "#fff";
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
let y = 0;
|
|
this.drawMatrix(true, false, false, y++);
|
|
this.drawMatrix(true, true, false, y++);
|
|
this.drawMatrix(false, true, false, y++);
|
|
this.drawMatrix(false, true, true, y++);
|
|
this.drawMatrix(false, false, true, y++);
|
|
this.drawMatrix(true, false, true, y++);
|
|
this.drawMatrix(true, true, true, y++);
|
|
}
|
|
|
|
drawMatrix(dr, dg, db, y) {
|
|
for (let x = 0; x <= STEPS; x++) {
|
|
const r = x * (dr ? 256 / STEPS : 0) - 1;
|
|
const g = x * (dg ? 256 / STEPS : 0) - 1;
|
|
const b = x * (db ? 256 / STEPS : 0) - 1;
|
|
this.fillRect(x, y, `rgb(${r},${g},${b})`);
|
|
}
|
|
}
|
|
|
|
}
|