From 138df84205fcdfba5b62d0366aa31967d32e09f6 Mon Sep 17 00:00:00 2001 From: donghao Date: Fri, 13 Sep 2024 14:29:26 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=BF=9B=E4=B8=80=E6=AD=A5=E5=AE=8C?= =?UTF-8?q?=E5=96=84=E8=AE=BE=E5=A4=87=E5=B8=83=E7=82=B9=E6=A8=A1=E5=9D=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../deviceSetting/components/deviceSelect.vue | 6 ++ .../components/previewCurrent.vue | 33 ++------- .../deviceSetting/hooks/useDeviceObject.ts | 71 ++++++++++++++++--- src/views/deviceSetting/index.vue | 4 +- 4 files changed, 76 insertions(+), 38 deletions(-) diff --git a/src/views/deviceSetting/components/deviceSelect.vue b/src/views/deviceSetting/components/deviceSelect.vue index e49e780..866fc90 100644 --- a/src/views/deviceSetting/components/deviceSelect.vue +++ b/src/views/deviceSetting/components/deviceSelect.vue @@ -224,6 +224,12 @@ const dragItem = (event, deviceItem) => { // 渲染设备到点位图上 function renderDeviceToCanvas(record) { + // 先更新画布，再重新渲染 + canvasEditor.canvas.getObjects().forEach(item => { + if (item.name === "device") { + canvasEditor.canvas.remove(item); + } + }); const startArr = record; const finalArr = []; startArr.map(deviceItem => { diff --git a/src/views/deviceSetting/components/previewCurrent.vue b/src/views/deviceSetting/components/previewCurrent.vue index c398ba0..c4bd469 100644 --- a/src/views/deviceSetting/components/previewCurrent.vue +++ b/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-30 10:56:13 + * @LastEditTime: 2024-08-30 14:16:10 * @FilePath: \General-AI-Platform-Web-Client\src\views\deviceSetting\components\previewCurrent.vue * @Description: 预览组件 --> @@ -12,7 +12,7 @@ import { useDeviceObject } from "../hooks/useDeviceObject"; import device_video_bg_gray from "@/assets/modelSetting/device_video_bg_gray.png"; import device_video_bg from "@/assets/modelSetting/device_video_bg.png"; -const { initDeviceGroupObjects } = useDeviceObject(); +const { initDeviceGroupObjects, isInCurrViewBoundaries } = useDeviceObject(); const props = defineProps({ picture: { type: String @@ -36,40 +36,19 @@ const canvasRef = ref(null); const cvs = ref(null); // 获取边界的几个坐标 -function getBoundaryPoints() { - const canvasObject = cvs.value; - const { backgroundImage } = canvasObject; - const startLeft = - (viewData.value.width - backgroundImage.width * backgroundImage.scaleX) / 2; - const startTop = - (viewData.value.height - backgroundImage.height * backgroundImage.scaleY) / - 2; - const endLeft = startLeft + backgroundImage.width * backgroundImage.scaleX; - const endTop = startTop + backgroundImage.height * backgroundImage.scaleY; - return { startLeft, startTop, endLeft, endTop }; -} // 在切换图片后重新计算元素位置并标记 function refreshDevicePosition() { // const { scale } = toRaw(viewPicOptions.value); const canvasObject = cvs.value; - const { startLeft, startTop, endLeft, endTop } = getBoundaryPoints(); const notInVisableIds = []; canvasObject.getObjects().forEach(deviceItem => { - const objLeft = deviceItem.left; - const objTop = deviceItem.top; - const targetBgImage = deviceItem.getObjects()[0]; - const targetTextBox = deviceItem.getObjects()[2]; - const targetDelIcon = deviceItem.getObjects()[3]; - + const targetBgImage = deviceItem.getObjects()[0]; // 设备背景图片 + const targetTextBox = deviceItem.getObjects()[2]; // 设备文本 + const targetDelIcon = deviceItem.getObjects()[3]; // 设备待删图标 console.log(targetBgImage, "notInVisableIds", deviceItem); let notInVisable = false; // 默认在边界内 - if ( - objLeft < startLeft || - objTop < startTop || - objLeft + deviceItem.width * deviceItem.scaleX > endLeft || - objTop + deviceItem.heigth * deviceItem.scaleY > endTop - ) { + if (isInCurrViewBoundaries(canvasObject, deviceItem)) { // 在边界外 notInVisable = true; notInVisableIds.push(Number(deviceItem?.deviceInfo?.id)); diff --git a/src/views/deviceSetting/hooks/useDeviceObject.ts b/src/views/deviceSetting/hooks/useDeviceObject.ts index 15e472c..bff402a 100644 --- a/src/views/deviceSetting/hooks/useDeviceObject.ts +++ b/src/views/deviceSetting/hooks/useDeviceObject.ts @@ -82,7 +82,6 @@ export const useDeviceObject = () => { top }; } - // 获取图片对象尺寸 // 可操作区域的各点位相对坐标【限定可操作区域边界】 function fetchViewsBoundaries(viewObj, activeObj) { @@ -119,7 +118,7 @@ export const useDeviceObject = () => { }; } - // 判断设备是否在可视区域内 + // 操作区判断设备是否在可视区域内 function isInViewBoundaries(viewObj, deviceObj): boolean { const { x_min, x_max, y_min, y_max } = fetchViewsBoundaries( viewObj, @@ -142,6 +141,63 @@ export const useDeviceObject = () => { return true; } + // 预览判断当前的图片图层内 + function isInCurrViewBoundaries(viewObj, deviceObj): boolean { + const objLeft = deviceObj.left; + const objTop = deviceObj.top; + const canvasObject = viewObj; + const { backgroundImage } = canvasObject; // backgroundImage 背景图片 + const currIconWidth = deviceObj?.width * deviceObj?.scaleX; + const currIconHeight = deviceObj?.height * deviceObj?.scaleY; + const y_mistake = -8 * deviceObj?.scaleY; // 上下边界误差 + const x_mistake = 1; // 左右边界误差 + const startLeft = + (canvasObject.width - backgroundImage.width * backgroundImage.scaleX) / + 2 - + currIconWidth / 2; + const startTop = + (canvasObject.height - backgroundImage.height * backgroundImage.scaleY) / + 2 - + currIconHeight - + y_mistake; + const endLeft = startLeft + backgroundImage.width * backgroundImage.scaleX; + const endTop = startTop + backgroundImage.height * backgroundImage.scaleY; + + console.log( + backgroundImage.getBoundingClientRect(), + canvasObject.width, + canvasObject.scaleX, + backgroundImage.width, + backgroundImage.scaleX, + currIconWidth, + "isInCurrViewBoundaries", + backgroundImage.scaleX, + deviceObj, + "startLeft", + startLeft, + "startTop", + startTop, + "endLeft", + endLeft, + "endTop", + endTop + ); + if ( + objLeft < startLeft - x_mistake || + objTop < startTop || + objLeft > endLeft + x_mistake || + objTop > endTop + ) { + return true; + } + return false; + } + + function isInView() { + // TODO 用三角函数判断 + return; + } + // 设备对象是否移动 function isMoveDevice(activeObject, viewObj) { const x_ordinate_history = activeObject.get(deviceInfoKey)?.x_ordinate; @@ -179,10 +235,6 @@ export const useDeviceObject = () => { return x_move || y_move; } - // function fetchDeviceObjectBySeemKey(targetDeviceItem, viewObj) { - // console.log(targetDeviceItem, viewObj, "fetchDeviceObjectBySeemKey"); - // } - // 初始化设备对象 const initDeviceGroupObjects: Record = ( record, @@ -213,6 +265,7 @@ export const useDeviceObject = () => { bgDeviceImage = device_video_bg; } return { + name: "device", id: uuid(), deviceInfo: record, // 设备信息 left: record?.left ? Number(record?.left) : 0, @@ -228,7 +281,7 @@ export const useDeviceObject = () => { originX: "left", originY: "top", width: 132, - height: 66, + height: 62, fill: "rgb(0,0,0)", stroke: null, strokeWidth: 0, @@ -437,7 +490,7 @@ export const useDeviceObject = () => { isMoveDevice, fetchViewsBoundaries, fetchOrdinateByView, - fetchMoveDeviceObjectOrdinate - // fetchDeviceObjectBySeemKey + fetchMoveDeviceObjectOrdinate, + isInCurrViewBoundaries }; }; diff --git a/src/views/deviceSetting/index.vue b/src/views/deviceSetting/index.vue index f6ab6a1..f87134f 100644 --- a/src/views/deviceSetting/index.vue +++ b/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-30 11:11:29 + * @LastEditTime: 2024-08-30 13:37:45 * @FilePath: \General-AI-Platform-Web-Client\src\views\deviceSetting\index.vue * @Description: 设备点位管理设置 @ 交互说明 @@ -117,7 +117,7 @@ const refreshCanvas = (isLoadDevice = true) => { const canvasHeight = cvs.height; // Calculate the center position for the image // TODO 计算合适的缩放比 - const startScale = 0.8; + const startScale = 1; const left = (canvasWidth - img.width * startScale) / 2; const top = (canvasHeight - img.height * startScale) / 2; img.set({