mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

Implemented empty ellipse

Browse Source
This commit is contained in:
Nicola
2022-01-23 12:41:42 +01:00
parent 832f36992b
commit f78d99053b
2 changed files with 82 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/ToolManager.js
View File

@ -6,7 +6,7 @@ const ToolManager = (() => {
tools["eraser"] = new EraserTool("eraser", {type: 'html'}, switchTool); tools["eraser"] = new EraserTool("eraser", {type: 'html'}, switchTool);
tools["rectangle"] = new RectangleTool("rectangle", {type: 'html'}, switchTool); tools["rectangle"] = new RectangleTool("rectangle", {type: 'html'}, switchTool);
tools["line"] = new LineTool("line", {type: 'html'}, switchTool); tools["line"] = new LineTool("line", {type: 'html'}, switchTool);
tools["ellipse"] = new EllipseTool("ellipse", {type: 'html'}, switchTool); tools["ellipse"] = new EllipseTool("ellipse", {type: 'cursor', style: 'crosshair'}, switchTool);
tools["fill"] = new FillTool("fill", {type: 'cursor', style: 'crosshair'}, switchTool); tools["fill"] = new FillTool("fill", {type: 'cursor', style: 'crosshair'}, switchTool);
tools["eyedropper"] = new EyeDropperTool("eyedropper", {type: 'cursor', style: 'crosshair'}, switchTool); tools["eyedropper"] = new EyeDropperTool("eyedropper", {type: 'cursor', style: 'crosshair'}, switchTool);

138
js/tools/EllipseTool.js
View File

@ -1,4 +1,4 @@
class EllipseTool extends DrawingTool { class EllipseTool extends ResizableTool {
// Saving the empty rect svg // Saving the empty rect svg
emptyEllipseSVG = document.getElementById("ellipse-empty-button-svg"); emptyEllipseSVG = document.getElementById("ellipse-empty-button-svg");
// and the full rect svg so that I can change them when the user changes rect modes // and the full rect svg so that I can change them when the user changes rect modes
@ -6,6 +6,8 @@ class EllipseTool extends DrawingTool {
// Current fill mode // Current fill mode
currFillMode = 'empty'; currFillMode = 'empty';
filledPixels = {};
switchFunction = null; switchFunction = null;
constructor(name, options, switchFunction) { constructor(name, options, switchFunction) {
@ -45,10 +47,10 @@ class EllipseTool extends DrawingTool {
new HistoryState().EditCanvas(); new HistoryState().EditCanvas();
} }
onDrag(mousePos, cursorTarget) { onDrag(mousePos) {
// Drawing the rect at the right position // Drawing the rect at the right position
this.drawRect(Math.floor(mousePos[0] / currFile.zoom) + 0.5, Math.floor(mousePos[1] / currFile.zoom) + 0.5); this.drawEllipse(Math.floor(mousePos[0] / currFile.zoom) + 0.5, Math.floor(mousePos[1] / currFile.zoom) + 0.5,
currFile.TMPLayer.context);
} }
/** Finishes drawing the rect, decides the end coordinates and moves the preview rectangle to the /** Finishes drawing the rect, decides the end coordinates and moves the preview rectangle to the
@ -60,44 +62,17 @@ class EllipseTool extends DrawingTool {
super.onEnd(mousePos); super.onEnd(mousePos);
let tmpContext = currFile.TMPLayer.context; let tmpContext = currFile.TMPLayer.context;
let endRectX = Math.floor(mousePos[0] / currFile.zoom) + 0.5; this.endMousePos[0] = Math.floor(mousePos[0] / currFile.zoom) + 0.5;
let endRectY = Math.floor(mousePos[1] / currFile.zoom) + 0.5; this.endMousePos[1] = Math.floor(mousePos[1] / currFile.zoom) + 0.5;
let startRectX = this.startMousePos[0];
let startRectY = this.startMousePos[1];
// Inverting end and start (start must always be the top left corner)
if (endRectX < startRectX) {
let tmp = endRectX;
endRectX = startRectX;
startRectX = tmp;
}
// Same for the y
if (endRectY < startRectY) {
let tmp = endRectY;
endRectY = startRectY;
startRectY = tmp;
}
// Drawing the rect
startRectY -= 0.5;
endRectY -= 0.5;
endRectX -= 0.5;
startRectX -= 0.5;
// Setting the correct linewidth and colour
currFile.currentLayer.context.lineWidth = this.currSize;
// Drawing the rect using 4 lines
currFile.currentLayer.drawLine(startRectX, startRectY, endRectX, startRectY, this.currSize);
currFile.currentLayer.drawLine(endRectX, startRectY, endRectX, endRectY, this.currSize);
currFile.currentLayer.drawLine(endRectX, endRectY, startRectX, endRectY, this.currSize);
currFile.currentLayer.drawLine(startRectX, endRectY, startRectX, startRectY, this.currSize);
// If I have to fill it, I do so // If I have to fill it, I do so
if (this.currFillMode == 'fill') { if (this.currFillMode == 'fill') {
currFile.currentLayer.context.fillRect(startRectX, startRectY, endRectX - startRectX, endRectY - startRectY); // Use the fill tool
} }
// Drawing the ellipse
this.drawEllipse(this.endMousePos[0], this.endMousePos[1], currFile.currentLayer.context);
// Update the layer preview // Update the layer preview
currFile.currentLayer.updateLayerPreview(); currFile.currentLayer.updateLayerPreview();
// Clearing the tmp canvas // Clearing the tmp canvas
@ -112,32 +87,81 @@ class EllipseTool extends DrawingTool {
super.onDeselect(); super.onDeselect();
} }
/** Draws a rectangle with end coordinates given by x and y on the tmp layer (draws /** Draws an ellipse with end coordinates given by x and y on the tmp layer (draws
* the preview for the rectangle tool) * the preview for the ellipse tool)
* *
* @param {*} x The current end x of the rectangle * @param {*} x The current end x of the ellipse
* @param {*} y The current end y of the rectangle * @param {*} y The current end y of the ellipse
*/ */
drawRect(x, y) { drawEllipse(x, y, context) {
// Getting the tmp context // Width and height of the ellipse
let tmpContext = currFile.TMPLayer.context; let width = undefined;
let height = undefined;
// Clearing the tmp canvas // Clearing the tmp canvas
tmpContext.clearRect(0, 0, currFile.TMPLayer.canvas.width, currFile.TMPLayer.canvas.height); currFile.TMPLayer.context.clearRect(0, 0, currFile.TMPLayer.canvas.width, currFile.TMPLayer.canvas.height);
// Drawing the rect // Compute width and height
tmpContext.lineWidth = this.currSize; width = Math.abs(x - this.startMousePos[0]);
height = Math.abs(y - this.startMousePos[1]);
// Drawing the rect // Drawing the ellipse
tmpContext.beginPath(); this.previewEllipse(context, this.startMousePos[0], this.startMousePos[1], width, height);
if ((this.currSize % 2 ) == 0) { }
tmpContext.rect(this.startMousePos[0] - 0.5, this.startMousePos[1] - 0.5, x - this.startMousePos[0], y - this.startMousePos[1]);
} previewEllipse(context, xc, yc, a, b) {
else { let x, y1, y2;
tmpContext.rect(this.startMousePos[0], this.startMousePos[1], x - this.startMousePos[0], y - this.startMousePos[1]); let toFill = {};
let removed = {};
x = xc - a;
while (x < (xc + a)) {
let root = Math.sqrt((1 - (((x - xc)*(x - xc)) / (a*a))) * b*b);
let flooredX = Math.floor(x);
let flooredY1, flooredY2;
y1 = root + yc;
y2 = -root + yc;
flooredY1 = Math.floor(y1);
flooredY2 = Math.floor(y2);
toFill[[flooredX, flooredY1]] = true;
toFill[[flooredX, flooredY2]] = true;
x += 0.005;
} }
tmpContext.setLineDash([]); for (const coord in toFill) {
tmpContext.stroke(); let arrayCoord = JSON.parse("[" + coord + "]");
if (arrayCoord[0]-xc > 0 || arrayCoord[1]-yc < 0) {
continue;
}
if (!(
// Top and left
(toFill[[arrayCoord[0], arrayCoord[1] - 1]] && toFill[[arrayCoord[0] - 1, arrayCoord[1]]] &&
!removed[[arrayCoord[0], arrayCoord[1] - 1]] && !removed[arrayCoord[0] - 1, arrayCoord[1]]) ||
// Top and right
(toFill[[arrayCoord[0], arrayCoord[1] - 1]] && toFill[[arrayCoord[0] + 1, arrayCoord[1]]] &&
!removed[[arrayCoord[0], arrayCoord[1] - 1]] && !removed[arrayCoord[0] + 1, arrayCoord[1]]) ||
// Bottom and left
(toFill[[arrayCoord[0], arrayCoord[1] + 1]] && toFill[[arrayCoord[0] - 1, arrayCoord[1]]] &&
!removed[[arrayCoord[0], arrayCoord[1] + 1]] && !removed[arrayCoord[0] - 1, arrayCoord[1]]) ||
// Bottom and right
(toFill[[arrayCoord[0], arrayCoord[1] + 1]] && toFill[[arrayCoord[0] + 1, arrayCoord[1]]] &&
!removed[[arrayCoord[0], arrayCoord[1] + 1]] && !removed[arrayCoord[0] + 1, arrayCoord[1]])) ||
removed[arrayCoord]) {
context.fillRect(arrayCoord[0], arrayCoord[1], this.currSize, this.currSize);
context.fillRect(xc + Math.abs(xc - arrayCoord[0]), arrayCoord[1], this.currSize, this.currSize);
context.fillRect(arrayCoord[0], yc - Math.abs(yc - arrayCoord[1]), this.currSize, this.currSize);
context.fillRect(xc + Math.abs(xc - arrayCoord[0]), yc - Math.abs(yc - arrayCoord[1]), this.currSize, this.currSize);
}
removed[arrayCoord] = true;
}
} }
} }