diff --git a/src/views/Address.vue b/src/views/Address.vue index 7c4e8fe..cd44177 100644 --- a/src/views/Address.vue +++ b/src/views/Address.vue @@ -93,7 +93,7 @@ const testConnect = async () => { robotStore.setRobotType(ruleForm.value.robotType) if (ruleForm.value.robotType === 'inspection') { robotStore.setAgvDeviceId('src1100') - robotStore.setAlmDeviceId('aubo_arm') + robotStore.setAlmDeviceId('huayan_arm') robotStore.setSpkDeviceId('spk1') robotStore.setMicDeviceId('mic1') robotStore.setCameraDeviceId('real_cam1') diff --git a/src/views/chassis/Chassis.vue b/src/views/chassis/Chassis.vue index 99b9e42..509fc51 100644 --- a/src/views/chassis/Chassis.vue +++ b/src/views/chassis/Chassis.vue @@ -198,7 +198,6 @@ const run = async (data) => { deviceId: robotStore.agvDeviceId, ...data }) - console.log('res', res) if (res.code === 200) { run(moveRobotData.value) } else { diff --git a/src/views/chassis/MapCanvas.vue b/src/views/chassis/MapCanvas.vue index 8cf69ec..697fc6f 100644 --- a/src/views/chassis/MapCanvas.vue +++ b/src/views/chassis/MapCanvas.vue @@ -93,6 +93,7 @@ let canvasCtx; // 2D 渲染上下文 const containerRef = ref(null) const mapCanvasRef = ref(null) let resizeObserver +let eventsBound = false const init = () => { mapCanvas = mapCanvasRef.value; @@ -285,26 +286,36 @@ const drawAllRobots = (ctx) => { } const bindEvent = () => { - // ── 鼠标移动:更新坐标、拖拽平移、悬停检测 ── - mapCanvas.addEventListener('mousemove', (mouseEvent) => { - // console.log('mouseEvent.clientX', mouseEvent.clientX) + if (eventsBound) return + eventsBound = true + + let activePointerId = null + let lastPointerX = 0 + let lastPointerY = 0 + + // Pointer Events 同时支持鼠标、触控笔和 Pad 触摸。 + mapCanvas.addEventListener('pointermove', (pointerEvent) => { const canvasRect = mapCanvas.getBoundingClientRect(); // Canvas 在页面中的位置 - // console.log('canvasRect.left', canvasRect.left) - applicationState.mouseState.screenX = mouseEvent.clientX - canvasRect.left; // 鼠标在 Canvas 上的 X - applicationState.mouseState.screenY = mouseEvent.clientY - canvasRect.top; // 鼠标在 Canvas 上的 Y + applicationState.mouseState.screenX = pointerEvent.clientX - canvasRect.left; + applicationState.mouseState.screenY = pointerEvent.clientY - canvasRect.top; // 反算世界坐标 const worldPos = screenToWorld(applicationState.mouseState.screenX, applicationState.mouseState.screenY, applicationState); applicationState.mouseState.worldX = worldPos.x; applicationState.mouseState.worldY = worldPos.y; - // 如果正在拖拽,平移相机 - if (applicationState.mouseState.isDragging) { - applicationState.camera.centerX -= mouseEvent.movementX / applicationState.camera.pixelsPerMeter; // 水平平移 - applicationState.camera.centerY += mouseEvent.movementY / applicationState.camera.pixelsPerMeter; // 垂直平移(Y翻转) + if (applicationState.mouseState.isDragging && pointerEvent.pointerId === activePointerId) { + pointerEvent.preventDefault() + const movementX = pointerEvent.clientX - lastPointerX + const movementY = pointerEvent.clientY - lastPointerY + applicationState.camera.centerX -= movementX / applicationState.camera.pixelsPerMeter; + applicationState.camera.centerY += movementY / applicationState.camera.pixelsPerMeter; + lastPointerX = pointerEvent.clientX + lastPointerY = pointerEvent.clientY } - let hit = hitTestRobots(worldPos.x, worldPos.y, applicationState); - updateTooltipDisplay(hit); + if (pointerEvent.pointerType === 'mouse') { + updateTooltipDisplay(hitTestRobots(worldPos.x, worldPos.y, applicationState)); + } }); mapCanvas.addEventListener('click', (mouseEvent) => { @@ -314,24 +325,30 @@ const bindEvent = () => { const worldPos = screenToWorld(screenX, screenY, applicationState); }) - // ── 鼠标按下:开始拖拽 ── - mapCanvas.addEventListener('mousedown', () => { + mapCanvas.addEventListener('pointerdown', (pointerEvent) => { if (!props.isDragging) { applicationState.mouseState.isDragging = false; return } - applicationState.mouseState.isDragging = true; // 标记拖拽开始 + pointerEvent.preventDefault() + activePointerId = pointerEvent.pointerId + lastPointerX = pointerEvent.clientX + lastPointerY = pointerEvent.clientY + applicationState.mouseState.isDragging = true; + mapCanvas.setPointerCapture(pointerEvent.pointerId) }); - // ── 鼠标抬起:结束拖拽 ── - mapCanvas.addEventListener('mouseup', () => { - applicationState.mouseState.isDragging = false; // 标记拖拽结束 - }); - - // ── 鼠标离开画布:结束拖拽并隐藏 Tooltip ── - mapCanvas.addEventListener('mouseleave', () => { + const endPointerDrag = (pointerEvent) => { + if (pointerEvent.pointerId !== activePointerId) return applicationState.mouseState.isDragging = false; - }); + if (mapCanvas.hasPointerCapture(pointerEvent.pointerId)) { + mapCanvas.releasePointerCapture(pointerEvent.pointerId) + } + activePointerId = null + } + + mapCanvas.addEventListener('pointerup', endPointerDrag); + mapCanvas.addEventListener('pointercancel', endPointerDrag); // ── 滚轮:缩放(向鼠标位置缩放)── mapCanvas.addEventListener('wheel', (wheelEvent) => { @@ -486,6 +503,9 @@ onUnmounted(() => { display: block; width: 100% !important; height: 100% !important; + touch-action: none; + user-select: none; + -webkit-user-select: none; } #tooltip {