diff --git a/src/components/svg-icon.vue b/src/components/svg-icon.vue index 5e64430..e3b27ff 100644 --- a/src/components/svg-icon.vue +++ b/src/components/svg-icon.vue @@ -17,6 +17,8 @@ + + @@ -44,7 +46,9 @@ 'limbs', 'head', 'photo_sample', - 'reset_slide' + 'reset_slide', + 'zoom_to', + 'reset_zoom' ] return iconList.includes(value) } diff --git a/src/pages/detect.vue b/src/pages/detect.vue index db9d527..614660c 100644 --- a/src/pages/detect.vue +++ b/src/pages/detect.vue @@ -74,15 +74,18 @@ - - - + + + + + + {{ showResults.length - numResults }} @@ -106,23 +109,6 @@ - - - - - - - - - - - - - - - - - @@ -200,6 +186,7 @@ canvasMoving: false, canvasOffset: {x: 0, y: 0}, canvasZoom: 1, + structureZoomed: false, debugInfo: null } }, @@ -509,6 +496,7 @@ this.imCvsLocation.height = imageLoc[0].cvsBottom - imageLoc[0].cvsTop imageCtx.drawImage(this.imageView, 0, 0, this.imageView.width, this.imageView.height, this.imCvsLocation.left, this.imCvsLocation.top, this.imCvsLocation.width, this.imCvsLocation.height) } + this.structureZoomed = false return [imCanvas, imageCtx] }, getImage (searchImage) { @@ -651,6 +639,26 @@ this.canvasOffset.y += -(event.offsetY * scaleChange) } this.selectChip("redraw") + }, + resetZoom() { + this.canvasZoom = 1 + this.canvasOffset.x = 0 + this.canvasOffset.y = 0 + this.selectChip("redraw") + }, + zoomToSelected() { + const imCanvas = this.$refs.image_cvs + const boxCoords = this.box2cvs(this.resultData.detections[this.selectedChip])[0] + const boxWidth = boxCoords.cvsRight - boxCoords.cvsLeft + const boxHeight = boxCoords.cvsBottom - boxCoords.cvsTop + const boxMidX = (boxCoords.cvsRight + boxCoords.cvsLeft ) / 2 + const boxMidY = (boxCoords.cvsBottom + boxCoords.cvsTop ) / 2 + const zoomFactor = Math.min(imCanvas.width / boxWidth * .9, imCanvas.height / boxHeight * .9, 8) + this.canvasZoom = zoomFactor + this.canvasOffset.x = -(boxMidX * zoomFactor) + imCanvas.width / 2 + this.canvasOffset.y = -(boxMidY * zoomFactor) + imCanvas.height / 2 + this.selectChip("redraw") + this.structureZoomed = true } } }