src/App.vue

@@ -18,7 +18,6 @@ const autoFitOptions = {
 }
 
 let viewportWidth = document.documentElement.clientWidth
-let autoFitResetTimer: ReturnType<typeof setTimeout> | undefined
 
 const initAutoFit = () => {
   autofit.init(autoFitOptions, false)
@@ -30,36 +29,29 @@ const resetAutoFit = () => {
   viewportWidth = document.documentElement.clientWidth
 }
 
-const scheduleAutoFitReset = () => {
-  clearTimeout(autoFitResetTimer)
-  // 等待旋转动画和视口尺寸稳定，避免 resize 期间反复重建 autofit。
-  autoFitResetTimer = setTimeout(resetAutoFit, 50)
-}
-
 const handleResize = () => {
   const nextWidth = document.documentElement.clientWidth
 
   // 软键盘通常只改变可视高度；宽度不变时保持原缩放比例。
   if (Math.abs(nextWidth - viewportWidth) <= 2) return
 
-  scheduleAutoFitReset()
+  resetAutoFit()
 }
 
 onMounted(() => {
   initAutoFit()
   window.addEventListener('resize', handleResize)
-  window.addEventListener('orientationchange', scheduleAutoFitReset)
+  window.addEventListener('orientationchange', resetAutoFit)
-  document.addEventListener('fullscreenchange', scheduleAutoFitReset)
+  document.addEventListener('fullscreenchange', resetAutoFit)
-  document.addEventListener('webkitfullscreenchange', scheduleAutoFitReset)
+  document.addEventListener('webkitfullscreenchange', resetAutoFit)
 })
 
 onUnmounted(() => {
   autofit.off('#app')
-  clearTimeout(autoFitResetTimer)
   window.removeEventListener('resize', handleResize)
-  window.removeEventListener('orientationchange', scheduleAutoFitReset)
+  window.removeEventListener('orientationchange', resetAutoFit)
-  document.removeEventListener('fullscreenchange', scheduleAutoFitReset)
+  document.removeEventListener('fullscreenchange', resetAutoFit)
-  document.removeEventListener('webkitfullscreenchange', scheduleAutoFitReset)
+  document.removeEventListener('webkitfullscreenchange', resetAutoFit)
 })
 </script>
 

src/components/LandscapeGuard.vue

@@ -25,8 +25,6 @@ import { onBeforeUnmount, onMounted, ref } from 'vue'
 const isPortraitTablet = ref(false)
 
 let portraitMediaQuery
-let orientationFrame
-const orientationTimers = new Set()
 
 const isTablet = () => {
   const userAgent = navigator.userAgent
@@ -42,32 +40,11 @@ const isTablet = () => {
 }
 
 const updateOrientation = () => {
-  const viewport = window.visualViewport
+  const isPortrait = portraitMediaQuery?.matches ?? window.innerHeight > window.innerWidth
-  const viewportWidth = viewport?.width || window.innerWidth
-  const viewportHeight = viewport?.height || window.innerHeight
-  const isPortrait = viewportHeight > viewportWidth
   isPortraitTablet.value = isTablet() && isPortrait
   document.documentElement.classList.toggle('is-portrait-tablet', isPortraitTablet.value)
 }
 
-const scheduleOrientationUpdate = () => {
-  updateOrientation()
-
-  cancelAnimationFrame(orientationFrame)
-  orientationFrame = requestAnimationFrame(updateOrientation)
-
-  orientationTimers.forEach(clearTimeout)
-  orientationTimers.clear()
-  // iPad 旋转动画期间视口尺寸会分阶段更新，短时间复检避免停留在旧方向。
-  for (const delay of [80, 180, 350]) {
-    const timer = setTimeout(() => {
-      orientationTimers.delete(timer)
-      updateOrientation()
-    }, delay)
-    orientationTimers.add(timer)
-  }
-}
-
 const tryLockLandscape = async () => {
   if (!isTablet() || !screen.orientation?.lock) return
 
@@ -83,22 +60,17 @@ onMounted(() => {
   updateOrientation()
   tryLockLandscape()
 
-  portraitMediaQuery.addEventListener?.('change', scheduleOrientationUpdate)
+  portraitMediaQuery.addEventListener?.('change', updateOrientation)
-  window.addEventListener('resize', scheduleOrientationUpdate)
+  window.addEventListener('resize', updateOrientation)
-  window.addEventListener('orientationchange', scheduleOrientationUpdate)
+  window.addEventListener('orientationchange', updateOrientation)
-  window.visualViewport?.addEventListener('resize', scheduleOrientationUpdate)
   document.addEventListener('fullscreenchange', tryLockLandscape)
 })
 
 onBeforeUnmount(() => {
   document.documentElement.classList.remove('is-portrait-tablet')
-  cancelAnimationFrame(orientationFrame)
+  portraitMediaQuery?.removeEventListener?.('change', updateOrientation)
-  orientationTimers.forEach(clearTimeout)
+  window.removeEventListener('resize', updateOrientation)
-  orientationTimers.clear()
+  window.removeEventListener('orientationchange', updateOrientation)
-  portraitMediaQuery?.removeEventListener?.('change', scheduleOrientationUpdate)
-  window.removeEventListener('resize', scheduleOrientationUpdate)
-  window.removeEventListener('orientationchange', scheduleOrientationUpdate)
-  window.visualViewport?.removeEventListener('resize', scheduleOrientationUpdate)
   document.removeEventListener('fullscreenchange', tryLockLandscape)
 })
 </script>

src/views/chassis/MapCanvas.vue

@@ -94,9 +94,6 @@ const containerRef = ref(null)
 const mapCanvasRef = ref(null)
 let resizeObserver
 let eventsBound = false
-let orientationObserver
-let animationFrameId = null
-let isRendering = false
 
 const init = () => {
     mapCanvas = mapCanvasRef.value;
@@ -109,14 +106,11 @@ const init = () => {
  */
 function resizeCanvasToContainer() {
     if (!mapCanvas || !containerRef.value) return;
-    // clientWidth/clientHeight 是布局坐标，不受 autofit.js 的 CSS transform 影响。
+    const containerRect = containerRef.value.getBoundingClientRect(); // 获取容器实际尺寸
-    // getBoundingClientRect() 返回的是缩放后的屏幕尺寸，不能用于 Canvas 逻辑尺寸。
+    if (!containerRect.width || !containerRect.height) return;
-    const containerWidth = containerRef.value.clientWidth;
-    const containerHeight = containerRef.value.clientHeight;
-    if (!containerWidth || !containerHeight) return;
     applicationState.devicePixelRatio = window.devicePixelRatio || 1; // 获取设备像素比
-    applicationState.canvasWidthPx = containerWidth;                        // 更新逻辑宽度
+    applicationState.canvasWidthPx = containerRect.width;                        // 更新逻辑宽度
-    applicationState.canvasHeightPx = containerHeight;                  // 逻辑高度 = 容器高度 - 状态栏高度
+    applicationState.canvasHeightPx = containerRect.height;                  // 逻辑高度 = 容器高度 - 状态栏高度
     mapCanvas.width = applicationState.canvasWidthPx * applicationState.devicePixelRatio; // Canvas 物理像素宽
     mapCanvas.height = applicationState.canvasHeightPx * applicationState.devicePixelRatio; // Canvas 物理像素高
     mapCanvas.style.width = applicationState.canvasWidthPx + 'px';               // CSS 显示宽度
@@ -217,8 +211,6 @@ async function loadMapIntoApplication(parsedMap) {
  * @param {number} timestamp - requestAnimationFrame 提供的时间戳（毫秒）
  */
 function renderFrame(timestamp) {
-    if (!isRendering || !canvasCtx) return;
-
     // 更新动画时间
     applicationState.animationTimeSeconds = (timestamp || 0) / 1000;
 
@@ -228,7 +220,7 @@ function renderFrame(timestamp) {
 
     // 如果地图未加载，跳过绘制
     if (!applicationState.isMapLoaded) {
-        animationFrameId = requestAnimationFrame(renderFrame);      // 继续请求下一帧
+        requestAnimationFrame(renderFrame);                         // 继续请求下一帧
         return;
     }
 
@@ -278,36 +270,7 @@ function renderFrame(timestamp) {
     drawMapBoundary(canvasCtx, map, applicationState);
 
     // 请求下一帧渲染
-    animationFrameId = requestAnimationFrame(renderFrame);
+    requestAnimationFrame(renderFrame);
-}
-
-const stopRendering = () => {
-    isRendering = false
-    if (animationFrameId !== null) {
-        cancelAnimationFrame(animationFrameId)
-        animationFrameId = null
-    }
-}
-
-const startRendering = () => {
-    if (isRendering || !applicationState.isMapLoaded || document.documentElement.classList.contains('is-portrait-tablet')) return
-    isRendering = true
-    animationFrameId = requestAnimationFrame(renderFrame)
-}
-
-const handleOrientationVisibility = () => {
-    if (document.documentElement.classList.contains('is-portrait-tablet')) {
-        stopRendering()
-        return
-    }
-
-    // v-show 恢复后等待 Vue 和浏览器完成布局，再重设画布并恢复渲染。
-    nextTick(() => {
-        requestAnimationFrame(() => {
-            resizeCanvasToContainer()
-            startRendering()
-        })
-    })
 }
 
 const drawAllRobots = (ctx) => {
@@ -329,25 +292,12 @@ const bindEvent = () => {
     let activePointerId = null
     let lastPointerX = 0
     let lastPointerY = 0
-    let pointerStartX = 0
-    let pointerStartY = 0
-    let hasDragged = false
-
-    const getCanvasPointerPosition = (pointerEvent) => {
-        const canvasRect = mapCanvas.getBoundingClientRect()
-        const scaleX = applicationState.canvasWidthPx / canvasRect.width
-        const scaleY = applicationState.canvasHeightPx / canvasRect.height
-        return {
-            x: (pointerEvent.clientX - canvasRect.left) * scaleX,
-            y: (pointerEvent.clientY - canvasRect.top) * scaleY
-        }
-    }
 
     // Pointer Events 同时支持鼠标、触控笔和 Pad 触摸。
     mapCanvas.addEventListener('pointermove', (pointerEvent) => {
-        const pointerPosition = getCanvasPointerPosition(pointerEvent)
+        const canvasRect = mapCanvas.getBoundingClientRect();        // Canvas 在页面中的位置
-        applicationState.mouseState.screenX = pointerPosition.x;
+        applicationState.mouseState.screenX = pointerEvent.clientX - canvasRect.left;
-        applicationState.mouseState.screenY = pointerPosition.y;
+        applicationState.mouseState.screenY = pointerEvent.clientY - canvasRect.top;
         // 反算世界坐标
         const worldPos = screenToWorld(applicationState.mouseState.screenX, applicationState.mouseState.screenY, applicationState);
         applicationState.mouseState.worldX = worldPos.x;
@@ -355,15 +305,12 @@ const bindEvent = () => {
 
         if (applicationState.mouseState.isDragging && pointerEvent.pointerId === activePointerId) {
             pointerEvent.preventDefault()
-            const movementX = pointerPosition.x - lastPointerX
+            const movementX = pointerEvent.clientX - lastPointerX
-            const movementY = pointerPosition.y - lastPointerY
+            const movementY = pointerEvent.clientY - lastPointerY
-            if (Math.hypot(pointerPosition.x - pointerStartX, pointerPosition.y - pointerStartY) > 6) {
-                hasDragged = true
-            }
             applicationState.camera.centerX -= movementX / applicationState.camera.pixelsPerMeter;
             applicationState.camera.centerY += movementY / applicationState.camera.pixelsPerMeter;
-            lastPointerX = pointerPosition.x
+            lastPointerX = pointerEvent.clientX
-            lastPointerY = pointerPosition.y
+            lastPointerY = pointerEvent.clientY
         }
 
         if (pointerEvent.pointerType === 'mouse') {
@@ -372,7 +319,9 @@ const bindEvent = () => {
     });
 
     mapCanvas.addEventListener('click', (mouseEvent) => {
-        const { x: screenX, y: screenY } = getCanvasPointerPosition(mouseEvent)
+        const canvasRect = mapCanvas.getBoundingClientRect(); // Canvas 在页面中的位置
+        const screenX = mouseEvent.clientX - canvasRect.left; // 鼠标在 Canvas 上的 X
+        const screenY = mouseEvent.clientY - canvasRect.top;  // 鼠标在 Canvas 上的 Y
         const worldPos = screenToWorld(screenX, screenY, applicationState);
     })
 
@@ -382,33 +331,15 @@ const bindEvent = () => {
             return
         }
         pointerEvent.preventDefault()
-        const pointerPosition = getCanvasPointerPosition(pointerEvent)
         activePointerId = pointerEvent.pointerId
-        lastPointerX = pointerPosition.x
+        lastPointerX = pointerEvent.clientX
-        lastPointerY = pointerPosition.y
+        lastPointerY = pointerEvent.clientY
-        pointerStartX = pointerPosition.x
-        pointerStartY = pointerPosition.y
-        hasDragged = false
         applicationState.mouseState.isDragging = true;
         mapCanvas.setPointerCapture(pointerEvent.pointerId)
     });
 
-    const endPointerDrag = (pointerEvent, cancelled = false) => {
+    const endPointerDrag = (pointerEvent) => {
         if (pointerEvent.pointerId !== activePointerId) return
-
-        // Pad/触控笔轻点时执行命中检测；轻点空白区域会隐藏信息窗。
-        if (!cancelled && !hasDragged && pointerEvent.pointerType !== 'mouse') {
-            const pointerPosition = getCanvasPointerPosition(pointerEvent)
-            applicationState.mouseState.screenX = pointerPosition.x
-            applicationState.mouseState.screenY = pointerPosition.y
-            const worldPos = screenToWorld(
-                applicationState.mouseState.screenX,
-                applicationState.mouseState.screenY,
-                applicationState
-            )
-            updateTooltipDisplay(hitTestRobots(worldPos.x, worldPos.y, applicationState))
-        }
-
         applicationState.mouseState.isDragging = false;
         if (mapCanvas.hasPointerCapture(pointerEvent.pointerId)) {
             mapCanvas.releasePointerCapture(pointerEvent.pointerId)
@@ -416,8 +347,8 @@ const bindEvent = () => {
         activePointerId = null
     }
 
-    mapCanvas.addEventListener('pointerup', (pointerEvent) => endPointerDrag(pointerEvent));
+    mapCanvas.addEventListener('pointerup', endPointerDrag);
-    mapCanvas.addEventListener('pointercancel', (pointerEvent) => endPointerDrag(pointerEvent, true));
+    mapCanvas.addEventListener('pointercancel', endPointerDrag);
 
     // ── 滚轮：缩放（向鼠标位置缩放）──
     mapCanvas.addEventListener('wheel', (wheelEvent) => {
@@ -529,11 +460,6 @@ onMounted(() => {
     resizeObserver = new ResizeObserver(resizeCanvasToContainer)
     resizeObserver.observe(containerRef.value)
     window.addEventListener('resize', resizeCanvasToContainer)
-    orientationObserver = new MutationObserver(handleOrientationVisibility)
-    orientationObserver.observe(document.documentElement, {
-        attributes: true,
-        attributeFilter: ['class']
-    })
 })
 
 watch(() => props.mapName,
@@ -541,7 +467,7 @@ watch(() => props.mapName,
         if (newVal) {
             await loadSourceMap(newVal)
             addRobot(robotStore.ip, robotStore.ip, robotStore.position.x, robotStore.position.y, robotStore.position.theta, getThemeColor('--color-canvas-robot'))
-            startRendering()
+            requestAnimationFrame(renderFrame);
         }
     }, {
         immediate: true
@@ -554,10 +480,8 @@ defineExpose({
 })
 
 onUnmounted(() => {
-    stopRendering()
     window.removeEventListener('resize', resizeCanvasToContainer)
     resizeObserver?.disconnect()
-    orientationObserver?.disconnect()
     canvasCtx = null
 })
 </script>