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 +71 -7
1 changed files with 71 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1133676b0e - Show all commits

39
src/pages/detect.vue
View File

@@ -15,7 +15,7 @@
<video id="vid-view" ref="vid_viewer" :srcObject="cameraStream" :autoPlay="true" style="width: 100%; height: 100%"></video>
<f7-button @click="captureVidFrame()" style="position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 3;" fill large>Capture</f7-button>
</div>
<canvas id="im-draw" ref="image_cvs" @click="structureClick" :style="`display: ${(imageLoaded || videoAvailable) ? 'block' : 'none'}; flex: 1 1 0%; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; background-size: contain; background-position: center; background-repeat: no-repeat; z-index: 2;`" />
<canvas id="im-draw" ref="image_cvs" @wheel="spinWheel($event)" @mousedown.middle="startMove($event)" @mousemove="makeMove($event)" @mouseup.middle="endMove($event)" @click="structureClick" :style="`display: ${(imageLoaded || videoAvailable) ? 'block' : 'none'}; flex: 1 1 0%; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; background-size: contain; background-position: center; background-repeat: no-repeat; z-index: 2;`" />
<f7-link v-if="getInfoUrl && (selectedChip > -1)"
:style="`left: ${infoLinkPos.x}px; top: ${infoLinkPos.y}px; transform: translate(calc(-50% - ${infoLinkPos.adj}px),calc(-50% - ${infoLinkPos.adj}px));`"
class="structure-info"
@@ -182,7 +182,10 @@
cameraStream: null,
infoLinkPos: {},
detectWorker: null,
vidWorker: null
vidWorker: null,
canvasMoving: false,
canvasOffset: {x: 0, y: 0},
canvasZoom: 1
}
},
setup() {
@@ -480,6 +483,8 @@
imCanvas.width = imCanvas.clientWidth
imCanvas.height = imCanvas.clientHeight
imageCtx.clearRect(0,0,imCanvas.width,imCanvas.height)
imageCtx.translate(this.canvasOffset.x,this.canvasOffset.y)
imageCtx.scale(this.canvasZoom,this.canvasZoom)
imageCtx.globalAlpha = 1
imageCtx.strokeStyle = 'yellow'
imageCtx.lineWidth = 3
@@ -531,6 +536,8 @@
this.imageView.src = imgData
return(this.imageView.decode())
}).then( () => {
this.canvasOffset = {x: 0, y: 0}
this.canvasZoom = 1
const imCanvas = this.$refs.image_cvs
imCanvas.width = imCanvas.clientWidth
imCanvas.height = imCanvas.clientHeight
@@ -602,6 +609,34 @@
f7.utils.nextFrame(() => {
this.selectChip("redraw")
})
},
startMove() {
this.canvasMoving = true
},
endMove() {
this.canvasMoving = false
},
makeMove(event) {
if (this.canvasMoving) {
this.canvasOffset.x += event.movementX
this.canvasOffset.y += event.movementY
this.selectChip("redraw")
}
},
spinWheel(event) {
console.log(this.canvasOffset)
console.log({x: event.clientX, y: event.clientY})
if (event.wheelDelta > 0) {
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
} else if (event.wheelDelta < 0) {
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
}
console.log(this.canvasOffset)
this.selectChip("redraw")
}
}
}