diff --git a/src/views/inspection/cockpit/canvasUtils.js b/src/views/inspection/cockpit/canvasUtils.js index 99c4aae..e9751e8 100644 --- a/src/views/inspection/cockpit/canvasUtils.js +++ b/src/views/inspection/cockpit/canvasUtils.js @@ -178,7 +178,7 @@ export const drawAdvancedAreaList = (canvasCtx, map, dataStore) => { centroidWorldX /= vertices.length; // 求平均得到质心 X centroidWorldY /= vertices.length; // 求平均得到质心 Y const centroidScreen = worldToScreen(centroidWorldX, centroidWorldY, store); - canvasCtx.font = '500 8px "JetBrains Mono"'; // 标签字体 + canvasCtx.font = '500 32px "JetBrains Mono"'; // 标签字体 canvasCtx.fillStyle = strokeColorCss; // 与描边同色 canvasCtx.textAlign = 'center'; // 居中对齐 canvasCtx.fillText(area.instanceName || '', centroidScreen.x, centroidScreen.y + 3); // 绘制文字 @@ -445,7 +445,7 @@ export const drawAdvancedPointList = (canvasCtx, map, dataStore) => { } // ── 名称标签 ── - canvasCtx.font = '500 7px "JetBrains Mono"'; + canvasCtx.font = '500 12px "JetBrains Mono"'; canvasCtx.fillStyle = hexToCssRgba(pointColorHex, 0.7); canvasCtx.textAlign = 'center'; canvasCtx.fillText(advPoint.instanceName || '', pointScreen.x, pointScreen.y - diamondRadius - 4); @@ -560,13 +560,14 @@ export const buildOccupancyGridImage = (parsedMap, showEdgeGlow) => { } export class MobileRobot { - constructor(id, name, x, y, angleRad = 0, color= "#00D4FF", imageUrl = null) { + constructor(id, name, x, y, angleRad = 0, color = '#15ff00', imageUrl = null) { this.id = id; this.name = name; this.x = x; // 世界坐标X (米) this.y = y; // 世界坐标Y (米) this.angle = angleRad; // 朝向弧度 this.imageUrl = imageUrl || '/bot.svg'; + this.color = color; // 颜色 // 预加载图片 (可选) this.imgElement = null; if (this.imageUrl) { @@ -596,8 +597,8 @@ export class MobileRobot { } // 绘制到canvas上下文 (屏幕坐标) - draw(ctx, screenX, screenY, scale = 1) { - const size = 18; // 绘制大小px + draw(ctx, screenX, screenY, color, scale = 1) { + const size = 24; // 绘制大小px if (this.imgElement && this.imgElement.complete) { ctx.save(); ctx.translate(screenX, screenY); @@ -607,9 +608,9 @@ export class MobileRobot { } // 名字标签 ctx.font = '12px "JetBrains Mono"'; - ctx.fillStyle = '#a0c0f0'; + ctx.fillStyle = color; ctx.shadowBlur = 0; - ctx.fillText(this.name, screenX - 30, screenY - 20); + ctx.fillText(this.name, screenX, screenY - 20); } // 更新位置 diff --git a/src/views/inspection/cockpit/components/MapCanvas.vue b/src/views/inspection/cockpit/components/MapCanvas.vue index a237691..3d15dfc 100644 --- a/src/views/inspection/cockpit/components/MapCanvas.vue +++ b/src/views/inspection/cockpit/components/MapCanvas.vue @@ -247,7 +247,7 @@ const drawAllRobots = (ctx) => { if (screenPos.x + 20 < 0 || screenPos.x - 20 > inspectionStore.canvasWidthPx || screenPos.y + 20 < 0 || screenPos.y - 20 > inspectionStore.canvasHeightPx) { continue; } - robot.draw(ctx, screenPos.x, screenPos.y); + robot.draw(ctx, screenPos.x, screenPos.y, robot.color, 1); } } @@ -313,7 +313,7 @@ const updateTooltipDisplay = (hitResult) => { if (hitResult.kind === 'robot') { const robot = hitResult.robot; title = `${robot.name}`; - details = `