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

Almost finishedrectangle tool

Browse Source 
Finished simple rectangle tool, must add the implementation for the size change.
This commit is contained in:
unsettledgames 2020-03-07 15:37:30 +01:00
parent fd37518e55
commit 2024ddced6
1 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
js/_rectangle.js
View File

@ -16,8 +16,8 @@ function startRectDrawing(mouseEvent) {
// Saving the start coords of the rect
let cursorPos = getCursorPosition(mouseEvent);
startRectX = Math.round(cursorPos[0] / zoom) + 0.5;
startRectY = Math.round(cursorPos[1] / zoom) + 0.5;
startRectX = Math.round(cursorPos[0] / zoom) - 0.5;
startRectY = Math.round(cursorPos[1] / zoom) - 0.5;
drawRectangle(startRectX, startRectY);
}
@ -34,8 +34,8 @@ function endRectDrawing(mouseEvent) {
let currentPos = getCursorPosition(mouseEvent);
let vfxContext = VFXCanvas.getContext("2d");
endRectX = Math.round(currentPos[0] / zoom);
endRectY = Math.round(currentPos[1] / zoom);
endRectX = Math.round(currentPos[0] / zoom) + 0.5;
endRectY = Math.round(currentPos[1] / zoom) + 0.5;
// Inverting end and start (start must always be the top left corner)
if (endRectX < startRectX) {
@ -50,6 +50,8 @@ function endRectDrawing(mouseEvent) {
startRectY = tmp;
}
let hexColor = hexToRgb(currentLayer.context.fillStyle);
// Resetting this
isDrawingRect = false;
// Drawing the final rectangle
@ -58,12 +60,27 @@ function endRectDrawing(mouseEvent) {
// Drawing the rect
currentLayer.context.beginPath();
currentLayer.context.rect(startRectX, startRectY, endRectX - startRectX + 0.5, endRectY - startRectY + 0.5);
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);
}
function drawRectangle(x, y) {
// Getting the vfx context
let vfxContext = VFXCanvas.getContext("2d");
@ -74,15 +91,13 @@ function drawRectangle(x, y) {
// Drawing the rect
vfxContext.lineWidth = rectangleSize;
vfxContext.strokeStyle = currentGlobalColor;
console.log("color: " + currentGlobalColor);
// Drawing the rect
vfxContext.beginPath();
vfxContext.rect(startRectX, startRectY, x - startRectX, y - startRectY);
vfxContext.setLineDash([]);
vfxContext.stroke();
// TODO: make the rect blink from black to white in case of dark backgrounds
}
function applyChanges() {