mirror
/
pixel-editor
mirror of https://github.com/lospec/pixel-editor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Finished ellipse tool

This commit is contained in:
Nicola 2022-01-23 13:32:23 +01:00
parent f78d99053b
commit cc460446b6
4 changed files with 55 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
js/Util.js
View File

@ -1,6 +1,37 @@
// Acts as a public static class
class Util {
/** Pastes the source image data on the destination image data, keeping the pixels where the
* source image data is transparent
*
* @param {*} source
* @param {*} destination
*/
static pasteData(underlyingImageData, pasteData, finalContext) {
for (let i=0; i<underlyingImageData.data.length; i+=4) {
let currentMovePixel = [
pasteData.data[i], pasteData.data[i+1], pasteData.data[i+2], pasteData.data[i+3]
];
let currentUnderlyingPixel = [
underlyingImageData.data[i], underlyingImageData.data[i+1],
underlyingImageData.data[i+2], underlyingImageData.data[i+3]
];
// If the pixel of the clipboard is empty, but the one below it isn't, I use the pixel below
if (Util.isPixelEmpty(currentMovePixel)) {
if (!Util.isPixelEmpty(currentUnderlyingPixel)) {
pasteData.data[i] = currentUnderlyingPixel[0];
pasteData.data[i+1] = currentUnderlyingPixel[1];
pasteData.data[i+2] = currentUnderlyingPixel[2];
pasteData.data[i+3] = currentUnderlyingPixel[3];
}
}
}
finalContext.putImageData(pasteData, 0, 0);
}
/** Tells if a pixel is empty (has alpha = 0)
*
* @param {*} pixel

20
js/tools/EllipseTool.js
View File

@ -35,9 +35,12 @@ class EllipseTool extends ResizableTool {
this.switchFunction(this);
}
onStart(mousePos) {
onStart(mousePos, mouseTarget) {
super.onStart(mousePos);
if (mouseTarget.className != "drawingCanvas")
return;
// Putting the tmp layer on top of everything
currFile.TMPLayer.canvas.style.zIndex = parseInt(currFile.currentLayer.canvas.style.zIndex, 10) + 1;
@ -60,6 +63,10 @@ class EllipseTool extends ResizableTool {
*/
onEnd(mousePos) {
super.onEnd(mousePos);
if (this.startMousePos == undefined)
return;
let tmpContext = currFile.TMPLayer.context;
this.endMousePos[0] = Math.floor(mousePos[0] / currFile.zoom) + 0.5;
@ -67,16 +74,21 @@ class EllipseTool extends ResizableTool {
// If I have to fill it, I do so
if (this.currFillMode == 'fill') {
// Use the fill tool
// Use the fill tool on the tmp canvas
FillTool.fill([this.startMousePos[0] * currFile.zoom, this.startMousePos[1] * currFile.zoom],
currFile.TMPLayer.context);
}
// Drawing the ellipse
this.drawEllipse(this.endMousePos[0], this.endMousePos[1], currFile.currentLayer.context);
Util.pasteData(currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]),
currFile.TMPLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]),
currFile.currentLayer.context);
// Update the layer preview
currFile.currentLayer.updateLayerPreview();
// Clearing the tmp canvas
tmpContext.clearRect(0, 0, currFile.TMPLayer.canvas.width, currFile.TMPLayer.canvas.height);
this.startMousePos = undefined;
}
onSelect() {

11
js/tools/FillTool.js
View File

@ -17,7 +17,7 @@ class FillTool extends DrawingTool {
}
fill(cursorLocation) {
static fill(cursorLocation, context) {
//changes a pixels color
function colorPixel(tempImage, pixelPos, fillColor) {
//console.log('colorPixel:',pixelPos);
@ -39,8 +39,11 @@ class FillTool extends DrawingTool {
return (r == color[0] && g == color[1] && b == color[2] && a == color[3]);
}
if (context == undefined)
context = currFile.currentLayer.context;
//temporary image holds the data while we change it
let tempImage = currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
let tempImage = context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
//this is an array that holds all of the pixels at the top of the cluster
let topmostPixelsArray = [[Math.floor(cursorLocation[0]/currFile.zoom), Math.floor(cursorLocation[1]/currFile.zoom)]];
@ -53,7 +56,7 @@ class FillTool extends DrawingTool {
let clusterColor = [tempImage.data[startingPosition],tempImage.data[startingPosition+1],tempImage.data[startingPosition+2], tempImage.data[startingPosition+3]];
//the color to fill with
let fillColor = Color.hexToRgb(currFile.currentLayer.context.fillStyle);
let fillColor = Color.hexToRgb(context.fillStyle);
//if you try to fill with the same color that's already there, exit the function
if (clusterColor[0] == fillColor.r &&
@ -118,7 +121,7 @@ class FillTool extends DrawingTool {
pixelPos += currFile.canvasSize[0] * 4;
}
}
currFile.currentLayer.context.putImageData(tempImage, 0, 0);
context.putImageData(tempImage, 0, 0);
}
onDrag(mousePos, cursorTarget) {

23
js/tools/SelectionTool.js
View File

@ -120,28 +120,7 @@ class SelectionTool extends Tool {
currFile.TMPLayer.context.clearRect(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
currFile.VFXLayer.context.clearRect(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
for (let i=0; i<underlyingImageData.data.length; i+=4) {
let currentMovePixel = [
pasteData.data[i], pasteData.data[i+1], pasteData.data[i+2], pasteData.data[i+3]
];
let currentUnderlyingPixel = [
underlyingImageData.data[i], underlyingImageData.data[i+1],
underlyingImageData.data[i+2], underlyingImageData.data[i+3]
];
// If the pixel of the clipboard is empty, but the one below it isn't, I use the pixel below
if (Util.isPixelEmpty(currentMovePixel)) {
if (!Util.isPixelEmpty(currentUnderlyingPixel)) {
pasteData.data[i] = currentUnderlyingPixel[0];
pasteData.data[i+1] = currentUnderlyingPixel[1];
pasteData.data[i+2] = currentUnderlyingPixel[2];
pasteData.data[i+3] = currentUnderlyingPixel[3];
}
}
}
currFile.currentLayer.context.putImageData(pasteData, 0, 0);
Util.pasteData(underlyingImageData, pasteData, currFile.currentLayer.context);
currFile.currentLayer.updateLayerPreview();
currFile.VFXLayer.canvas.style.zIndex = MIN_Z_INDEX;