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

Redo fill logic

Browse source
This commit is contained in:
DD 2018-06-25 16:49:28 -04:00
parent c08c534bff
commit f4df0e07af
2 changed files with 22 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/helper/bit-tools/rect-tool.js
View file

@ -1,6 +1,6 @@
import paper from '@scratch/paper';
import Modes from '../../lib/modes';
import {drawRect} from '../bitmap';
import {fillRect} from '../bitmap';
import {createCanvas, getRaster} from '../layer';
import {clearSelection} from '../selection';
import BoundingBoxTool from '../selection-tools/bounding-box-tool';
@ -134,7 +134,7 @@ class RectTool extends paper.Tool {
const tmpCanvas = createCanvas();
const context = tmpCanvas.getContext('2d');
context.fillStyle = this.color;
drawRect(this.rect, context);
fillRect(this.rect, context);
getRaster().drawImage(tmpCanvas, new paper.Point());
this.rect.remove();

32
src/helper/bitmap.js
View file

@ -523,7 +523,7 @@ const floodFillAll = function (x, y, color, context) {
* @param {!paper.Shape.Rectangle} rect The rectangle to draw to the canvas
* @param {!HTMLCanvas2DContext} context The context in which to draw
*/
const drawRect = function (rect, context) {
const fillRect = function (rect, context) {
// No rotation component to matrix
if (rect.matrix.b === 0 && rect.matrix.c === 0) {
const width = rect.size.width * rect.matrix.a;
@ -541,25 +541,27 @@ const drawRect = function (rect, context) {
const heightPoint = rect.matrix.transform(new paper.Point(-rect.size.width / 2, rect.size.height / 2));
const endPoint = rect.matrix.transform(new paper.Point(rect.size.width / 2, rect.size.height / 2));
const center = rect.matrix.transform(new paper.Point());
forEachLinePoint(startPoint, widthPoint, (x, y) => {
context.fillRect(x, y, 1, 1);
});
forEachLinePoint(startPoint, heightPoint, (x, y) => {
context.fillRect(x, y, 1, 1);
});
forEachLinePoint(endPoint, widthPoint, (x, y) => {
context.fillRect(x, y, 1, 1);
});
forEachLinePoint(endPoint, heightPoint, (x, y) => {
context.fillRect(x, y, 1, 1);
});
floodFill(~~center.x, ~~center.y, context.fillStyle, context);
const points = [startPoint, widthPoint, heightPoint, endPoint].sort((a, b) => a.x - b.x);
const solveY = (point1, point2, x) => {
if (point2.x === point1.x) return center.x > point1.x ? Number.NEGATIVE_INFINITY : Number.POSITIVE_INFINITY;
return ((point2.y - point1.y) / (point2.x - point1.x) * (x - point1.x)) + point1.y;
};
for (let x = Math.round(points[0].x); x < Math.round(points[3].x); x++) {
const ys = [
solveY(startPoint, widthPoint, x + .5),
solveY(startPoint, heightPoint, x + .5),
solveY(endPoint, widthPoint, x + .5),
solveY(endPoint, heightPoint, x + .5)
].sort((a, b) => a - b);
context.fillRect(x, Math.round(ys[1]), 1, Math.max(1, Math.round(ys[2]) - Math.round(ys[1])));
}
};
export {
convertToBitmap,
convertToVector,
drawRect,
fillRect,
floodFill,
floodFillAll,
getBrushMark,