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

Use canvas for image rendering #197

Merged
jgeorgi merged 8 commits from bas-canvas-update into main 2024-09-25 15:05:00 +00:00
Conversation 0 Commits 8 Files Changed 3 +140 -8
2 changed files with 140 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a457453e95 - Show all commits

11
src/pages/detect.vue
View File

@@ -639,14 +639,17 @@
} }
}, },
spinWheel(event) { spinWheel(event) {
console.log(event)
if (event.wheelDelta > 0) { if (event.wheelDelta > 0) {
let scaleChange = this.canvasZoom * .05
this.canvasZoom *= 1.05 this.canvasZoom *= 1.05
this.canvasOffset.x = (((1.05 ** -1) - 1)*event.clientX + this.canvasOffset.x)*1.05 this.canvasOffset.x += -(event.offsetX * scaleChange)
this.canvasOffset.y = (((1.05 ** -1) - 1)*event.clientY + this.canvasOffset.y)*1.05 this.canvasOffset.y += -(event.offsetY * scaleChange)
} else if (event.wheelDelta < 0) { } else if (event.wheelDelta < 0) {
let scaleChange = this.canvasZoom * (1 / 1.05 - 1)
this.canvasZoom /= 1.05 this.canvasZoom /= 1.05
this.canvasOffset.x = ((.05)*event.clientX + this.canvasOffset.x)/1.05 this.canvasOffset.x += -(event.offsetX * scaleChange)
this.canvasOffset.y = ((.05)*event.clientY + this.canvasOffset.y)/1.05 this.canvasOffset.y += -(event.offsetY * scaleChange)
} }
this.selectChip("redraw") 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} this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY}
} }
if (event.touches.length == 2) { 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) { endTouch(event) {
if (event.touches.length == 1) { if (event.touches.length == 1) {
this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY} this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY}
} else { } else {
this.debugInfo = null //this.debugInfo = null
} }
}, },
moveTouch(event) { moveTouch(event) {
switch (event.touches.length) { switch (event.touches.length) {
case 1: case 1:
console.log(event)
this.canvasOffset.x += event.touches[0].clientX - this.touchPrevious.x this.canvasOffset.x += event.touches[0].clientX - this.touchPrevious.x
this.canvasOffset.y += event.touches[0].clientY - this.touchPrevious.y this.canvasOffset.y += event.touches[0].clientY - this.touchPrevious.y
this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY} 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 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 midY = (event.touches.item(0).clientY + event.touches.item(1).clientY) / 2
let scale = newDistance / this.touchPrevious.distance let scale = newDistance / this.touchPrevious.distance
let scaleChange = this.canvasZoom * (scale - 1)
this.canvasZoom *= scale this.canvasZoom *= scale
this.canvasOffset.x = (((scale ** -1) - 1) * midX + this.canvasOffset.x) * scale this.canvasOffset.x += -((midX - 16) * scaleChange) + (midX - this.touchPrevious.x)
this.canvasOffset.y = (((scale ** -1) - 1) * midY + this.canvasOffset.y) * scale this.canvasOffset.y += -((midY - 96) * scaleChange) + (midY - this.touchPrevious.y)
this.touchPrevious = {distance: newDistance} this.touchPrevious = {distance: newDistance, x: midX, y: midY}
break; break;
} }
this.selectChip("redraw") this.selectChip("redraw")