scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2025-03-13 22:50:01 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Double pixel brush drawin working

Browse source
This commit is contained in:
DD 2018-04-13 11:33:47 -04:00
parent 420e1013cf
commit ca42dc7735
1 changed files with 56 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
src/helper/bit-tools/brush-tool.js
View file

@ -1,6 +1,7 @@
import paper from '@scratch/paper';
import {getRaster} from '../layer';
import {line, fillEllipse} from '../bitmap';
import {getGuideLayer} from '../layer';
/**
* Tool for drawing with the bitmap brush.
@ -15,6 +16,7 @@ class BrushTool extends paper.Tool {
// We have to set these functions instead of just declaring them because
// paper.js tools hook up the listeners in the setter functions.
this.onMouseMove = this.handleMouseMove;
this.onMouseDown = this.handleMouseDown;
this.onMouseDrag = this.handleMouseDrag;
this.onMouseUp = this.handleMouseUp;
@ -22,36 +24,67 @@ class BrushTool extends paper.Tool {
this.colorState = null;
this.active = false;
this.lastPoint = null;
this.cursorPreview = null;
}
setColor (color) {
this.color = color;
}
setBrushSize (size) {
// TODO get 1px to work
// For performance, make sure this is an integer
this.size = ~~size;
this.radius = Math.max(1, ~~(size / 2));
}
// Draw a brush mark at the given point
draw (x, y) {
getRaster().drawImage(this.tmpCanvas, new paper.Point(x - ~~(this.size / 2), y - ~~(this.size / 2)));
getRaster().drawImage(this.tmpCanvas, new paper.Point(~~x - this.radius, ~~y - this.radius));
}
updateCursorIfNeeded () {
if (!this.radius) {
return;
}
// The cursor preview was unattached from the view by an outside process,
// such as changing costumes or undo.
if (this.cursorPreview && !this.cursorPreview.parent) {
this.cursorPreview = null;
}
if (!this.cursorPreview || !(this.lastRadius === this.radius && this.lastColor === this.color)) {
if (this.cursorPreview) {
this.cursorPreview.remove();
}
this.tmpCanvas = document.createElement('canvas');
this.tmpCanvas.width = this.radius * 2;
this.tmpCanvas.height = this.radius * 2;
const context = this.tmpCanvas.getContext('2d');
context.imageSmoothingEnabled = false;
context.fillStyle = this.color;
// Small squares for pixel artists
if (this.radius <= 2) {
context.fillRect(0, 0, this.radius * 2, this.radius * 2);
} else {
fillEllipse(this.radius, this.radius, this.radius, this.radius, context);
}
this.cursorPreview = new paper.Raster(this.tmpCanvas);
this.cursorPreview.guide = true;
this.cursorPreview.parent = getGuideLayer();
this.cursorPreview.data.isHelperItem = true;
}
this.lastRadius = this.radius;
this.lastColor = this.color;
}
handleMouseMove (event) {
this.updateCursorIfNeeded();
this.cursorPreview.position = new paper.Point(~~event.point.x, ~~event.point.y);
}
handleMouseDown (event) {
if (event.event.button > 0) return; // only first mouse button
this.active = true;
this.cursorPreview.remove();
this.tmpCanvas = document.createElement('canvas');
this.tmpCanvas.width = this.size;
this.tmpCanvas.height = this.size;
const context = this.tmpCanvas.getContext('2d');
context.imageSmoothingEnabled = false;
context.fillStyle = this.color;
// Small squares for pixel artists
if (this.size <= 4) {
context.fillRect(0, 0, this.size, this.size);
} else {
fillEllipse(this.size / 2, this.size / 2, this.size / 2, this.size / 2, context);
}
this.draw(event.point, event.point);
this.draw(event.point.x, event.point.y);
this.lastPoint = event.point;
}
handleMouseDrag (event) {
@ -70,11 +103,17 @@ class BrushTool extends paper.Tool {
line(this.lastPoint, event.point, this.draw.bind(this));
this.onUpdateSvg();
this.tmpCanvas = null;
this.lastPoint = null;
this.active = false;
this.updateCursorIfNeeded();
this.cursorPreview.position = new paper.Point(~~event.point.x, ~~event.point.y);
}
deactivateTool () {
this.active = false;
this.tmpCanvas = null;
this.cursorPreview.remove();
this.cursorPreview = null;
}
}