diff --git a/src/pages/detect.vue b/src/pages/detect.vue index f90fbcb..bda3929 100644 --- a/src/pages/detect.vue +++ b/src/pages/detect.vue @@ -6,7 +6,7 @@
- +
@@ -362,6 +362,18 @@ showResults () { var filteredResults = this.resultData.detections if (!filteredResults) return [] + const imCanvas = this.$refs.image_cvs + var imgWidth + var imgHeight + const imgAspect = this.imageView.width / this.imageView.height + const rendAspect = imCanvas.width / imCanvas.height + if (imgAspect >= rendAspect) { + imgWidth = imCanvas.width + imgHeight = imCanvas.width / imgAspect + } else { + imgWidth = imCanvas.height * imgAspect + imgHeight = imCanvas.height + } var allSelect = this.detectorLabels.every( s => { return s.detect } ) var selectedLabels = this.detectorLabels .filter( l => { return l.detect }) @@ -370,8 +382,12 @@ filteredResults[i].resultIndex = i filteredResults[i].aboveThreshold = d.confidence >= this.detectorLevel filteredResults[i].isSearched = allSelect || selectedLabels.includes(d.label) + filteredResults[i].cvsLeft = (imCanvas.width - imgWidth) / 2 + filteredResults[i].left * imgWidth + filteredResults[i].cvsRight = (imCanvas.width - imgWidth) / 2 + filteredResults[i].right * imgWidth + filteredResults[i].cvsTop = (imCanvas.height - imgHeight) / 2 + filteredResults[i].top * imgHeight + filteredResults[i].cvsBottom = (imCanvas.height - imgHeight) / 2 + filteredResults[i].bottom * imgHeight }) - return filteredResults + return filteredResults }, numResults () { return this.showResults.filter( r => { return r.aboveThreshold && r.isSearched && !r.isDeleted }).length @@ -454,23 +470,12 @@ return } - var imgWidth - var imgHeight - this.selectedChip = iChip - var imgAspect = this.imageView.width / this.imageView.height - var rendAspect = imCanvas.width / imCanvas.height - if (imgAspect >= rendAspect) { - imgWidth = imCanvas.width - imgHeight = imCanvas.width / imgAspect - } else { - imgWidth = imCanvas.height * imgAspect - imgHeight = imCanvas.height - } - var boxLeft = (imCanvas.width - imgWidth) / 2 + this.resultData.detections[iChip].left * imgWidth - var boxTop = (imCanvas.height - imgHeight) / 2 + this.resultData.detections[iChip].top * imgHeight - var boxWidth = (Math.min(this.resultData.detections[iChip].right, 1) - Math.max(this.resultData.detections[iChip].left, 0)) * imgWidth - var boxHeight = (Math.min(this.resultData.detections[iChip].bottom, 1) - Math.max(this.resultData.detections[iChip].top, 0)) * imgHeight + var boxLeft = this.resultData.detections[iChip].cvsLeft + var boxTop = this.resultData.detections[iChip].cvsTop + var boxWidth = this.resultData.detections[iChip].cvsRight - this.resultData.detections[iChip].cvsLeft + var boxHeight = this.resultData.detections[iChip].cvsBottom - this.resultData.detections[iChip].cvsTop imageCtx.strokeRect(boxLeft,boxTop,boxWidth,boxHeight) + this.selectedChip = iChip this.resultData.detections[iChip].beenViewed = true }, deleteChip ( iChip ) { @@ -533,6 +538,15 @@ }, onLevelChange(value) { this.detectorLevel = value + }, + structureClick(e) { + var findBox = this.showResults.find( r => { return r.cvsLeft <= e.offsetX && + r.cvsRight >= e.offsetX && + r.cvsTop <= e.offsetY && + r.cvsBottom >= e.offsetY && + r.resultIndex > this.selectedChip + }) + this.selectChip(findBox ? findBox.resultIndex : this.selectedChip) } } }