From 33d1c0ba2e7233785ebf0ed0ed30124f524cb019 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Wed, 12 Aug 2026 15:14:30 +0800
Subject: [PATCH] feat: 绘制ai框导致图片右侧出现空白 bug修复
---
uniapps/work-app/src/pages/work/index.vue | 26 +++++++++++++++-----------
1 files changed, 15 insertions(+), 11 deletions(-)
diff --git a/uniapps/work-app/src/pages/work/index.vue b/uniapps/work-app/src/pages/work/index.vue
index ad54193..a318027 100644
--- a/uniapps/work-app/src/pages/work/index.vue
+++ b/uniapps/work-app/src/pages/work/index.vue
@@ -44,13 +44,15 @@
canvas-id="ai-image-canvas"
id="ai-image-canvas"
class="ai-image-canvas"
+ :width="canvasSize.width"
+ :height="canvasSize.height"
:style="{ width: canvasSize.width + 'px', height: canvasSize.height + 'px' }"
></canvas>
</div>
</template>
<script setup>
-import { getCurrentInstance, nextTick } from 'vue'
+import { getCurrentInstance } from 'vue'
import { useUserStore } from '@/store/index.js'
import { getGdList, getstatusCount } from '@/api/work/index.js'
import dayjs from 'dayjs'
@@ -127,9 +129,10 @@
})
let requestSeq = 0 // 请求序列号，用于丢弃快速切换tab时的过期响应
let imageGeneration = 0 // 图片任务批次，用于取消已离开列表的绘制任务
+const MAX_CANVAS_EDGE = 2048
const canvasSize = ref({
- width: 1,
- height: 1,
+ width: MAX_CANVAS_EDGE,
+ height: MAX_CANVAS_EDGE,
})
// 解析算法框数据
@@ -183,10 +186,11 @@
// 根据图片信息绘制算法框
const drawAiImage = async (imageInfo, aiFrame, scaleX = 1, scaleY = 1) => {
if (!imageInfo?.path || !imageInfo.width || !imageInfo.height || !aiFrame.length) return ''
- const width = Math.round(imageInfo.width)
- const height = Math.round(imageInfo.height)
- canvasSize.value = { width, height }
- await nextTick()
+ const canvasScale = Math.min(1, MAX_CANVAS_EDGE / imageInfo.width, MAX_CANVAS_EDGE / imageInfo.height)
+ const width = Math.round(imageInfo.width * canvasScale)
+ const height = Math.round(imageInfo.height * canvasScale)
+ const boxScaleX = scaleX * canvasScale
+ const boxScaleY = scaleY * canvasScale
const ctx = uni.createCanvasContext('ai-image-canvas', canvasOwner)
ctx.drawImage(imageInfo.path, 0, 0, width, height)
@@ -195,10 +199,10 @@
const { x_cen, y_cen, width: boxWidth, height: boxHeight } = item.bbox || {}
if ([x_cen, y_cen, boxWidth, boxHeight].some(value => typeof value !== 'number')) return
- const scaledWidth = boxWidth * scaleX
- const scaledHeight = boxHeight * scaleY
- const x = x_cen * scaleX - scaledWidth / 2
- const y = y_cen * scaleY - scaledHeight / 2
+ const scaledWidth = boxWidth * boxScaleX
+ const scaledHeight = boxHeight * boxScaleY
+ const x = x_cen * boxScaleX - scaledWidth / 2
+ const y = y_cen * boxScaleY - scaledHeight / 2
const label = item.class_name || ''
const fontSize = Math.max(18, Math.round(width / 80))
const labelHeight = fontSize + 10
--
Gitblit v1.9.3