diff --git a/js/_canvas.js b/js/_canvas.js index b9cb556..5e39acf 100644 --- a/js/_canvas.js +++ b/js/_canvas.js @@ -1,7 +1,7 @@ function Canvas(width, height, canvas) { this.canvasSize = [width, height], this.canvas = canvas, - this.context = canvas.getContext("2d"), + this.context = this.canvas.getContext("2d"), this.initialize = function() { var maxHorizontalZoom = Math.floor(window.innerWidth/this.canvasSize[0]*0.75); var maxVerticalZoom = Math.floor(window.innerHeight/this.canvasSize[1]*0.75); @@ -25,11 +25,8 @@ function Canvas(width, height, canvas) { this.resize = function() { 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.width = newWidth; - this.height = newHeight; } } \ No newline at end of file diff --git a/js/_changeZoom.js b/js/_changeZoom.js index 832cd07..2304438 100644 --- a/js/_changeZoom.js +++ b/js/_changeZoom.js @@ -1,5 +1,5 @@ -function changeZoom (direction, cursorLocation) { +function changeZoom (layer, direction, cursorLocation) { var oldWidth = canvasSize[0] * zoom; var oldHeight = canvasSize[1] * zoom; @@ -13,7 +13,7 @@ function changeZoom (direction, cursorLocation) { newHeight = canvasSize[1] * zoom; //adjust canvas position - setCanvasOffset(canvas.offsetLeft + (oldWidth - newWidth) *cursorLocation[0]/oldWidth, canvas.offsetTop + (oldHeight - newHeight) *cursorLocation[1]/oldWidth) + setCanvasOffset(layer.canvas, layer.canvas.offsetLeft + (oldWidth - newWidth) *cursorLocation[0]/oldWidth, layer.canvas.offsetTop + (oldHeight - newHeight) *cursorLocation[1]/oldWidth) } //if you want to zoom in else if (direction == 'in' && zoom + Math.ceil(zoom/10) < window.innerHeight/4){ @@ -22,12 +22,13 @@ function changeZoom (direction, cursorLocation) { newHeight = canvasSize[1] * zoom; //adjust canvas position - setCanvasOffset(canvas.offsetLeft - Math.round((newWidth - oldWidth)*cursorLocation[0]/oldWidth), canvas.offsetTop - Math.round((newHeight - oldHeight)*cursorLocation[1]/oldHeight)) + setCanvasOffset(layer.canvas, canvas, layer.canvas.offsetLeft - Math.round((newWidth - oldWidth)*cursorLocation[0]/oldWidth), layer.canvas.offsetTop - Math.round((newHeight - oldHeight)*cursorLocation[1]/oldHeight)) } //resize canvas - canvas.style.width = (canvas.width*zoom)+'px'; - canvas.style.height = (canvas.height*zoom)+'px'; + for (let i=0; i 0) changeZoom('out', getCursorPosition(mouseEvent)) + let mode; + if (mouseEvent.deltaY < 0){ + mode = 'in'; + } + else if (mouseEvent.deltaY > 0) { + mode = 'out'; + } + + for (let i=0; i 0) { diff --git a/js/_setCanvasOffset.js b/js/_setCanvasOffset.js index 3730fef..c1b8ecc 100644 --- a/js/_setCanvasOffset.js +++ b/js/_setCanvasOffset.js @@ -1,4 +1,4 @@ -function setCanvasOffset (offsetLeft, offsetTop) { +function setCanvasOffset (canvas, offsetLeft, offsetTop) { //horizontal offset var minXOffset = -canvasSize[0]*zoom+ 164; @@ -6,19 +6,19 @@ function setCanvasOffset (offsetLeft, offsetTop) { if (offsetLeft < minXOffset) canvas.style.left = minXOffset +'px'; - else if (offsetLeft > maxXOffset) - canvas.style.left = maxXOffset +'px'; + else if (offsetLeft > maxXOffset) + canvas.style.left = maxXOffset +'px'; else - canvas.style.left = offsetLeft +'px'; + canvas.style.left = offsetLeft +'px'; //vertical offset var minYOffset = -canvasSize[1]*zoom + 164; var maxYOffset = window.innerHeight-100; if (offsetTop < minYOffset) - canvas.style.top = minYOffset +'px'; - else if (offsetTop > maxYOffset) - canvas.style.top = maxYOffset +'px'; + canvas.style.top = minYOffset +'px'; + else if (offsetTop > maxYOffset) + canvas.style.top = maxYOffset +'px'; else - canvas.style.top = offsetTop +'px'; + canvas.style.top = offsetTop +'px'; } \ No newline at end of file diff --git a/js/_toolButtons.js b/js/_toolButtons.js index ecad3fc..aa72958 100644 --- a/js/_toolButtons.js +++ b/js/_toolButtons.js @@ -54,11 +54,15 @@ 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]); - changeZoom('in',[canvasSize[0]*zoom/2,canvasSize[1]*zoom/2]); + //changeZoom('in',[window.innerWidth/2-canvas.offsetLeft,window.innerHeight/2-canvas.offsetTop]); + for (let i=0; i