Kaynağa Gözat

fix: 解决家具编辑回显的偏移问题

liujia 1 gün önce
ebeveyn
işleme
cb0a5bd

+ 1 - 4
src/components/DetectionAreaView/index.vue

@@ -450,8 +450,6 @@ const drawInfoText = () => {
   if (!ctx) return
 
   const [xStart, xEnd, yStart, yEnd] = props.coordinates
-  const [convertedXStart, convertedXEnd, convertedYStart, convertedYEnd] =
-    convertedCoordinates.value
 
   ctx.fillStyle = '#2c3e50'
   ctx.font = '12px Arial'
@@ -460,9 +458,8 @@ const drawInfoText = () => {
   const baseX = 5
   const baseY = CANVAS_SIZE - 10
 
-  ctx.fillText(`原始区域: [${xStart}, ${xEnd}, ${yStart}, ${yEnd}] cm`, baseX, baseY - 15)
   ctx.fillText(
-    `转换区域: [${Math.round(convertedXStart)}, ${Math.round(convertedXEnd)}, ${Math.round(convertedYStart)}, ${Math.round(convertedYEnd)}] cm`,
+    `检测区域: [${xStart}, ${xEnd}, ${yStart}, ${yEnd}] 角度:${props.direction}°`,
     baseX,
     baseY
   )

+ 7 - 13
src/components/EditableFurniture/index.vue

@@ -195,14 +195,16 @@ const updatePixelPosition = () => {
 }
 
 const initPixelPosition = () => {
-  const { x, y, width, length } = props.item
+  const { x, y, width: itemLength, length: itemWidth } = props.item
+  // ⚠️ width: itemLength, length: itemWidth 回显时需要转换一下,不然家具会有偏移
+
   // === 1️⃣ 将房间坐标转换为画布坐标 ===
   const itemConvert = convert_furniture_r2c(
     {
       x: x,
       y: y,
-      width: width,
-      height: length,
+      width: itemWidth,
+      height: itemLength,
     },
     {
       x_radar: 250,
@@ -215,26 +217,18 @@ const initPixelPosition = () => {
     {
       left: itemConvert.left,
       top: itemConvert.top,
-      width: width,
-      height: length,
+      width: itemConvert.width,
+      height: itemConvert.height,
     },
     { x: 250, y: 250 },
     props.angle
   )
 
-  console.log('🌸🌸🌸回显的家具数据AAAA', props.angle, props.item, itemConvert, rotatedRect)
-
   // === 3️⃣ 应用最终位置 ===
-  /* 90度和270度需要特殊处理,因为旋转后家具的中心位置会改变 */
-  // pixelPosition.left = props.angle === 90 ? rotatedRect.left + length / 2 : rotatedRect.left
-  // pixelPosition.top = props.angle === 270 ? rotatedRect.top - length / 2 : rotatedRect.top
-
   pixelPosition.left = rotatedRect.left
   pixelPosition.top = rotatedRect.top
 
   // 同步像素位置到 localItem(方便 emit)
-  // localItem.left = rotatedRect.left
-  // localItem.top = rotatedRect.top
   localItem.left = pixelPosition.left
   localItem.top = pixelPosition.top