Add size, remove alias from other canvases

This commit is contained in:
DD Liu 2018-04-05 01:10:36 -04:00 committed by DD
parent ba51fe59a0
commit 80b4557741
3 changed files with 20 additions and 8 deletions

View file

@ -36,6 +36,9 @@ class LoupeComponent extends React.Component {
tmpCanvas.width = LOUPE_RADIUS * 2;
tmpCanvas.height = LOUPE_RADIUS * 2;
const tmpCtx = tmpCanvas.getContext('2d');
tmpCtx.webkitImageSmoothingEnabled = false;
tmpCtx.mozImageSmoothingEnabled = false;
tmpCtx.imageSmoothingEnabled = false;
const imageData = tmpCtx.createImageData(
LOUPE_RADIUS * 2, LOUPE_RADIUS * 2
);

View file

@ -21,11 +21,12 @@ class BrushTool extends paper.Tool {
this.colorState = null;
this.active = false;
this.lastPoint = null;
this.size = 5;
}
setColor (color) {
this.color = color;
}
bresenhamLine (point1, point2, color, callback){
bresenhamLine (point1, point2, callback){
// Fast Math.floor
let x1 = ~~point1.x;
let x2 = ~~point2.x;
@ -38,7 +39,7 @@ class BrushTool extends paper.Tool {
const sy = (y1 < y2) ? 1 : -1;
let err = dx - dy;
callback(x1, y1, color);
callback(x1, y1);
while (x1 !== x2 || y1 !== y2) {
let e2 = err*2;
if (e2 >-dy) {
@ -47,17 +48,21 @@ class BrushTool extends paper.Tool {
if (e2 < dx) {
err += dx; y1 += sy;
}
callback(x1, y1, color);
callback(x1, y1);
}
}
// Draw a brush mark at the given point
draw (x, y, color) {
getRaster().setPixel(new paper.Point(x, y), color);
draw (centerX, centerY) {
for (let x = centerX - this.size; x <= centerX + this.size; x++) {
for (let y = centerY - this.size; y <= centerY + this.size; y++) {
getRaster().setPixel(new paper.Point(x, y), this.color);
}
}
}
handleMouseDown (event) {
if (event.event.button > 0) return; // only first mouse button
this.active = true;
this.draw(event.point, event.point, this.color);
this.draw(event.point, event.point);
this.lastPoint = event.point;
}
handleMouseDrag (event) {
@ -67,12 +72,12 @@ class BrushTool extends paper.Tool {
this.boundingBoxTool.onMouseDrag(event);
return;
}
this.bresenhamLine(this.lastPoint, event.point, this.color, this.draw);
this.bresenhamLine(this.lastPoint, event.point, this.draw.bind(this));
this.lastPoint = event.point;
}
handleMouseUp (event) {
if (event.event.button > 0 || !this.active) return; // only first mouse button
this.bresenhamLine(this.lastPoint, event.point, this.color, this.draw);
this.bresenhamLine(this.lastPoint, event.point, this.draw.bind(this));
this.lastPoint = null;
this.active = false;
}

View file

@ -32,6 +32,10 @@ class EyeDropperTool extends paper.Tool {
this.bufferCanvas = document.createElement('canvas');
this.bufferCanvas.width = canvas.width;
this.bufferCanvas.height = canvas.height;
const context = this.bufferCanvas.getContext('2d')
context.webkitImageSmoothingEnabled = false;
context.mozImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
this.bufferImage = new Image();
this.bufferImage.onload = () => {
this.bufferCanvas.getContext('2d').drawImage(this.bufferImage, 0, 0);