Bladeren bron

feat: 调整家具在90度和270度的时候位置的偏移;设置子区域随着角度回显逻辑;

liujia 2 dagen geleden
bovenliggende
commit
2b648ce
2 gewijzigde bestanden met toevoegingen van 46 en 6 verwijderingen
  1. 7 4
      src/components/EditableFurniture/index.vue
  2. 39 2
      src/components/EditableSubregion/index.vue

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

@@ -220,12 +220,15 @@ const initPixelPosition = () => {
   )
 
   // === 3️⃣ 应用最终位置 ===
-  pixelPosition.left = rotatedRect.left
-  pixelPosition.top = rotatedRect.top
+  /* 90度和270度需要特殊处理,因为旋转后家具的中心位置会改变 */
+  pixelPosition.left = props.angle === 90 ? rotatedRect.left + length / 2 : rotatedRect.left
+  pixelPosition.top = props.angle === 270 ? rotatedRect.top - length / 2 : rotatedRect.top
 
   // 同步像素位置到 localItem(方便 emit)
-  localItem.left = rotatedRect.left
-  localItem.top = rotatedRect.top
+  // localItem.left = rotatedRect.left
+  // localItem.top = rotatedRect.top
+  localItem.left = pixelPosition.left
+  localItem.top = pixelPosition.top
 
   console.log('✅ Init pixel position (after convert & rotate):', {
     angle: props.angle,

+ 39 - 2
src/components/EditableSubregion/index.vue

@@ -49,6 +49,7 @@ import { message } from 'ant-design-vue'
 import { nanoid } from 'nanoid'
 import { useRoomStore } from '@/stores/room'
 import type { LocalSubRegionItem } from '@/api/room/types'
+import { convert_region_r2c, rotateRect } from '@/utils/coordTransform'
 
 defineOptions({ name: 'EditableSubregion' })
 const roomStore = useRoomStore()
@@ -292,6 +293,43 @@ const startResize = (block: LocalSubRegionItem, e: MouseEvent) => {
 // ✅ 回显数据(地理→像素)
 const echoSubRegions = () => {
   roomStore.localSubRegions = roomStore.localSubRegions.map((item, index) => {
+    const itemRegion = convert_region_r2c(
+      {
+        x_cm_start: Number(item.startXx),
+        x_cm_stop: Number(item.stopXx),
+        y_cm_start: Number(item.startYy),
+        y_cm_stop: Number(item.stopYy),
+      },
+      {
+        x_radar: 250,
+        y_radar: 250,
+      }
+    )
+
+    const routeRegion = rotateRect(itemRegion, { x: 250, y: 250 }, props.angle)
+
+    console.log(item, itemRegion, routeRegion, '🚀🚀🚀🚀🚀🚀🚀')
+
+    return {
+      ...item,
+      nanoid: item.nanoid || nanoid(),
+      isDraging: false,
+      isResizing: false,
+      isActive: false,
+      isTracking: Boolean(item.trackPresence),
+      isFalling: Boolean(item.excludeFalling),
+      isBed: index === 0 && props.hasBed,
+      pixelX: routeRegion.left,
+      pixelY: routeRegion.top,
+      pixelWidth: routeRegion.width,
+      pixelHeight: routeRegion.height,
+    }
+  })
+}
+echoSubRegions()
+
+const renderSubRegions = () => {
+  roomStore.localSubRegions = roomStore.localSubRegions.map((item, index) => {
     const centerX = (Number(item.startXx) + Number(item.stopXx)) / 2
     const centerY = (Number(item.startYy) + Number(item.stopYy)) / 2
     const w = Math.abs(Number(item.stopXx) - Number(item.startXx))
@@ -314,7 +352,6 @@ const echoSubRegions = () => {
     }
   })
 }
-echoSubRegions()
 
 // ✅ 监听手动调整,重新回显像素位置
 const geoCoordinatesSignature = computed(() => {
@@ -325,7 +362,7 @@ const geoCoordinatesSignature = computed(() => {
 
 watch(geoCoordinatesSignature, () => {
   nextTick(() => {
-    echoSubRegions()
+    renderSubRegions()
   })
 })