From 7dec2f14907cfe5a88d3e56e9e2ced535e5a4aa5 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Sun, 15 Mar 2020 16:32:48 +0100 Subject: [PATCH] Fixed some bugs :cool: --- js/_drawLine.js | 28 ++++++++++++++++++++++++++++ js/_layer.js | 1 + js/_newPixel.js | 2 +- js/_rectSelect.js | 13 ++++++------- js/_rectangle.js | 8 +++++++- 5 files changed, 43 insertions(+), 9 deletions(-) diff --git a/js/_drawLine.js b/js/_drawLine.js index 1bf9b49..455cffe 100644 --- a/js/_drawLine.js +++ b/js/_drawLine.js @@ -18,6 +18,34 @@ function line(x0,y0,x1,y1, brushSize) { currentLayer.context.clearRect(x0-Math.floor(eraserSize/2), y0-Math.floor(eraserSize/2), eraserSize, eraserSize); } + //if we've reached the end goal, exit the loop + if ((x0==x1) && (y0==y1)) break; + var e2 = 2*err; + if (e2 >-dy) {err -=dy; x0+=sx;} + if (e2 < dx) {err +=dx; y0+=sy;} + } +} + +//draw a line between two points on canvas +function lineOnLayer(x0,y0,x1,y1, brushSize, context) { + + var dx = Math.abs(x1-x0); + var dy = Math.abs(y1-y0); + var sx = (x0 < x1 ? 1 : -1); + var sy = (y0 < y1 ? 1 : -1); + var err = dx-dy; + + while (true) { + //set pixel + // If the current tool is the brush + if (currentTool == 'pencil' || currentTool == 'rectangle') { + // I fill the rect + context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize); + } else if (currentTool == 'eraser') { + // In case I'm using the eraser I must clear the rect + context.clearRect(x0-Math.floor(eraserSize/2), y0-Math.floor(eraserSize/2), eraserSize, eraserSize); + } + //if we've reached the end goal, exit the loop if ((x0==x1) && (y0==y1)) break; var e2 = 2*err; diff --git a/js/_layer.js b/js/_layer.js index 7b8621e..614b25d 100644 --- a/js/_layer.js +++ b/js/_layer.js @@ -40,6 +40,7 @@ function Layer(width, height, canvas) { this.canvas.style.top = 48+canvasView.clientHeight/2-(this.canvasSize[1]*zoom/2)+'px'; this.context.imageSmoothingEnabled = false; + this.context.mozImageSmoothingEnabled = false; }, // Resizes canvas this.resize = function() { diff --git a/js/_newPixel.js b/js/_newPixel.js index 4fd9c5f..9f38ec7 100644 --- a/js/_newPixel.js +++ b/js/_newPixel.js @@ -21,7 +21,7 @@ function newPixel (width, height, palette) { layers.push(TMPLayer); layers.push(currentLayer); layers.push(checkerBoard); - + //remove current palette colors = document.getElementsByClassName('color-button'); while (colors.length > 0) { diff --git a/js/_rectSelect.js b/js/_rectSelect.js index e286f39..e7a11f3 100644 --- a/js/_rectSelect.js +++ b/js/_rectSelect.js @@ -10,8 +10,8 @@ function startRectSelection(mouseEvent) { // Saving the start coords of the rect let cursorPos = getCursorPosition(mouseEvent); - startX = Math.round(cursorPos[0] / zoom) + 0.5; - startY = Math.round(cursorPos[1] / zoom) + 0.5; + startX = Math.round(cursorPos[0] / zoom) - 0.5; + startY = Math.round(cursorPos[1] / zoom) - 0.5; // Avoiding external selections if (startX < 0) { @@ -43,8 +43,8 @@ function updateRectSelection(mouseEvent) { function endRectSelection(mouseEvent) { // Getting the end position let currentPos = getCursorPosition(mouseEvent); - endX = Math.round(currentPos[0] / zoom); - endY = Math.round(currentPos[1] / zoom); + endX = Math.round(currentPos[0] / zoom) + 0.5; + endY = Math.round(currentPos[1] / zoom) + 0.5; // Inverting end and start (start must always be the top left corner) if (endX < startX) { @@ -62,9 +62,9 @@ function endRectSelection(mouseEvent) { // Resetting this isRectSelecting = false; // Getting the selected pixels - imageDataToMove = currentLayer.context.getImageData(startX, startY, endX - startX, endY - startY); + imageDataToMove = currentLayer.context.getImageData(startX, startY, endX - startX + 1, endY - startY + 1); - currentLayer.context.clearRect(startX, startY, endX - startX - 1, endY - startY - 1); + currentLayer.context.clearRect(startX - 1, startY - 1, endX - startX + 1, endY - startY + 1); // Moving those pixels from the current layer to the tmp layer TMPLayer.context.putImageData(imageDataToMove, startX, startY); @@ -78,7 +78,6 @@ function endRectSelection(mouseEvent) { } function drawRect(x, y) { - console.log("Currently selecting"); // Getting the vfx context let vfxContext = VFXCanvas.getContext("2d"); diff --git a/js/_rectangle.js b/js/_rectangle.js index 3976ddd..3249ce4 100644 --- a/js/_rectangle.js +++ b/js/_rectangle.js @@ -93,7 +93,13 @@ function drawRectangle(x, y) { // Drawing the rect vfxContext.beginPath(); - vfxContext.rect(startRectX, startRectY, x - startRectX, y - startRectY); + if ((rectangleSize % 2 ) == 0) { + vfxContext.rect(startRectX - 0.5, startRectY - 0.5, x - startRectX, y - startRectY); + } + else { + vfxContext.rect(startRectX, startRectY, x - startRectX, y - startRectY); + } + vfxContext.setLineDash([]); vfxContext.stroke();