diff --git a/src/pages/detect.vue b/src/pages/detect.vue index b3e6884..db9d527 100644 --- a/src/pages/detect.vue +++ b/src/pages/detect.vue @@ -30,7 +30,7 @@ :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;`" > = 50) ? 0 : Math.min(10, 50 - boxMin) + this.infoLinkPos.x = Math.min(Math.max(boxCoords.cvsLeft * this.canvasZoom + this.canvasOffset.x, 0),imCanvas.width) + this.infoLinkPos.y = Math.min(Math.max(boxCoords.cvsTop * this.canvasZoom + this.canvasOffset.y, 0), imCanvas.height) imageCtx.strokeRect(boxLeft, boxTop, boxWidth, boxHeight) this.selectedChip = iChip @@ -502,7 +500,7 @@ imageCtx.scale(this.canvasZoom,this.canvasZoom) imageCtx.globalAlpha = 1 imageCtx.strokeStyle = 'yellow' - imageCtx.lineWidth = 3 + imageCtx.lineWidth = 3 / this.canvasZoom if (this.imageLoaded) { let imageLoc = this.box2cvs({top: 0,left: 0,right: 1,bottom: 1}) this.imCvsLocation.top = imageLoc[0].cvsTop @@ -583,10 +581,12 @@ }, structureClick(e) { const boxCoords = this.box2cvs(this.showResults) - var findBox = boxCoords.findIndex( (r, i) => { return r.cvsLeft <= e.offsetX && - r.cvsRight >= e.offsetX && - r.cvsTop <= e.offsetY && - r.cvsBottom >= e.offsetY && + let clickX = (e.offsetX - this.canvasOffset.x) / this.canvasZoom + let clickY = (e.offsetY - this.canvasOffset.y) / this.canvasZoom + var findBox = boxCoords.findIndex( (r, i) => { return r.cvsLeft <= clickX && + r.cvsRight >= clickX && + r.cvsTop <= clickY && + r.cvsBottom >= clickY && this.resultData.detections[i].resultIndex > this.selectedChip && this.resultData.detections[i].aboveThreshold && this.resultData.detections[i].isSearched && @@ -639,7 +639,6 @@ } }, spinWheel(event) { - console.log(event) if (event.wheelDelta > 0) { let scaleChange = this.canvasZoom * .05 this.canvasZoom *= 1.05