feat: 使用中心点位坐标调整计算位置

src/config/attribute/viewType.ts

@@ -0,0 +1 @@
+export const workspaceIDConf = "workspace";

src/views/deviceSetting/components/deviceAttr.vue

@@ -22,7 +22,8 @@ const emit = defineEmits(["afterDelete", "editDevice"]);
 const event = inject("event");
 const update = getCurrentInstance();
 const { mixinState, canvasEditor } = useSelect();
-const { fetchViewsBoundaries, isMoveDevice } = useDeviceObject();
+const { fetchViewsBoundaries, isMoveDevice, fetchMoveDeviceObjectOrdinate } =
+  useDeviceObject();
 /**业务属性 */
 const formData = ref({
   name: "",
@@ -103,7 +104,7 @@ const fontAttr = reactive({
 });
 
 const constrainObjectWithinCanvas = obj => {
-  const { startLeft, startTop, moveLeft, moveTop } = fetchViewsBoundaries(
+  const { startLeft, startTop, endLeft, endTop } = fetchViewsBoundaries(
     canvasEditor.canvas,
     obj
   );
@@ -114,11 +115,11 @@ const constrainObjectWithinCanvas = obj => {
   if (obj.top < startTop) {
     obj.top = startTop;
   }
-  if (obj.left > moveLeft) {
+  if (obj.left > endLeft) {
-    obj.left = moveLeft;
+    obj.left = endLeft;
   }
-  if (obj.top > moveTop) {
+  if (obj.top > endTop) {
-    obj.top = moveTop;
+    obj.top = endTop;
   }
   // 更新对象的位置
   obj.setCoords();
@@ -183,15 +184,18 @@ async function deleteDeviceObject(deleteObject) {
 }
 
 function startEditDevice(callback) {
-  const { startLeft, startTop } = fetchViewsBoundaries(canvasEditor.canvas);
   const activeObject = canvasEditor.canvas.getActiveObject();
   const currDeviceInfo = activeObject.get("deviceInfo");
+  const { x_ordinate, y_ordinate } = fetchMoveDeviceObjectOrdinate(
+    canvasEditor.canvas,
+    activeObject
+  );
   const editParams = {
     id: currDeviceInfo.id,
     device_id: currDeviceInfo.device_id,
     workshop_id: props.pointInfo?.id,
-    x_ordinate: activeObject.get("left") - startLeft,
+    x_ordinate,
-    y_ordinate: activeObject.get("top") - startTop,
+    y_ordinate,
     icon: formData.value?.icon
   };
   emit("editDevice", { editParams, callback });
@@ -211,7 +215,7 @@ const init = () => {
     // 如果没有产生位移，就不调用编辑接口
     activeObject &&
       activeObject.get("deviceInfo") &&
-      isMoveDevice(activeObject, canvasEditor.canvas) &&
+      isMoveDevice(canvasEditor.canvas, activeObject) &&
       startEditDevice();
   });
   canvasEditor.canvas.on("object:modified", getObjectAttr);

src/views/deviceSetting/components/deviceSelect.vue

@@ -26,7 +26,7 @@ const {
   initDeviceGroupObjects,
   isInViewBoundaries,
   getDragDeviceObjectOrdinate,
-  fetchViewsBoundaries
+  fetchOrdinateByView
 } = useDeviceObject();
 
 // const { t } = useI18n();
@@ -75,7 +75,6 @@ canvasEditor.getMaterialType("svg").then((list: materialTypeI[]) => {
  * 处理添加设备&重复添加设备【同点位，不同点位】
  */
 function deviceSelected(callback, options) {
-  const { startLeft, startTop } = fetchViewsBoundaries(canvasEditor.canvas);
   const { targetDeviceItem } = options;
   console.log(targetDeviceItem, "deviceSelected", props.currDeviceList);
   currDetailInfo.value = targetDeviceItem;
@@ -110,9 +109,13 @@ function deviceSelected(callback, options) {
           );
           canvasEditor.canvas.getObjects().forEach(v => {
             if (v?.deviceInfo?.device_id === targetDeviceItem.id) {
+              const { left, top } = fetchOrdinateByView(
+                canvasEditor.canvas,
+                targetDeviceItem
+              );
               v.set({
-                left: targetDeviceItem.x_ordinate + startLeft,
+                left,
-                top: targetDeviceItem.y_ordinate + startTop
+                top
               });
               canvasEditor.canvas.renderAll();
             }
@@ -159,10 +162,11 @@ const dragItem = (event, deviceItem) => {
       );
       // 判断是否在边界内
       if (
-        !isInViewBoundaries(
+        !isInViewBoundaries(canvasEditor.canvas, {
-          { ...item, x_ordinate, y_ordinate },
+          ...item,
-          canvasEditor.canvas
+          x_ordinate,
-        )
+          y_ordinate
+        })
       ) {
         return;
       }
@@ -174,12 +178,13 @@ const dragItem = (event, deviceItem) => {
 
       // canvasEditor.dragAddItem(event, item);
       deviceSelected(
-        resData => {
+        _ => {
           // 新增完成处理
+          // 已改为调用接口刷新
           // item.set({
           //   name: resData?.device_name,
           //   deviceInfo: resData
-          // }); // 作为无刷新时的标识
+          // });
           // canvasEditor.dragAddItem(event, item);
         },
         {
@@ -219,16 +224,13 @@ const dragItem = (event, deviceItem) => {
 
 // 渲染设备到点位图上
 function renderDeviceToCanvas(record) {
-  const { startLeft, startTop } = fetchViewsBoundaries(canvasEditor.canvas);
-  console.log(startLeft, "renderDeviceToCanvas");
   const startArr = record;
   const finalArr = [];
   startArr.map(deviceItem => {
     const fullDeviceItem = {
       ...defaultPosition,
       ...deviceItem,
-      left: Number(deviceItem.x_ordinate) + startLeft,
+      ...fetchOrdinateByView(canvasEditor.canvas, deviceItem),
-      top: Number(deviceItem.y_ordinate) + startTop,
       name: deviceItem.device_name
     };
     finalArr.push({
@@ -253,9 +255,6 @@ watch(
     allDeviceList.value = toRaw(props.deviceList);
     console.log(allDeviceList.value, "allDeviceList", props.deviceList);
   },
-  // {
-  //   immediate: true
-  // },
   {
     deep: true
   }

src/views/deviceSetting/components/previewCurrent.vue

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-08-26 11:32:07
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-08-28 16:16:06
+ * @LastEditTime: 2024-08-30 10:56:13
  * @FilePath: \General-AI-Platform-Web-Client\src\views\deviceSetting\components\previewCurrent.vue
  * @Description: 预览组件
 -->
@@ -99,7 +99,7 @@ function renderDeviceToCanvas() {
   const canvasObject = cvs.value;
   const startArr = props.currDeviceList;
   const finalArr = [];
-  const { startLeft, startTop } = getBoundaryPoints();
+  // const { startLeft, startTop } = getBoundaryPoints();
 
   startArr.map(deviceItem => {
     const fullDeviceItem = {
@@ -108,8 +108,8 @@ function renderDeviceToCanvas() {
       shadow: "",
       fontFamily: "1-1",
       ...deviceItem,
-      left: Number(deviceItem.x_ordinate) * scale + startLeft,
+      left: Number(deviceItem.x_ordinate) * scale + viewData.value.width / 2,
-      top: Number(deviceItem.y_ordinate) * scale + startTop,
+      top: viewData.value.height / 2 - Number(deviceItem.y_ordinate) * scale,
       name: deviceItem.device_name
     };
     finalArr.push({

src/views/deviceSetting/hooks/useDeviceObject.ts

@@ -9,76 +9,134 @@ import video_type_3 from "@/assets/modelSetting/video_type_3.png";
 import device_video_bg from "@/assets/modelSetting/device_video_bg.png";
 import device_video_bg_gray from "@/assets/modelSetting/device_video_bg_gray.png";
 import notInVisableIcon from "@/assets/modelSetting/notInVisableIcon.png";
-
+import { workspaceIDConf } from "@/config/attribute/viewType";
 import { v4 as uuid } from "uuid";
 
 const deviceInfoKey = "deviceInfo";
-
+// TODO 设计实现点位绑定设备实体的位置偏移问题
+/**
+ * @交互说明
+ * 1. 基于画布中心点建立坐标系。画布中心点坐标为(0,0)
+ */
 export const useDeviceObject = () => {
-  // 移动到画布上的设备对象的相对坐标，使用相对图片的左边系，而不是画布的坐标系
+  // 拖拽新增获取设备对象在画布上的坐标
   function getDragDeviceObjectOrdinate(event, viewObj, deviceObj) {
-    // const cvsObjects = viewObj.getObjects()[0]; // 获取画布对象
+    // 移动到画布上的设备对象的相对坐标，使用相对图片的坐标系，而不是画布的坐标系
+    const currWorkSpaceData = document
+      .getElementById(workspaceIDConf)
+      .getBoundingClientRect();
+
+    const cvsObjects = viewObj.getObjects()[0]; // 获取画布对象
     const imgObjects = viewObj.getObjects()[1]; // 获取图片对象
-    const { left, top } = viewObj.getSelectionElement().getBoundingClientRect();
+    const { left, top, width, height } = currWorkSpaceData;
-    const point = {
+    //   .getSelectionElement()
-      x: event.x - left - imgObjects.left,
+    //   .getBoundingClientRect();
-      y: event.y - top - imgObjects.top
+    // 该设备基于当前画布的坐标信息
+    const currPointView = {
+      x: event.clientX - left,
+      y: event.clientY - top
+    };
+    // const pointerVpt = viewObj.restorePointerVpt(currPointView);
+    const x_ordinate =
+      currPointView.x - width / 2 - (deviceObj.width * deviceObj.scaleX) / 2;
+    const y_ordinate =
+      height / 2 - currPointView.y + (deviceObj.height * deviceObj.scaleY) / 2;
+    console.log(
+      "currWorkSpace:",
+      currWorkSpaceData,
+      "cvsObjects:",
+      cvsObjects,
+      "event:",
+      event,
+      "getDragDeviceObjectOrdinate",
+      "imgObjects:",
+      imgObjects.getCenterPoint(),
+      x_ordinate,
+      y_ordinate
+    );
+    return {
+      x_ordinate,
+      y_ordinate
+    };
+  }
+  // 在画布上移动后设备对象坐标
+  function fetchMoveDeviceObjectOrdinate(viewObj, activeObject) {
+    const cvsObjects = viewObj.getObjects()[0]; // 获取画布对象
+    const x_ordinate = activeObject.get("left") - cvsObjects.width / 2;
+    const y_ordinate = cvsObjects.height / 2 - activeObject.get("top");
+    return {
+      x_ordinate,
+      y_ordinate
     };
-    const pointerVpt = viewObj.restorePointerVpt(point);
+  }
-    const x_ordinate = pointerVpt.x - (deviceObj.width * deviceObj.scaleX) / 2;
-    const y_ordinate = pointerVpt.y - (deviceObj.height * deviceObj.scaleY) / 2;
-    console.log(x_ordinate, y_ordinate, "getDragDeviceObjectOrdinate");
 
+  // 使用相对坐标换实际位置的方法
+  function fetchOrdinateByView(viewObj, deviceItem) {
+    const cvsObjects = viewObj.getObjects()[0]; // 获取画布对象
+    const { x_ordinate, y_ordinate } = deviceItem;
+    const left = cvsObjects.width / 2 + parseFloat(x_ordinate);
+    const top = cvsObjects.height / 2 - parseFloat(y_ordinate);
+    console.log(cvsObjects, "fetchOrdinateByView", left, top);
     return {
-      x_ordinate: x_ordinate,
+      left,
-      y_ordinate: y_ordinate
+      top
     };
   }
-  // 可操作区域的相对坐标
+  // 获取图片对象尺寸
+
+  // 可操作区域的各点位相对坐标【限定可操作区域边界】
   function fetchViewsBoundaries(viewObj, activeObj) {
+    // 图片原点为中心图标
     const cvsObjects = viewObj.getObjects()[0]; // 获取画布对象
     const imgObjects = viewObj.getObjects()[1]; // 获取图片对象
+    const y_mistake = -8 * activeObj?.scaleY; // 上下边界误差
+    const currIconWidth = activeObj?.width * activeObj?.scaleX;
+    const currIconHeight = activeObj?.height * activeObj?.scaleY;
     const startLeft =
       (cvsObjects.width * cvsObjects.scaleX -
         imgObjects.width * imgObjects.scaleX) /
-      2;
+        2 -
+      currIconWidth / 2;
     const startTop =
       (cvsObjects.height * cvsObjects.scaleY -
         imgObjects.height * imgObjects.scaleY) /
-      2;
+        2 -
+      currIconHeight -
+      y_mistake;
     const endLeft = startLeft + imgObjects.width * imgObjects.scaleX;
     const endTop = startTop + imgObjects.height * imgObjects.scaleY;
+    const currImgWidth = imgObjects.width * imgObjects.scaleX;
+    const currImgHeight = imgObjects.height * imgObjects.scaleY;
     return {
-      x_max: imgObjects.width * imgObjects.scaleX,
+      x_min: -currImgWidth / 2 - currIconWidth / 2,
-      y_max: imgObjects.height * imgObjects.scaleY,
+      y_min: -currImgHeight / 2 - currIconHeight,
+      x_max: currImgWidth / 2 + currIconWidth / 2,
+      y_max: currImgHeight / 2,
       startLeft,
       startTop,
       endLeft,
-      endTop,
+      endTop
-      moveLeft: endLeft - activeObj?.width * activeObj?.scaleX,
-      moveTop: endTop - activeObj?.height * activeObj?.scaleY
     };
   }
 
   // 判断设备是否在可视区域内
-  function isInViewBoundaries(deviceObj, viewObj): boolean {
+  function isInViewBoundaries(viewObj, deviceObj): boolean {
-    const { x_max, y_max } = fetchViewsBoundaries(viewObj, deviceObj);
+    const { x_min, x_max, y_min, y_max } = fetchViewsBoundaries(
+      viewObj,
+      deviceObj
+    );
     const { x_ordinate, y_ordinate } = deviceObj;
-    // 获取对象的当前尺寸和位置
-    const objLeft = x_ordinate;
-    const objTop = y_ordinate;
-
     // 限制对象在画布内移动
-    if (objLeft < 0) {
+    if (x_ordinate < x_min) {
       return false;
     }
-    if (objTop < 0) {
+    if (y_ordinate < y_min) {
       return false;
     }
-    if (objLeft > x_max) {
+    if (x_ordinate > x_max) {
       return false;
     }
-    if (objTop > y_max) {
+    if (y_ordinate > y_max) {
       return false;
     }
     return true;
@@ -86,45 +144,38 @@ export const useDeviceObject = () => {
 
   // 设备对象是否移动
   function isMoveDevice(activeObject, viewObj) {
-    const { x_ordinate, y_ordinate } = activeObject.get(deviceInfoKey);
+    const x_ordinate_history = activeObject.get(deviceInfoKey)?.x_ordinate;
-    const { startLeft, startTop } = fetchViewsBoundaries(viewObj);
+    const y_ordinate_history = activeObject.get(deviceInfoKey)?.y_ordinate;
+    const { x_ordinate, y_ordinate } = fetchMoveDeviceObjectOrdinate(
+      viewObj,
+      activeObject
+    );
     // 误差设置为 0.1
     const errorValue = [1, 1];
     let x_move = true;
     let y_move = true;
     const x_move_value = Math.abs(
-      Number(activeObject.left) - Number(x_ordinate) - Number(startLeft)
+      Number(x_ordinate_history) - Number(x_ordinate)
     );
     const y_move_value = Math.abs(
-      Number(activeObject.top) - Number(y_ordinate) - Number(startTop)
+      Number(y_ordinate_history) - Number(y_ordinate)
     );
-    console.log(
+
-      "startLeft" + startLeft,
+    // 重新绑定车间的设备没有坐标信息，暂时不判断设备是否移动【默认没有移动】
-      "startTop" + startTop,
+    // if (Number.isNaN(x_move_value) || Number.isNaN(y_move_value)) {
-      "isMoveDevice",
+    //   return false;
-      "x_move_value" + x_move_value,
+    // }
-      "y_move_value" + y_move_value,
-      activeObject.left,
-      x_ordinate,
-      activeObject.top,
-      y_ordinate,
-      Math.abs(
-        Number(activeObject.top) - Number(y_ordinate) - Number(startTop)
-      ),
-      Math.abs(
-        Number(activeObject.left) - Number(x_ordinate) - Number(startLeft)
-      )
-    );
-    // TODO 重新绑定车间的设备没有坐标信息，暂时不判断设备是否移动【默认没有移动】
-    if (Number.isNaN(x_move_value) || Number.isNaN(y_move_value)) {
-      return false;
-    }
     if (x_move_value < errorValue[0]) {
       x_move = false;
     }
     if (y_move_value < errorValue[1]) {
       y_move = false;
     }
+    console.log(
+      "isMoveDevice:" + (x_move || y_move),
+      "x_move_value" + x_move_value,
+      "y_move_value" + y_move_value
+    );
     return x_move || y_move;
   }
 
@@ -384,7 +435,9 @@ export const useDeviceObject = () => {
     isInViewBoundaries,
     getDragDeviceObjectOrdinate,
     isMoveDevice,
-    fetchViewsBoundaries
+    fetchViewsBoundaries,
+    fetchOrdinateByView,
+    fetchMoveDeviceObjectOrdinate
     // fetchDeviceObjectBySeemKey
   };
 };

src/views/deviceSetting/index.vue

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-08-02 10:52:32
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-08-28 17:36:58
+ * @LastEditTime: 2024-08-30 11:11:29
  * @FilePath: \General-AI-Platform-Web-Client\src\views\deviceSetting\index.vue
  * @Description: 设备点位管理设置
  @ 交互说明
@@ -116,11 +116,15 @@ const refreshCanvas = (isLoadDevice = true) => {
       const canvasWidth = cvs.width;
       const canvasHeight = cvs.height;
       // Calculate the center position for the image
-      const left = (canvasWidth - img.width * img.scaleX) / 2;
+      // TODO 计算合适的缩放比
-      const top = (canvasHeight - img.height * img.scaleY) / 2;
+      const startScale = 0.8;
+      const left = (canvasWidth - img.width * startScale) / 2;
+      const top = (canvasHeight - img.height * startScale) / 2;
       img.set({
         left,
-        top
+        top,
+        scaleX: startScale,
+        scaleY: startScale
       });
       // Re-render the canvas to apply changes
       canvasEditor.canvas.renderAll();