From 42716cac176d4ea4e3deafe061a5b352a06834b3 Mon Sep 17 00:00:00 2001 From: xudan Date: Mon, 15 Dec 2025 16:38:41 +0800 Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E5=B0=86=E7=94=B5=E6=A2=AF?= =?UTF-8?q?=E6=96=B9=E5=90=91=E7=AE=AD=E5=A4=B4=E7=A7=BB=E8=87=B3=E5=9B=BE?= =?UTF-8?q?=E6=A0=87=E5=B7=A6=E4=BE=A7=E4=B8=AD=E9=97=B4=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=EF=BC=8C=E5=B9=B6=E5=A2=9E=E5=8A=A0=E6=A5=BC=E5=B1=82=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E5=81=8F=E7=A7=BB=E4=BB=A5=E9=81=BF=E5=85=8D=E8=A7=86?= =?UTF-8?q?=E8=A7=89=E9=87=8D=E5=8F=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/services/editor/editor-drawers.ts | 54 ++++++++++++++------------- 1 file changed, 28 insertions(+), 26 deletions(-) diff --git a/src/services/editor/editor-drawers.ts b/src/services/editor/editor-drawers.ts index 8166f7c..18320f0 100644 --- a/src/services/editor/editor-drawers.ts +++ b/src/services/editor/editor-drawers.ts @@ -212,25 +212,26 @@ function drawElevatorIcon( indicatorY = y + height + indicatorDistance; } - // 绘制方向箭头（不受指示器限制） + // 绘制方向箭头 - 改为在电梯图标左侧中间显示 if (direction === 2) { - // 向上状态 - 绿色箭头，显示在上方 + // 向上状态 - 绿色箭头，显示在左侧 const arrowSize = Math.min(width, height) * 0.35; // 箭头大小为图标较小边的35% - const baseArrowY = y - indicatorDistance - arrowSize - height * 0.05; // 箭头基础位置 + const arrowX = x - width * 0.5 - arrowSize; // 箭头在电梯左侧，留50%电梯宽度的间距（增加更多间距） + const arrowY = cy - arrowSize / 2; // 垂直居中 // 添加上下移动动画 const movementPeriod = 1500; // 动画周期 1.5 秒 const movementAmplitude = arrowSize * 0.15; // 移动幅度为箭头大小的15% const movementPhase = (time % movementPeriod) / movementPeriod; const movementOffset = movementAmplitude * Math.sin(movementPhase * Math.PI * 2); - const arrowY = baseArrowY + movementOffset; // 应用移动偏移 + const finalArrowY = arrowY + movementOffset; // 应用移动偏移 // 绘制发光背景（跟随箭头移动） - const glowGradient = ctx.createRadialGradient(cx, arrowY + arrowSize/2, 0, cx, arrowY + arrowSize/2, arrowSize); + const glowGradient = ctx.createRadialGradient(arrowX + arrowSize/2, finalArrowY + arrowSize/2, 0, arrowX + arrowSize/2, finalArrowY + arrowSize/2, arrowSize); glowGradient.addColorStop(0, 'rgba(16, 185, 129, 0.4)'); glowGradient.addColorStop(1, 'rgba(16, 185, 129, 0)'); ctx.fillStyle = glowGradient; - ctx.fillRect(cx - arrowSize - 5, arrowY - 5, arrowSize * 2 + 10, arrowSize + 10); + ctx.fillRect(arrowX - 5, finalArrowY - 5, arrowSize + 10, arrowSize + 10); // 绘制向上箭头 ctx.fillStyle = '#10b981'; @@ -238,34 +239,35 @@ function drawElevatorIcon( ctx.shadowBlur = 6; ctx.beginPath(); - ctx.moveTo(cx, arrowY); - ctx.lineTo(cx - arrowSize, arrowY + arrowSize); - ctx.lineTo(cx - arrowSize * 0.4, arrowY + arrowSize - arrowSize * 0.15); - ctx.lineTo(cx, arrowY + arrowSize - arrowSize * 0.25); - ctx.lineTo(cx + arrowSize * 0.4, arrowY + arrowSize - arrowSize * 0.15); - ctx.lineTo(cx + arrowSize, arrowY + arrowSize); + ctx.moveTo(arrowX + arrowSize/2, finalArrowY); + ctx.lineTo(arrowX, finalArrowY + arrowSize); + ctx.lineTo(arrowX + arrowSize * 0.1, finalArrowY + arrowSize - arrowSize * 0.15); + ctx.lineTo(arrowX + arrowSize/2, finalArrowY + arrowSize - arrowSize * 0.25); + ctx.lineTo(arrowX + arrowSize * 0.9, finalArrowY + arrowSize - arrowSize * 0.15); + ctx.lineTo(arrowX + arrowSize, finalArrowY + arrowSize); ctx.closePath(); ctx.fill(); ctx.shadowBlur = 0; } else if (direction === 3) { - // 向下状态 - 橙色箭头，显示在下方 + // 向下状态 - 橙色箭头，显示在左侧 const arrowSize = Math.min(width, height) * 0.35; // 箭头大小为图标较小边的35% - const baseArrowY = y + height + indicatorDistance + height * 0.05; // 箭头基础位置 + const arrowX = x - width * 0.5 - arrowSize; // 箭头在电梯左侧，留50%电梯宽度的间距（增加更多间距） + const arrowY = cy - arrowSize / 2; // 垂直居中 // 添加上下移动动画 const movementPeriod = 1500; // 动画周期 1.5 秒 const movementAmplitude = arrowSize * 0.15; // 移动幅度为箭头大小的15% const movementPhase = (time % movementPeriod) / movementPeriod; const movementOffset = movementAmplitude * Math.sin(movementPhase * Math.PI * 2); - const arrowY = baseArrowY + movementOffset; // 应用移动偏移 + const finalArrowY = arrowY + movementOffset; // 应用移动偏移 // 绘制发光背景（跟随箭头移动） - const glowGradient = ctx.createRadialGradient(cx, arrowY + arrowSize/2, 0, cx, arrowY + arrowSize/2, arrowSize); + const glowGradient = ctx.createRadialGradient(arrowX + arrowSize/2, finalArrowY + arrowSize/2, 0, arrowX + arrowSize/2, finalArrowY + arrowSize/2, arrowSize); glowGradient.addColorStop(0, 'rgba(251, 146, 60, 0.4)'); glowGradient.addColorStop(1, 'rgba(251, 146, 60, 0)'); ctx.fillStyle = glowGradient; - ctx.fillRect(cx - arrowSize - 5, arrowY - 5, arrowSize * 2 + 10, arrowSize + 10); + ctx.fillRect(arrowX - 5, finalArrowY - 5, arrowSize + 10, arrowSize + 10); // 绘制向下箭头 ctx.fillStyle = '#fb923c'; @@ -273,12 +275,12 @@ function drawElevatorIcon( ctx.shadowBlur = 6; ctx.beginPath(); - ctx.moveTo(cx, arrowY + arrowSize); - ctx.lineTo(cx - arrowSize, arrowY); - ctx.lineTo(cx - arrowSize * 0.4, arrowY + arrowSize * 0.15); - ctx.lineTo(cx, arrowY + arrowSize * 0.25); - ctx.lineTo(cx + arrowSize * 0.4, arrowY + arrowSize * 0.15); - ctx.lineTo(cx + arrowSize, arrowY); + ctx.moveTo(arrowX + arrowSize/2, finalArrowY + arrowSize); + ctx.lineTo(arrowX, finalArrowY); + ctx.lineTo(arrowX + arrowSize * 0.1, finalArrowY + arrowSize * 0.15); + ctx.lineTo(arrowX + arrowSize/2, finalArrowY + arrowSize * 0.25); + ctx.lineTo(arrowX + arrowSize * 0.9, finalArrowY + arrowSize * 0.15); + ctx.lineTo(arrowX + arrowSize, finalArrowY); ctx.closePath(); ctx.fill(); @@ -453,7 +455,7 @@ function drawElevatorMinimal( elevatorDirection ); - // 在电梯图标右侧显示当前楼层 + // 在电梯图标右侧显示当前楼层（增加偏移） const { elevatorFloor } = elevatorData; if (elevatorFloor && elevatorFloor > 0) { @@ -472,8 +474,8 @@ function drawElevatorMinimal( ctx.textAlign = 'left'; ctx.textBaseline = 'middle'; - // 文字位置：电梯图标右侧，间距基于图标尺寸 - const textX = x + w/2 + iconWidth/2 + iconWidth * 0.15; // 从图标中心右侧开始，留15%图标宽度的间距 + // 文字位置：电梯图标右侧，增加偏移距离 + const textX = x + w/2 + iconWidth/2 + iconWidth * 0.6; // 从图标中心右侧开始，留60%图标宽度的间距（增加更多偏移） const textY = y + h/2; // 垂直居中 // 绘制楼层文字背景