ALVINN/ALVINN_f7
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Improve zoom accuracy

Browse Source 
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
Justin Georgi
2024-09-21 14:17:51 -07:00
parent 601cf28d89
commit a457453e95
2 changed files with 16 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/detect.vue
View File

@@ -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")
}

14
src/pages/touch-mixin.js
View File

@@ -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")