From 30282fe79553ffd150b172cd21cdc421d5dd6cff Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Sat, 7 Mar 2020 16:49:01 +0100 Subject: [PATCH] Finished empty rectangle tool --- js/_drawLine.js | 4 ++-- js/_layer.js | 2 ++ js/_mouseEvents.js | 52 +++++++++++++++++++++++++++++++++++---------- js/_rectangle.js | 34 +++++++++++++++++------------ js/_updateCursor.js | 14 ++++++++---- js/_variables.js | 2 +- 6 files changed, 76 insertions(+), 32 deletions(-) diff --git a/js/_drawLine.js b/js/_drawLine.js index 7008a7b..1bf9b49 100644 --- a/js/_drawLine.js +++ b/js/_drawLine.js @@ -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') { diff --git a/js/_layer.js b/js/_layer.js index 7f68915..7b8621e 100644 --- a/js/_layer.js +++ b/js/_layer.js @@ -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() { diff --git a/js/_mouseEvents.js b/js/_mouseEvents.js index a469018..80d5d19 100644 --- a/js/_mouseEvents.js +++ b/js/_mouseEvents.js @@ -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; diff --git a/js/_rectangle.js b/js/_rectangle.js index 23259c4..e7458fc 100644 --- a/js/_rectangle.js +++ b/js/_rectangle.js @@ -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); } diff --git a/js/_updateCursor.js b/js/_updateCursor.js index fd7016d..bd564b8 100644 --- a/js/_updateCursor.js +++ b/js/_updateCursor.js @@ -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'; diff --git a/js/_variables.js b/js/_variables.js index 10695f5..8008542 100644 --- a/js/_variables.js +++ b/js/_variables.js @@ -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;