Compare commits
No commits in common. "4602ec9e74865afb2a4574eac5d290aa3c3b3590" and "10c9e576e3334a310aca1bea415b165752217159" have entirely different histories.
4602ec9e74
...
10c9e576e3
22
src/App.vue
22
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)
|
||||
document.addEventListener('fullscreenchange', scheduleAutoFitReset)
|
||||
document.addEventListener('webkitfullscreenchange', scheduleAutoFitReset)
|
||||
window.addEventListener('orientationchange', resetAutoFit)
|
||||
document.addEventListener('fullscreenchange', resetAutoFit)
|
||||
document.addEventListener('webkitfullscreenchange', resetAutoFit)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
autofit.off('#app')
|
||||
clearTimeout(autoFitResetTimer)
|
||||
window.removeEventListener('resize', handleResize)
|
||||
window.removeEventListener('orientationchange', scheduleAutoFitReset)
|
||||
document.removeEventListener('fullscreenchange', scheduleAutoFitReset)
|
||||
document.removeEventListener('webkitfullscreenchange', scheduleAutoFitReset)
|
||||
window.removeEventListener('orientationchange', resetAutoFit)
|
||||
document.removeEventListener('fullscreenchange', resetAutoFit)
|
||||
document.removeEventListener('webkitfullscreenchange', resetAutoFit)
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@ -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 viewportWidth = viewport?.width || window.innerWidth
|
||||
const viewportHeight = viewport?.height || window.innerHeight
|
||||
const isPortrait = viewportHeight > viewportWidth
|
||||
const isPortrait = portraitMediaQuery?.matches ?? window.innerHeight > window.innerWidth
|
||||
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)
|
||||
window.addEventListener('resize', scheduleOrientationUpdate)
|
||||
window.addEventListener('orientationchange', scheduleOrientationUpdate)
|
||||
window.visualViewport?.addEventListener('resize', scheduleOrientationUpdate)
|
||||
portraitMediaQuery.addEventListener?.('change', updateOrientation)
|
||||
window.addEventListener('resize', updateOrientation)
|
||||
window.addEventListener('orientationchange', updateOrientation)
|
||||
document.addEventListener('fullscreenchange', tryLockLandscape)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.documentElement.classList.remove('is-portrait-tablet')
|
||||
cancelAnimationFrame(orientationFrame)
|
||||
orientationTimers.forEach(clearTimeout)
|
||||
orientationTimers.clear()
|
||||
portraitMediaQuery?.removeEventListener?.('change', scheduleOrientationUpdate)
|
||||
window.removeEventListener('resize', scheduleOrientationUpdate)
|
||||
window.removeEventListener('orientationchange', scheduleOrientationUpdate)
|
||||
window.visualViewport?.removeEventListener('resize', scheduleOrientationUpdate)
|
||||
portraitMediaQuery?.removeEventListener?.('change', updateOrientation)
|
||||
window.removeEventListener('resize', updateOrientation)
|
||||
window.removeEventListener('orientationchange', updateOrientation)
|
||||
document.removeEventListener('fullscreenchange', tryLockLandscape)
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -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 影响。
|
||||
// getBoundingClientRect() 返回的是缩放后的屏幕尺寸，不能用于 Canvas 逻辑尺寸。
|
||||
const containerWidth = containerRef.value.clientWidth;
|
||||
const containerHeight = containerRef.value.clientHeight;
|
||||
if (!containerWidth || !containerHeight) return;
|
||||
const containerRect = containerRef.value.getBoundingClientRect(); // 获取容器实际尺寸
|
||||
if (!containerRect.width || !containerRect.height) return;
|
||||
applicationState.devicePixelRatio = window.devicePixelRatio || 1; // 获取设备像素比
|
||||
applicationState.canvasWidthPx = containerWidth; // 更新逻辑宽度
|
||||
applicationState.canvasHeightPx = containerHeight; // 逻辑高度 = 容器高度 - 状态栏高度
|
||||
applicationState.canvasWidthPx = containerRect.width; // 更新逻辑宽度
|
||||
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);
|
||||
}
|
||||
|
||||
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()
|
||||
})
|
||||
})
|
||||
requestAnimationFrame(renderFrame);
|
||||
}
|
||||
|
||||
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)
|
||||
applicationState.mouseState.screenX = pointerPosition.x;
|
||||
applicationState.mouseState.screenY = pointerPosition.y;
|
||||
const canvasRect = mapCanvas.getBoundingClientRect(); // Canvas 在页面中的位置
|
||||
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;
|
||||
@ -355,15 +305,12 @@ const bindEvent = () => {
|
||||
|
||||
if (applicationState.mouseState.isDragging && pointerEvent.pointerId === activePointerId) {
|
||||
pointerEvent.preventDefault()
|
||||
const movementX = pointerPosition.x - lastPointerX
|
||||
const movementY = pointerPosition.y - lastPointerY
|
||||
if (Math.hypot(pointerPosition.x - pointerStartX, pointerPosition.y - pointerStartY) > 6) {
|
||||
hasDragged = true
|
||||
}
|
||||
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 = pointerPosition.x
|
||||
lastPointerY = pointerPosition.y
|
||||
lastPointerX = pointerEvent.clientX
|
||||
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
|
||||
lastPointerY = pointerPosition.y
|
||||
pointerStartX = pointerPosition.x
|
||||
pointerStartY = pointerPosition.y
|
||||
hasDragged = false
|
||||
lastPointerX = pointerEvent.clientX
|
||||
lastPointerY = pointerEvent.clientY
|
||||
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('pointercancel', (pointerEvent) => endPointerDrag(pointerEvent, true));
|
||||
mapCanvas.addEventListener('pointerup', endPointerDrag);
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user