feat(elevator): 在电梯图标右侧添加当前楼层显示,并修复store中楼层属性名以匹配数据字段
This commit is contained in:
parent
6c0836dfc4
commit
9e1827316a
@ -439,6 +439,53 @@ function drawElevatorMinimal(
|
|||||||
elevatorDirection
|
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) {
|
if (!isConnected) {
|
||||||
// 离线状态 - 红色虚线(静态,不带动画)
|
// 离线状态 - 红色虚线(静态,不带动画)
|
||||||
|
|||||||
@ -246,7 +246,7 @@ export const useElevatorStore = defineStore('elevator', () => {
|
|||||||
point: {
|
point: {
|
||||||
...((editorService.value.getPenById(penId) as any)?.point || {}),
|
...((editorService.value.getPenById(penId) as any)?.point || {}),
|
||||||
isConnected: elevatorData.isConnected,
|
isConnected: elevatorData.isConnected,
|
||||||
currentFloor: elevatorData.elevatorFloor,
|
elevatorFloor: elevatorData.elevatorFloor,
|
||||||
lastUpdate: elevatorData.lastUpdate,
|
lastUpdate: elevatorData.lastUpdate,
|
||||||
// 保存原始后端数据
|
// 保存原始后端数据
|
||||||
elevatorDirection: elevatorData.elevatorDirection,
|
elevatorDirection: elevatorData.elevatorDirection,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user