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

Fixed zooming bug. Eraser tool implementation definitely completed.

Browse Source 
Signed-off-by: npalomba <nicola.palomba@studenti.galileilivorno.gov.it>
This commit is contained in:
npalomba 2019-03-31 18:41:08 +02:00
parent 16d816db18
commit 13cc6fe3b2
6 changed files with 30 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
js/_canvas.js
View File

@ -23,10 +23,17 @@ function Canvas(width, height, canvas) {
this.canvas.style.top = 48+canvasView.clientHeight/2-(this.canvasSize[1]*zoom/2)+'px';
},
this.resize = function() {
let newWidth = (this.canvas.width*zoom)+'px';
let newHeight = (this.canvas.height*zoom)+'px';
let newWidth = (this.canvas.width * zoom) + 'px';
let newHeight = (this.canvas.height *zoom)+ 'px';
this.canvas.style.width = newWidth;
this.canvas.style.height = newHeight;
},
this.copyData = function(otherCanvas) {
this.canvas.style.width = otherCanvas.canvas.style.width;
this.canvas.style.height = otherCanvas.canvas.style.height;
this.canvas.style.left = otherCanvas.canvas.style.left;
this.canvas.style.top = otherCanvas.canvas.style.top;
}
}

5
js/_changeZoom.js
View File

@ -1,6 +1,5 @@
function changeZoom (layer, direction, cursorLocation) {
var oldWidth = canvasSize[0] * zoom;
var oldHeight = canvasSize[1] * zoom;
var newWidth, newHeight;
@ -22,13 +21,11 @@ function changeZoom (layer, direction, cursorLocation) {
newHeight = canvasSize[1] * zoom;
//adjust canvas position
setCanvasOffset(layer.canvas, canvas, layer.canvas.offsetLeft - Math.round((newWidth - oldWidth)*cursorLocation[0]/oldWidth), layer.canvas.offsetTop - Math.round((newHeight - oldHeight)*cursorLocation[1]/oldHeight))
setCanvasOffset(layer.canvas, layer.canvas.offsetLeft - Math.round((newWidth - oldWidth)*cursorLocation[0]/oldWidth), layer.canvas.offsetTop - Math.round((newHeight - oldHeight)*cursorLocation[1]/oldHeight))
}
//resize canvas
for (let i=0; i<layers.length; i++) {
layer.resize();
}
// adjust brush size
updateCursor();

29
js/_mouseEvents.js
View File

@ -93,7 +93,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
//fill starting at the location
fill(cursorLocation);
}
else if (currentTool == 'zoom' && mouseEvent.target == currentLayer.canvas) {
else if (currentTool == 'zoom') {
let mode;
if (mouseEvent.which == 1){
mode = "in";
@ -102,8 +102,10 @@ window.addEventListener("mouseup", function (mouseEvent) {
mode = "out";
}
for (let i=0; i<layers.length; i++) {
changeZoom(layers[i], mode, getCursorPosition(mouseEvent))
changeZoom(layers[0], mode, getCursorPosition(mouseEvent));
for (let i=1; i<layers.length; i++) {
layers[i].copyData(layers[0]);
}
}
@ -180,21 +182,6 @@ function draw (mouseEvent) {
for (let i=0; i<layers.length; i++) {
setCanvasOffset(layers[i].canvas, layers[i].canvas.offsetLeft + (cursorLocation[0] - lastPos[0]), layers[i].canvas.offsetTop + (cursorLocation[1] - lastPos[1]))
}
/*
if (
//right
currentLayer.canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) < window.innerWidth - currentLayer.canvasSize[0]*zoom*0.25 - 48 &&
//left
currentLayer.canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) > -canvasSize[0]*zoom*0.75 + 64)
canvas.style.left = canvas.offsetLeft + (cursorLocation[0] - lastPos[0]) +'px';
if (
//bottom
canvas.offsetTop + (cursorLocation[1] - lastPos[1]) < window.innerHeight-canvasSize[1]*zoom*0.25 &&
//top
currentLayer.canvas.offsetTop + (cursorLocation[1] - lastPos[1]) > -canvasSize[0]*zoom*0.75 + 48)
currentLayer.canvas.style.top = currentLayer.canvas.offsetTop + (cursorLocation[1] - lastPos[1]) +'px';
*/
}
else if (currentTool == 'eyedropper' && dragging && mouseEvent.target == currentLayer.canvas) {
var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data;
@ -242,8 +229,10 @@ canvasView.addEventListener("wheel", function(mouseEvent){
mode = 'out';
}
for (let i=0; i<layers.length; i++) {
changeZoom(layers[i], mode, getCursorPosition(mouseEvent))
changeZoom(layers[0], mode, getCursorPosition(mouseEvent))
for (let i=1; i<layers.length; i++) {
layers[i].copyData(layers[0]);
}
}

3
js/_setCanvasOffset.js
View File

@ -1,8 +1,7 @@
function setCanvasOffset (canvas, offsetLeft, offsetTop) {
//horizontal offset
var minXOffset = -canvasSize[0]*zoom+ 164;
var maxXOffset = window.innerWidth - 148
var maxXOffset = window.innerWidth - 148;
if (offsetLeft < minXOffset)
canvas.style.left = minXOffset +'px';

12
js/_toolButtons.js
View File

@ -55,14 +55,18 @@ on('click',"zoom-button", function(){
//zoom in button
on('click',"zoom-in-button", function(){
//changeZoom('in',[window.innerWidth/2-canvas.offsetLeft,window.innerHeight/2-canvas.offsetTop]);
for (let i=0; i<layers.length; i++) {
changeZoom(layers[i],'in', [canvasSize[0] * zoom / 2, canvasSize[1] * zoom / 2]);
changeZoom(layers[0],'in', [canvasSize[0] * zoom / 2, canvasSize[1] * zoom / 2]);
for (let i=1; i<layers.length; i++) {
layers[i].copyData(layers[0]);
}
}, false);
//zoom out button
on('click',"zoom-out-button", function(){
for (let i=0; i<layers.length; i++) {
changeZoom(layers[i],'out',[canvasSize[0]*zoom/2,canvasSize[1]*zoom/2]);
changeZoom(layers[0],'out',[canvasSize[0]*zoom/2,canvasSize[1]*zoom/2]);
for (let i=1; i<layers.length; i++) {
layers[i].copyData(layers[0]);
}
}, false);

1
js/pixel-editor.js
View File

@ -43,6 +43,7 @@
//=include _replaceAllOfColor.js
//=include _checkerboard.js
//=include _canvas.js
//=include _layers.js
/**load file**/