Просмотр исходного кода

feat: 调整转换函数变量名;

liujia 1 день назад
Родитель
Сommit
d708571

+ 2 - 2
src/components/DetectionAreaView/index.vue

@@ -45,7 +45,7 @@ import {
   type CanvasRect,
   type RadarPosition,
   type RadarFurniture,
-  rotateRect,
+  rotateRect_cw,
 } from '@/utils/coordTransform'
 import radarUrl from '@/assets/furnitures/radar.png'
 import type { LocalFurnitureItem } from '@/api/room/types'
@@ -118,7 +118,7 @@ const localFurnitureItems = computed(() => {
       },
       radarPosition
     )
-    const rotatedRect = rotateRect(
+    const rotatedRect = rotateRect_cw(
       {
         left: itemConvert.left,
         top: itemConvert.top,

+ 2 - 2
src/components/EditableFurniture/index.vue

@@ -11,7 +11,7 @@
 <script setup lang="ts">
 import { reactive, watch, computed, onMounted, nextTick, type CSSProperties } from 'vue'
 import type { FurnitureItem, FurnitureType, LocalFurnitureItem } from '@/api/room/types'
-import { convert_furniture_r2c, rotateRect } from '@/utils/coordTransform'
+import { convert_furniture_r2c, rotateRect_cw } from '@/utils/coordTransform'
 
 defineOptions({ name: 'EditableFurniture' })
 
@@ -208,7 +208,7 @@ const initPixelPosition = () => {
   )
 
   // === 2️⃣ 再根据雷达朝向旋转 ===
-  const rotatedRect = rotateRect(
+  const rotatedRect = rotateRect_cw(
     {
       left: itemConvert.left,
       top: itemConvert.top,

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

@@ -49,7 +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'
+import { convert_region_r2c, rotateRect_cw } from '@/utils/coordTransform'
 
 defineOptions({ name: 'EditableSubregion' })
 const roomStore = useRoomStore()
@@ -306,7 +306,7 @@ const echoSubRegions = () => {
       }
     )
 
-    const routeRegion = rotateRect(itemRegion, { x: 250, y: 250 }, props.angle)
+    const routeRegion = rotateRect_cw(itemRegion, { x: 250, y: 250 }, props.angle)
 
     console.log(item, itemRegion, routeRegion, '🚀🚀🚀🚀🚀🚀🚀')
 

+ 2 - 2
src/components/baseRadarView/index.vue

@@ -21,7 +21,7 @@
 <script setup lang="ts">
 import { onMounted, ref, watch, type CSSProperties } from 'vue'
 import radarUrl from '@/assets/furnitures/radar.png'
-import { convert_region_r2c, rotateRect } from '@/utils/coordTransform'
+import { convert_region_r2c, rotateRect_cw } from '@/utils/coordTransform'
 import type { TargetPoint } from '@/types/radar'
 
 defineOptions({ name: 'BaseRadarView' })
@@ -250,7 +250,7 @@ const drawDetectionArea = (ctx: CanvasRenderingContext2D, options: DetectionArea
     radarPosition
   )
 
-  const rotatedRect = rotateRect(
+  const rotatedRect = rotateRect_cw(
     {
       left: canvasRect.left,
       top: canvasRect.top,

+ 58 - 1
src/utils/coordTransform.ts

@@ -142,7 +142,7 @@ interface Point {
  * @param angle - 顺时针旋转角度 0, 90, 180, 270
  * @returns 旋转后的矩形 { left, top, width, height }
  */
-export function rotateRect(src_rect: Rect, pRadar: Point, angle: number): Rect {
+export function rotateRect_cw(src_rect: Rect, pRadar: Point, angle: number): Rect {
   if (![0, 90, 180, 270].includes(angle)) angle = 0
 
   const { left, top, width, height } = src_rect
@@ -192,6 +192,63 @@ export function rotateRect(src_rect: Rect, pRadar: Point, angle: number): Rect {
   }
 }
 
+/**
+ * 逆时针旋转矩形(家具/检测区域)
+ * @param src_rect - 输入矩形 { left, top, width, height }
+ * @param pRadar - 雷达中心坐标 { x, y }
+ * @param angle - 逆时针旋转角度 0, 90, 180, 270
+ * @returns 旋转后的矩形 { left, top, width, height }
+ */
+export function rotateRect_ccw(src_rect: Rect, pRadar: Point, angle: number): Rect {
+  if (![0, 90, 180, 270].includes(angle)) angle = 0
+
+  const { left, top, width, height } = src_rect
+  const cx = left + width / 2
+  const cy = top + height / 2
+
+  const dx = cx - pRadar.x
+  const dy = cy - pRadar.y
+
+  let new_dx: number = 0
+  let new_dy: number = 0
+
+  switch (angle) {
+    case 0:
+      new_dx = dx
+      new_dy = dy
+      break
+    case 90:
+      new_dx = dy
+      new_dy = -dx
+      break
+    case 180:
+      new_dx = -dx
+      new_dy = -dy
+      break
+    case 270:
+      new_dx = -dy
+      new_dy = dx
+      break
+  }
+
+  const new_cx = pRadar.x + new_dx
+  const new_cy = pRadar.y + new_dy
+
+  let new_width = width
+  let new_height = height
+  if (angle === 90 || angle === 270) {
+    new_width = height
+    new_height = width
+  }
+
+  return {
+    left: new_cx - new_width / 2,
+    top: new_cy - new_height / 2,
+    width: new_width,
+    height: new_height,
+  }
+}
+
 interface Point {
   x: number
   y: number

+ 2 - 2
src/views/device/detail/components/deviceAreaConfig/index.vue

@@ -46,7 +46,7 @@ import * as roomApi from '@/api/room'
 import { message } from 'ant-design-vue'
 import RadarEditor from '@/components/RadarEditor/index.vue'
 import { useRoomStore } from '@/stores/room'
-import { convert_furniture_r2c, rotateRect } from '@/utils/coordTransform'
+import { convert_furniture_r2c, rotateRect_cw } from '@/utils/coordTransform'
 
 defineOptions({
   name: 'deviceAreaConfig',
@@ -126,7 +126,7 @@ const fetchRoomLayout = async () => {
           y_radar: 250,
         }
       )
-      const rotatedRect = rotateRect(
+      const rotatedRect = rotateRect_cw(
         {
           left: itemConvert.left,
           top: itemConvert.top,