feat(elevator): 在电梯图标右侧添加当前楼层显示,并修复store中楼层属性名以匹配数据字段
This commit is contained in:
parent
6c0836dfc4
commit
9e1827316a
@ -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) {
|
||||
// 离线状态 - 红色虚线(静态,不带动画)
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user