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

罗广辉

8 hours ago 33d1c0ba2e7233785ebf0ed0ed30124f524cb019

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

 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