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

Finished empty rectangle tool

Browse Source
This commit is contained in:
unsettledgames 2020-03-07 16:49:01 +01:00
parent 2024ddced6
commit 30282fe795
6 changed files with 76 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/_drawLine.js
View File

@ -1,5 +1,5 @@
//draw a line between two points on canvas
function line(x0,y0,x1,y1) {
function line(x0,y0,x1,y1, brushSize) {
var dx = Math.abs(x1-x0);
var dy = Math.abs(y1-y0);
@ -10,7 +10,7 @@ function line(x0,y0,x1,y1) {
while (true) {
//set pixel
// If the current tool is the brush
if (currentTool == 'pencil') {
if (currentTool == 'pencil' || currentTool == 'rectangle') {
// I fill the rect
currentLayer.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
} else if (currentTool == 'eraser') {

2
js/_layer.js
View File

@ -38,6 +38,8 @@ function Layer(width, height, canvas) {
//center canvas in window
this.canvas.style.left = 64+canvasView.clientWidth/2-(this.canvasSize[0]*zoom/2)+'px';
this.canvas.style.top = 48+canvasView.clientHeight/2-(this.canvasSize[1]*zoom/2)+'px';
this.context.imageSmoothingEnabled = false;
},
// Resizes canvas
this.resize = function() {

52
js/_mouseEvents.js
View File

@ -15,7 +15,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
lastPos = getCursorPosition(mouseEvent);
dragging = true;
//left or right click
//left or right click ?
if (mouseEvent.which == 1) {
if (spacePressed)
currentTool = 'pan';
@ -31,13 +31,17 @@ window.addEventListener("mousedown", function (mouseEvent) {
}
else if (currentTool == 'pencil' && mouseEvent.which == 3) {
currentTool = 'resize-brush';
prevBrushSize = brushSize;
prevBrushSize = pencilSize;
}
else if (currentTool == 'eraser' && mouseEvent.which == 3) {
currentTool = 'resize-eraser';
prevEraserSize = eraserSize;
}
else if (currentTool == 'rectangle' && mouseEvent.which == 3) {
currentTool = 'resize-rectangle';
prevRectangleSize = rectangleSize;
}
if (currentTool == 'eyedropper' && mouseEvent.target.className == 'drawingCanvas')
eyedropperPreview.style.display = 'block';
@ -145,10 +149,9 @@ function draw (mouseEvent) {
eyedropperPreview.style.display = 'none';
if (currentTool == 'pencil') {
//move the brush preview
brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - brushSize * zoom / 2 + 'px';
brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - brushSize * zoom / 2 + 'px';
brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - pencilSize * zoom / 2 + 'px';
brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - pencilSize * zoom / 2 + 'px';
//hide brush preview outside of canvas / canvas view
if (mouseEvent.target.className == 'drawingCanvas'|| mouseEvent.target.className == 'drawingCanvas')
@ -159,7 +162,7 @@ function draw (mouseEvent) {
//draw line to current pixel
if (dragging) {
if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') {
line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom));
line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), pencilSize);
lastPos = cursorLocation;
}
}
@ -188,13 +191,23 @@ function draw (mouseEvent) {
//draw line to current pixel
if (dragging) {
if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') {
line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom));
line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), eraserSize);
lastPos = cursorLocation;
}
}
}
else if (currentTool == 'rectangle')
{
//move the brush preview
brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - rectangleSize * zoom / 2 + 'px';
brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - rectangleSize * zoom / 2 + 'px';
//hide brush preview outside of canvas / canvas view
if (mouseEvent.target.className == 'drawingCanvas'|| mouseEvent.target.className == 'drawingCanvas')
brushPreview.style.visibility = 'visible';
else
brushPreview.style.visibility = 'hidden';
if (!isDrawingRect && dragging) {
startRectDrawing(mouseEvent);
}
@ -234,11 +247,11 @@ function draw (mouseEvent) {
var newBrushSize = prevBrushSize + brushSizeChange;
//set the brush to the new size as long as its bigger than 1
brushSize = Math.max(1,newBrushSize);
pencilSize = Math.max(1,newBrushSize);
//fix offset so the cursor stays centered
brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - brushSize * zoom / 2 + 'px';
brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - brushSize * zoom / 2 + 'px';
brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - pencilSize * zoom / 2 + 'px';
brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - pencilSize * zoom / 2 + 'px';
updateCursor();
}
@ -259,6 +272,23 @@ function draw (mouseEvent) {
updateCursor();
}
else if (currentTool == 'resize-rectangle' && dragging) {
//get new brush size based on x distance from original clicking location
var distanceFromClick = cursorLocation[0] - lastPos[0];
//var roundingAmount = 20 - Math.round(distanceFromClick/10);
//this doesnt work in reverse... because... it's not basing it off of the brush size which it should be
var rectangleSizeChange = Math.round(distanceFromClick/10);
var newRectangleSize = prevRectangleSize + rectangleSizeChange;
//set the brush to the new size as long as its bigger than 1
rectangleSize = Math.max(1,newRectangleSize);
//fix offset so the cursor stays centered
brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - rectangleSize * zoom / 2 + 'px';
brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - rectangleSize * zoom / 2 + 'px';
updateCursor();
}
else if (currentTool == 'rectselect') {
if (dragging && !isRectSelecting) {
isRectSelecting = true;

34
js/_rectangle.js
View File

@ -1,4 +1,6 @@
var rectangleSize = 1;
var prevRectangleSie = rectangleSize;
var drawMode = 'empty';
var isDrawingRect = false;
@ -54,29 +56,33 @@ function endRectDrawing(mouseEvent) {
// Resetting this
isDrawingRect = false;
// Drawing the rect
startRectY -= 0.5;
endRectY -= 0.5;
endRectX -= 0.5;
startRectX -= 0.5;
currentLayer.context.lineWidth = rectangleSize;
currentLayer.context.fillStyle = currentGlobalColor;
line(startRectX, startRectY, endRectX, startRectY, rectangleSize);
line(endRectX, startRectY, endRectX, endRectY, rectangleSize);
line(endRectX, endRectY, startRectX, endRectY, rectangleSize);
line(startRectX, endRectY, startRectX, startRectY, rectangleSize);
/*
// Drawing the final rectangle
currentLayer.context.lineWidth = rectangleSize;
currentLayer.context.strokeStyle = currentGlobalColor;
// Drawing the rect
currentLayer.context.beginPath();
console.log("Coords: " + startRectX + ", " + startRectY);
currentLayer.context.imageSmoothingEnabled = false;
currentLayer.context.rect(startRectX, startRectY, endRectX - startRectX, endRectY - startRectY);
currentLayer.context.setLineDash([]);
currentLayer.context.stroke();
// Drawing on the corners
var id = currentLayer.context.createImageData(1,1);
var d = id.data;
d[0] = hexColor.r;
d[1] = hexColor.g;
d[2] = hexColor.b;
d[3] = 255;
currentLayer.context.putImageData(id, startRectX, startRectY);
currentLayer.context.putImageData(id, startRectX, endRectY);
currentLayer.context.putImageData(id, endRectX, startRectY);
currentLayer.context.putImageData(id, endRectX, endRectY);
*/
// Clearing the vfx canvas
vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height);
}

14
js/_updateCursor.js
View File

@ -4,14 +4,20 @@ function updateCursor () {
if (currentTool == 'pencil' || currentTool == 'resize-brush') {
canvasView.style.cursor = 'crosshair';
brushPreview.style.display = 'block';
brushPreview.style.width = brushSize * zoom + 'px';
brushPreview.style.height = brushSize * zoom + 'px';
brushPreview.style.width = pencilSize * zoom + 'px';
brushPreview.style.height = pencilSize * zoom + 'px';
} else if (currentTool == 'eraser' || currentTool == 'resize-eraser') {
canvasView.style.cursor = 'crosshair';
brushPreview.style.display = 'block';
brushPreview.style.width = eraserSize * zoom + 'px';
brushPreview.style.height = eraserSize * zoom + 'px';
} else if (currentTool == 'moveselection') {
} else if (currentTool == 'rectangle' || currentTool == 'resize-rectangle') {
canvasView.style.cursor = 'crosshair';
brushPreview.style.display = 'block';
brushPreview.style.width = rectangleSize * zoom + 'px';
brushPreview.style.height = rectangleSize * zoom + 'px';
}
else if (currentTool == 'moveselection') {
if (cursorInSelectedArea()) {
canMoveSelection = true;
canvasView.style.cursor = 'move';
@ -21,7 +27,7 @@ function updateCursor () {
canvasView.style.cursor = 'crosshair';
}
}
else if (currentTool == 'rectselect' || currentTool == 'rectangle')
else if (currentTool == 'rectselect')
canvasView.style.cursor = 'crosshair';
else
brushPreview.style.display = 'none';

2
js/_variables.js
View File

@ -4,7 +4,7 @@ var dragging = false;
var lastPos = [0,0];
var currentTool = 'pencil';
var currentToolTemp = 'pencil';
var brushSize = 1;
var pencilSize = 1;
var eraserSize = 1;
var prevBrushSize = 1;
var prevEraserSize = 1;