scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-22 21:42:30 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Move getBrushMark to helper

Browse source
This commit is contained in:
DD 2018-04-26 14:54:44 -04:00
parent 0755df9990
commit ed114bb073
3 changed files with 35 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import paper from '@scratch/paper';
import {getRaster} from '../layer';
import {forEachLinePoint, fillEllipse} from '../bitmap';
import {forEachLinePoint, getBrushMark} from '../bitmap';
import {getGuideLayer} from '../layer';
/**
@ -42,6 +42,7 @@ class BrushTool extends paper.Tool {
if (!this.size) {
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) {
@ -53,30 +54,13 @@ class BrushTool extends paper.Tool {
this.cursorPreview.remove();
}
this.tmpCanvas = document.createElement('canvas');
const roundedUpRadius = Math.ceil(this.size / 2);
this.tmpCanvas.width = roundedUpRadius * 2;
this.tmpCanvas.height = roundedUpRadius * 2;
const context = this.tmpCanvas.getContext('2d');
context.imageSmoothingEnabled = false;
context.fillStyle = this.color;
// Small squares for pixel artists
if (this.size <= 5) {
if (this.size % 2) {
context.fillRect(1, 1, this.size, this.size);
} else {
context.fillRect(0, 0, this.size, this.size);
}
} else {
const roundedDownRadius = ~~(this.size / 2);
fillEllipse(roundedDownRadius, roundedDownRadius, roundedDownRadius, roundedDownRadius, context);
}
this.tmpCanvas = getBrushMark(this.size, this.color);
this.cursorPreview = new paper.Raster(this.tmpCanvas);
this.cursorPreview.guide = true;
this.cursorPreview.parent = getGuideLayer();
this.cursorPreview.data.isHelperItem = true;
}
this.lastSize = this.size;
this.lastColor = this.color;
}

22
src/helper/bit-tools/line-tool.js
View file

@ -1,6 +1,6 @@
import paper from '@scratch/paper';
import {getRaster} from '../layer';
import {forEachLinePoint, fillEllipse} from '../bitmap';
import {forEachLinePoint, getBrushMark} from '../bitmap';
import {getGuideLayer} from '../layer';
import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT} from '../view';
@ -56,25 +56,7 @@ class LineTool extends paper.Tool {
this.cursorPreview.remove();
}
this.tmpCanvas = document.createElement('canvas');
const roundedUpRadius = Math.ceil(this.size / 2);
this.tmpCanvas.width = roundedUpRadius * 2;
this.tmpCanvas.height = roundedUpRadius * 2;
const context = this.tmpCanvas.getContext('2d');
context.imageSmoothingEnabled = false;
context.fillStyle = this.color;
// Small squares for pixel artists
if (this.size <= 5) {
if (this.size % 2) {
context.fillRect(1, 1, this.size, this.size);
} else {
context.fillRect(0, 0, this.size, this.size);
}
} else {
const roundedDownRadius = ~~(this.size / 2);
fillEllipse(roundedDownRadius, roundedDownRadius, roundedDownRadius, roundedDownRadius, context);
}
this.tmpCanvas = getBrushMark(this.size, this.color);
this.cursorPreview = new paper.Raster(this.tmpCanvas);
this.cursorPreview.guide = true;
this.cursorPreview.parent = getGuideLayer();

29
src/helper/bitmap.js
View file

@ -81,6 +81,34 @@ const fillEllipse = function (centerX, centerY, radiusX, radiusY, context) {
}
};
/**
* @param {!number} size The diameter of the brush
* @param {!string} color The css color of the brush
* @return {HTMLCanvasElement} a canvas with the brush mark printed on it
*/
const getBrushMark = function (size, color) {
size = ~~size;
const canvas = document.createElement('canvas');
const roundedUpRadius = Math.ceil(size / 2);
canvas.width = roundedUpRadius * 2;
canvas.height = roundedUpRadius * 2;
const context = canvas.getContext('2d');
context.imageSmoothingEnabled = false;
context.fillStyle = color;
// Small squares for pixel artists
if (size <= 5) {
if (size % 2) {
context.fillRect(1, 1, size, size);
} else {
context.fillRect(0, 0, size, size);
}
} else {
const roundedDownRadius = ~~(size / 2);
fillEllipse(roundedDownRadius, roundedDownRadius, roundedDownRadius, roundedDownRadius, context);
}
return canvas;
};
const rowBlank_ = function (imageData, width, y) {
for (let x = 0; x < width; ++x) {
if (imageData.data[(y * width << 2) + (x << 2) + 3] !== 0) return false;
@ -114,6 +142,7 @@ const trim = function (raster) {
};
export {
getBrushMark,
fillEllipse,
forEachLinePoint,
trim