diff --git a/src/services/editor/editor-drawers.ts b/src/services/editor/editor-drawers.ts index dc247e7..bb6b696 100644 --- a/src/services/editor/editor-drawers.ts +++ b/src/services/editor/editor-drawers.ts @@ -439,6 +439,53 @@ function drawElevatorMinimal( elevatorDirection ); + // 在电梯图标右侧显示当前楼层 + const { elevatorFloor } = elevatorData; + + if (elevatorFloor && elevatorFloor > 0) { + ctx.save(); + + // 计算电梯图标的实际尺寸(基于最大值48*60的比例) + const iconWidth = Math.min(48, w * 0.8); + const iconHeight = Math.min(60, h * 0.8); + + // 文字尺寸基于图标的较小边,保持比例 + const baseSize = Math.min(iconWidth, iconHeight); + const fontSize = baseSize * 0.45; // 字体大小为图标较小边的45% + + // 设置文字样式 + ctx.font = `bold ${fontSize}px Arial, sans-serif`; + ctx.textAlign = 'left'; + ctx.textBaseline = 'middle'; + + // 文字位置:电梯图标右侧,间距基于图标尺寸 + const textX = x + w/2 + iconWidth/2 + iconWidth * 0.15; // 从图标中心右侧开始,留15%图标宽度的间距 + const textY = y + h/2; // 垂直居中 + + // 绘制楼层文字背景 + const floorText = `${elevatorFloor}F`; + const textMetrics = ctx.measureText(floorText); + const textWidth = textMetrics.width; + const textHeight = fontSize * 1.2; // 文字高度 + + // 背景矩形尺寸基于字体大小 + const bgPadding = fontSize * 0.25; // 背景内边距为字体大小的25% + const bgX = textX - bgPadding; + const bgY = textY - textHeight / 2; + const bgWidth = textWidth + bgPadding * 2; + const bgHeight = textHeight; + + // 绘制半透明背景 + ctx.fillStyle = 'rgba(0, 0, 0, 0.75)'; + ctx.fillRect(bgX, bgY, bgWidth, bgHeight); + + // 绘制楼层文字 + ctx.fillStyle = '#ffffff'; // 白色文字 + ctx.fillText(floorText, textX, textY); + + ctx.restore(); + } + // 状态渲染逻辑 - 只有断连状态才显示边框 if (!isConnected) { // 离线状态 - 红色虚线(静态,不带动画) diff --git a/src/stores/elevator.store.ts b/src/stores/elevator.store.ts index ac5fe0a..31d9832 100644 --- a/src/stores/elevator.store.ts +++ b/src/stores/elevator.store.ts @@ -246,7 +246,7 @@ export const useElevatorStore = defineStore('elevator', () => { point: { ...((editorService.value.getPenById(penId) as any)?.point || {}), isConnected: elevatorData.isConnected, - currentFloor: elevatorData.elevatorFloor, + elevatorFloor: elevatorData.elevatorFloor, lastUpdate: elevatorData.lastUpdate, // 保存原始后端数据 elevatorDirection: elevatorData.elevatorDirection,