diff --git a/src/pages/detect.vue b/src/pages/detect.vue index e14130e..b3e6884 100644 --- a/src/pages/detect.vue +++ b/src/pages/detect.vue @@ -639,14 +639,17 @@ } }, spinWheel(event) { + console.log(event) if (event.wheelDelta > 0) { + let scaleChange = this.canvasZoom * .05 this.canvasZoom *= 1.05 - this.canvasOffset.x = (((1.05 ** -1) - 1)*event.clientX + this.canvasOffset.x)*1.05 - this.canvasOffset.y = (((1.05 ** -1) - 1)*event.clientY + this.canvasOffset.y)*1.05 + this.canvasOffset.x += -(event.offsetX * scaleChange) + this.canvasOffset.y += -(event.offsetY * scaleChange) } else if (event.wheelDelta < 0) { + let scaleChange = this.canvasZoom * (1 / 1.05 - 1) this.canvasZoom /= 1.05 - this.canvasOffset.x = ((.05)*event.clientX + this.canvasOffset.x)/1.05 - this.canvasOffset.y = ((.05)*event.clientY + this.canvasOffset.y)/1.05 + this.canvasOffset.x += -(event.offsetX * scaleChange) + this.canvasOffset.y += -(event.offsetY * scaleChange) } this.selectChip("redraw") } diff --git a/src/pages/touch-mixin.js b/src/pages/touch-mixin.js index 1a6dcfb..4c4981c 100644 --- a/src/pages/touch-mixin.js +++ b/src/pages/touch-mixin.js @@ -10,19 +10,22 @@ export default { this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY} } if (event.touches.length == 2) { - this.touchPrevious = {distance: this.touchDistance(event.touches)} + let midX = (event.touches.item(0).clientX + event.touches.item(1).clientX) / 2 + let midY = (event.touches.item(0).clientY + event.touches.item(1).clientY) / 2 + this.touchPrevious = {distance: this.touchDistance(event.touches), x: midX, y: midY} } }, endTouch(event) { if (event.touches.length == 1) { this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY} } else { - this.debugInfo = null + //this.debugInfo = null } }, moveTouch(event) { switch (event.touches.length) { case 1: + console.log(event) this.canvasOffset.x += event.touches[0].clientX - this.touchPrevious.x this.canvasOffset.y += event.touches[0].clientY - this.touchPrevious.y this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY} @@ -32,10 +35,11 @@ export default { let midX = (event.touches.item(0).clientX + event.touches.item(1).clientX) / 2 let midY = (event.touches.item(0).clientY + event.touches.item(1).clientY) / 2 let scale = newDistance / this.touchPrevious.distance + let scaleChange = this.canvasZoom * (scale - 1) this.canvasZoom *= scale - this.canvasOffset.x = (((scale ** -1) - 1) * midX + this.canvasOffset.x) * scale - this.canvasOffset.y = (((scale ** -1) - 1) * midY + this.canvasOffset.y) * scale - this.touchPrevious = {distance: newDistance} + this.canvasOffset.x += -((midX - 16) * scaleChange) + (midX - this.touchPrevious.x) + this.canvasOffset.y += -((midY - 96) * scaleChange) + (midY - this.touchPrevious.y) + this.touchPrevious = {distance: newDistance, x: midX, y: midY} break; } this.selectChip("redraw")