feat: 绘制ai框导致图片右侧出现空白 bug修复

罗广辉

2026-08-12 33d1c0ba2e7233785ebf0ed0ed30124f524cb019

 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