621 lines
32 KiB
JavaScript
621 lines
32 KiB
JavaScript
import { useInspectionStore } from "@/store/modules/inspection";
|
||
|
||
const inspectionStore = useInspectionStore();
|
||
|
||
|
||
/**
|
||
* 6位十六进制颜色字符串转为 CSS rgba 字符串
|
||
* @param {string} hex - 如 "#ff6e40"
|
||
* @param {number} alpha - 透明度 0~1
|
||
* @returns {string} CSS rgba 字符串
|
||
*/
|
||
function hexToCssRgba(hexString, alpha) {
|
||
const r = parseInt(hexString.slice(1, 3), 16); // 提取 R 分量
|
||
const g = parseInt(hexString.slice(3, 5), 16); // 提取 G 分量
|
||
const b = parseInt(hexString.slice(5, 7), 16); // 提取 B 分量
|
||
return `rgba(${r},${g},${b},${alpha})`;
|
||
}
|
||
|
||
/**
|
||
* 将世界坐标转换为 Canvas 屏幕像素坐标
|
||
* 注意：世界坐标 Y 轴向上，Canvas Y 轴向下，因此需要翻转
|
||
* @param {number} worldX - 世界坐标 X（米）
|
||
* @param {number} worldY - 世界坐标 Y（米）
|
||
* @returns {{x: number, y: number}} Canvas 上的屏幕像素坐标
|
||
*/
|
||
export const worldToScreen = (worldX, worldY, dataStore) => {
|
||
const store = dataStore || inspectionStore;
|
||
const camera = store.camera
|
||
const screenX = (worldX - camera.centerX) * camera.pixelsPerMeter + store.canvasWidthPx / 2; // 水平偏移 + 居中
|
||
const screenY = -(worldY - camera.centerY) * camera.pixelsPerMeter + store.canvasHeightPx / 2; // 垂直翻转 + 居中
|
||
return { x: screenX, y: screenY };
|
||
};
|
||
|
||
/**
|
||
* 将 Canvas 屏幕像素坐标反算为世界坐标
|
||
* 与 worldToScreen 互为逆运算
|
||
* @param {number} screenX - Canvas 像素 X
|
||
* @param {number} screenY - Canvas 像素 Y
|
||
* @returns {{x: number, y: number}} 世界坐标（米）
|
||
*/
|
||
export const screenToWorld = (screenX, screenY, dataStore) => {
|
||
const store = dataStore || inspectionStore;
|
||
const camera = store.camera;
|
||
const worldX = (screenX - store.canvasWidthPx / 2) / camera.pixelsPerMeter + camera.centerX; // 水平反算
|
||
const worldY = -(screenY - store.canvasHeightPx / 2) / camera.pixelsPerMeter + camera.centerY; // 垂直反算（带翻转）
|
||
return { x: worldX, y: worldY };
|
||
};
|
||
|
||
|
||
/**
|
||
* 0xAARRGGBB 整数颜色解码为 {r, g, b, a} 对象
|
||
* @param {number} argbInt - 32位 ARGB 整数，如 0xCCFF0040
|
||
* @returns {{r:number, g:number, b:number, a:number}|null} RGBA 分量 (0~255)，无效输入返回 null
|
||
*/
|
||
export const decodeArgbInteger = (argbInt) => {
|
||
if (typeof argbInt !== 'number') return null; // 非数字类型直接返回
|
||
return {
|
||
a: (argbInt >>> 24) & 0xFF, // 高8位：Alpha 透明度
|
||
r: (argbInt >>> 16) & 0xFF, // 次高8位：Red
|
||
g: (argbInt >>> 8) & 0xFF, // 次低8位：Green
|
||
b: argbInt & 0xFF, // 低8位：Blue
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 将 decodeArgbInteger 的结果转为 CSS rgba() 字符串
|
||
* @param {{r,g,b,a}} colorObj - RGBA 分量对象
|
||
* @param {number} [alphaOverride] - 可选，覆盖 alpha 值（0~1）
|
||
* @returns {string|null} CSS rgba 字符串，如 "rgba(255,0,64,0.3)"
|
||
*/
|
||
export const toCssRgba = (colorObj, alphaOverride) => {
|
||
if (!colorObj) return null; // 空对象返回 null
|
||
const alpha = alphaOverride !== undefined // 如果提供了覆盖值
|
||
? alphaOverride // 使用覆盖值
|
||
: colorObj.a / 255; // 否则将 0~255 映射到 0~1
|
||
return `rgba(${colorObj.r},${colorObj.g},${colorObj.b},${alpha})`;
|
||
}
|
||
|
||
/**
|
||
* 栅格底图绘制函数
|
||
* 将预渲染的离屏 Canvas 图像绘制到主 Canvas 上，并根据当前地图范围进行缩放和平移
|
||
* @param {*} canvasCtx
|
||
* @param {*} map
|
||
* @param {*} gridOffscreen
|
||
*/
|
||
export const drawGrid = (canvasCtx, map, dataStore) => {
|
||
const store = dataStore || inspectionStore;
|
||
const topLeftScreen = worldToScreen(map.originX, map.maxY, store); // 图像左上角（世界坐标→屏幕）
|
||
const bottomRightScreen = worldToScreen(map.maxX, map.originY, store); // 图像右下角（世界坐标→屏幕）
|
||
canvasCtx.imageSmoothingEnabled = false; // 关闭抗锯齿（保持像素清晰）
|
||
canvasCtx.drawImage(
|
||
store.gridOffscreen, // 离屏 Canvas 图像源
|
||
topLeftScreen.x, topLeftScreen.y, // 目标左上角
|
||
bottomRightScreen.x - topLeftScreen.x, // 目标宽度
|
||
bottomRightScreen.y - topLeftScreen.y // 目标高度
|
||
);
|
||
}
|
||
|
||
/**
|
||
* 网格辅助线（每1米一条）
|
||
* @param {*} canvasCtx
|
||
* @param {*} canvasWidthPx
|
||
* @param {*} canvasHeightPx
|
||
*/
|
||
export const drawGridlines = (canvasCtx, dataStore) => {
|
||
// 计算当前可视范围的世界坐标
|
||
const store = dataStore || inspectionStore;
|
||
const viewTopLeft = screenToWorld(0, 0, store); // 视口左上角世界坐标
|
||
const viewBottomRight = screenToWorld(store.canvasWidthPx, store.canvasHeightPx, store); // 视口右下角世界坐标
|
||
const viewMinX = Math.floor(Math.min(viewTopLeft.x, viewBottomRight.x)); // 可视X最小整数
|
||
const viewMaxX = Math.ceil(Math.max(viewTopLeft.x, viewBottomRight.x)); // 可视X最大整数
|
||
const viewMinY = Math.floor(Math.min(viewTopLeft.y, viewBottomRight.y)); // 可视Y最小整数
|
||
const viewMaxY = Math.ceil(Math.max(viewTopLeft.y, viewBottomRight.y)); // 可视Y最大整数
|
||
|
||
// 绘制1米间隔的浅色网格线
|
||
canvasCtx.strokeStyle = 'rgba(30,50,80,0.25)'; // 淡蓝灰色
|
||
canvasCtx.lineWidth = 0.5; // 细线
|
||
canvasCtx.beginPath();
|
||
for (let worldX = viewMinX; worldX <= viewMaxX; worldX++) { // 逐列绘制垂直线
|
||
const screenPos = worldToScreen(worldX, 0, store);
|
||
canvasCtx.moveTo(screenPos.x, 0); // 从画布顶部
|
||
canvasCtx.lineTo(screenPos.x, store.canvasHeightPx); // 到画布底部
|
||
}
|
||
for (let worldY = viewMinY; worldY <= viewMaxY; worldY++) { // 逐行绘制水平线
|
||
const screenPos = worldToScreen(0, worldY, store);
|
||
canvasCtx.moveTo(0, screenPos.y); // 从画布左边
|
||
canvasCtx.lineTo(store.canvasWidthPx, screenPos.y); // 到画布右边
|
||
}
|
||
canvasCtx.stroke();
|
||
}
|
||
|
||
/**
|
||
* 绘制高级区域列表
|
||
* @param {*} canvasCtx
|
||
* @param {*} map
|
||
* @param {*} dataStore
|
||
*/
|
||
export const drawAdvancedAreaList = (canvasCtx, map, dataStore) => {
|
||
const store = dataStore || inspectionStore;
|
||
for (let areaIndex = 0; areaIndex < map.advancedAreas.length; areaIndex++) {
|
||
const area = map.advancedAreas[areaIndex]; // 当前区域
|
||
const vertices = area.posGroup || []; // 多边形顶点数组
|
||
if (vertices.length < 3) continue; // 少于3个顶点无法构成多边形，跳过
|
||
|
||
// ── 颜色：优先使用 attribute 中的 ARGB 整数，否则用默认品红色 ──
|
||
let fillColorCss = 'rgba(224,64,251,0.12)'; // 默认填充（品红半透明）
|
||
let strokeColorCss = 'rgba(224,64,251,0.5)'; // 默认描边（品红较不透明）
|
||
if (area.attribute) {
|
||
const brushColor = decodeArgbInteger(area.attribute.colorBrush); // 解码填充色
|
||
const penColor = decodeArgbInteger(area.attribute.colorPen); // 解码描边色
|
||
if (brushColor) {
|
||
// 使用原始 alpha 值的一半作为填充透明度，最小 0.06
|
||
fillColorCss = toCssRgba(brushColor, Math.max(0.06, (brushColor.a / 255) * 0.5));
|
||
}
|
||
if (penColor) {
|
||
strokeColorCss = toCssRgba(penColor, 0.6); // 描边60%不透明
|
||
}
|
||
}
|
||
|
||
// ── 绘制多边形 ──
|
||
canvasCtx.fillStyle = fillColorCss; // 设置填充色
|
||
canvasCtx.strokeStyle = strokeColorCss; // 设置描边色
|
||
canvasCtx.lineWidth = 1.2; // 描边宽度
|
||
canvasCtx.beginPath();
|
||
const firstVertexScreen = worldToScreen(vertices[0].x, vertices[0].y, store); // 第一个顶点的屏幕位置
|
||
canvasCtx.moveTo(firstVertexScreen.x, firstVertexScreen.y); // 移动到起点
|
||
for (let i = 1; i < vertices.length; i++) { // 依次连接后续顶点
|
||
const vertexScreen = worldToScreen(vertices[i].x, vertices[i].y, store);
|
||
canvasCtx.lineTo(vertexScreen.x, vertexScreen.y);
|
||
}
|
||
canvasCtx.closePath(); // 闭合路径
|
||
canvasCtx.fill(); // 填充
|
||
canvasCtx.stroke(); // 描边
|
||
|
||
// ── 在多边形质心处绘制区域名称标签 ──
|
||
let centroidWorldX = 0, centroidWorldY = 0; // 质心世界坐标
|
||
for (const v of vertices) { centroidWorldX += v.x; centroidWorldY += v.y; } // 累加顶点坐标
|
||
centroidWorldX /= vertices.length; // 求平均得到质心 X
|
||
centroidWorldY /= vertices.length; // 求平均得到质心 Y
|
||
const centroidScreen = worldToScreen(centroidWorldX, centroidWorldY, store);
|
||
canvasCtx.font = '500 32px "JetBrains Mono"'; // 标签字体
|
||
canvasCtx.fillStyle = strokeColorCss; // 与描边同色
|
||
canvasCtx.textAlign = 'center'; // 居中对齐
|
||
canvasCtx.fillText(area.instanceName || '', centroidScreen.x, centroidScreen.y + 3); // 绘制文字
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 绘制高级线列表
|
||
* @param {*} canvasCtx
|
||
* @param {*} map
|
||
*/
|
||
export const drawAdvancedLineList = (canvasCtx, map, dataStore) => {
|
||
const store = dataStore || inspectionStore;
|
||
for (let advLineIndex = 0; advLineIndex < map.advancedLines.length; advLineIndex++) {
|
||
const advLine = map.advancedLines[advLineIndex]; // 当前高级线
|
||
const lineData = advLine.line; // 内部的 line 对象
|
||
if (!lineData || !lineData.startPos || !lineData.endPos) continue; // 缺少端点则跳过
|
||
|
||
const startScreen = worldToScreen(lineData.startPos.x, lineData.startPos.y, store);
|
||
const endScreen = worldToScreen(lineData.endPos.x, lineData.endPos.y, store);
|
||
|
||
// ── 根据 className 决定颜色和线型 ──
|
||
let lineColorHex = '#ff6e40'; // 默认橙色
|
||
let lineDashPattern = []; // 默认实线（无虚线）
|
||
const classNameLower = (advLine.className || '').toLowerCase();
|
||
if (classNameLower.includes('forbidden')) { // 禁行线 → 红色虚线
|
||
lineColorHex = '#ff1744';
|
||
lineDashPattern = [8, 4]; // 虚线模式：8px实 4px空
|
||
} else if (classNameLower.includes('virtual')) { // 虚拟线 → 橙色虚线
|
||
lineColorHex = '#ffab40';
|
||
lineDashPattern = [4, 4];
|
||
}
|
||
|
||
// 绘制高级线
|
||
canvasCtx.save();
|
||
canvasCtx.shadowColor = lineColorHex; // 辉光色与线条同色
|
||
canvasCtx.shadowBlur = 4; // 辉光半径
|
||
canvasCtx.strokeStyle = lineColorHex; // 线条颜色
|
||
canvasCtx.lineWidth = 2.5; // 线宽（比基础线粗）
|
||
canvasCtx.setLineDash(lineDashPattern); // 设置虚线模式
|
||
canvasCtx.globalAlpha = 0.8; // 80%不透明
|
||
canvasCtx.beginPath();
|
||
canvasCtx.moveTo(startScreen.x, startScreen.y);
|
||
canvasCtx.lineTo(endScreen.x, endScreen.y);
|
||
canvasCtx.stroke();
|
||
canvasCtx.setLineDash([]); // 恢复实线
|
||
canvasCtx.restore();
|
||
|
||
// 在中点绘制名称标签
|
||
// const midpointScreenX = (startScreen.x + endScreen.x) / 2;
|
||
// const midpointScreenY = (startScreen.y + endScreen.y) / 2;
|
||
// canvasCtx.font = '500 8px "JetBrains Mono"';
|
||
// canvasCtx.fillStyle = hexToCssRgba(lineColorHex, 0.55); // 55%不透明的文字
|
||
// canvasCtx.textAlign = 'center';
|
||
// canvasCtx.fillText(advLine.instanceName || advLine.className || '', midpointScreenX, midpointScreenY - 6);
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 绘制基础直线列表
|
||
* @param {*} canvasCtx
|
||
* @param {*} map
|
||
* @param {*} dataStore
|
||
*/
|
||
export const drawNormalLines = (canvasCtx, map, dataStore) => {
|
||
const store = dataStore || inspectionStore;
|
||
for (let lineIndex = 0; lineIndex < map.normalLines.length; lineIndex++) {
|
||
const line = map.normalLines[lineIndex]; // 当前直线
|
||
const startScreen = worldToScreen(line.startPos.x, line.startPos.y, store); // 起点屏幕位置
|
||
const endScreen = worldToScreen(line.endPos.x, line.endPos.y, store); // 终点屏幕位置
|
||
|
||
// 绘制发光直线
|
||
canvasCtx.save();
|
||
canvasCtx.shadowColor = '#00e5ff'; // 阴影颜色（产生辉光）
|
||
canvasCtx.shadowBlur = 5; // 辉光扩散半径
|
||
canvasCtx.strokeStyle = '#00e5ff'; // 线条颜色：青色
|
||
canvasCtx.lineWidth = 2; // 线宽
|
||
canvasCtx.globalAlpha = 0.8; // 80%不透明
|
||
canvasCtx.beginPath();
|
||
canvasCtx.moveTo(startScreen.x, startScreen.y); // 从起点
|
||
canvasCtx.lineTo(endScreen.x, endScreen.y); // 到终点
|
||
canvasCtx.stroke();
|
||
canvasCtx.restore();
|
||
|
||
// 在中点绘制方向箭头
|
||
const midpointX = (startScreen.x + endScreen.x) / 2; // 中点X
|
||
const midpointY = (startScreen.y + endScreen.y) / 2; // 中点Y
|
||
const arrowAngle = Math.atan2(endScreen.y - startScreen.y, endScreen.x - startScreen.x); // 线段方向角
|
||
const arrowLength = 5; // 箭头长度
|
||
canvasCtx.fillStyle = 'rgba(0,229,255,0.6)'; // 箭头填充色
|
||
canvasCtx.beginPath();
|
||
canvasCtx.moveTo(midpointX + Math.cos(arrowAngle) * arrowLength, midpointY + Math.sin(arrowAngle) * arrowLength); // 箭头尖端
|
||
canvasCtx.lineTo(midpointX + Math.cos(arrowAngle + 2.5) * 4, midpointY + Math.sin(arrowAngle + 2.5) * 4); // 左翼
|
||
canvasCtx.lineTo(midpointX + Math.cos(arrowAngle - 2.5) * 4, midpointY + Math.sin(arrowAngle - 2.5) * 4); // 右翼
|
||
canvasCtx.closePath();
|
||
canvasCtx.fill();
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 绘制高级曲线列表
|
||
* @param {*} canvasCtx
|
||
* @param {*} map
|
||
* @param {*} dataStore
|
||
*/
|
||
export const drawAdvancedCurveList = (canvasCtx, map, dataStore) => {
|
||
const store = dataStore || inspectionStore;
|
||
for (let curveIndex = 0; curveIndex < map.advancedCurves.length; curveIndex++) {
|
||
const curve = map.advancedCurves[curveIndex]; // 当前曲线
|
||
|
||
// 提取起点和终点的 pos（注意：startPos/endPos 是 {instanceName, pos:{x,y}} 结构）
|
||
const startPoint = curve.startPos?.pos; // 起点世界坐标
|
||
const endPoint = curve.endPos?.pos; // 终点世界坐标
|
||
const controlPoint1 = curve.controlPos1; // 第一控制点（直接 {x,y}）
|
||
const controlPoint2 = curve.controlPos2; // 第二控制点（直接 {x,y}）
|
||
if (!startPoint || !endPoint) continue; // 缺少端点则跳过
|
||
|
||
// 转换为屏幕坐标
|
||
const startScreen = worldToScreen(startPoint.x, startPoint.y, store);
|
||
const endScreen = worldToScreen(endPoint.x, endPoint.y, store);
|
||
const cp1Screen = controlPoint1 ? worldToScreen(controlPoint1.x, controlPoint1.y, store) : null; // 可能不存在
|
||
const cp2Screen = controlPoint2 ? worldToScreen(controlPoint2.x, controlPoint2.y, store) : null;
|
||
|
||
// ── 绘制贝塞尔曲线（虚线）──
|
||
canvasCtx.save();
|
||
canvasCtx.shadowColor = '#76ff03'; // 酸绿色辉光
|
||
canvasCtx.shadowBlur = 5;
|
||
canvasCtx.strokeStyle = '#76ff03'; // 酸绿色线条
|
||
canvasCtx.lineWidth = 2;
|
||
canvasCtx.setLineDash([8, 5]); // 虚线模式
|
||
canvasCtx.globalAlpha = 0.85;
|
||
canvasCtx.beginPath();
|
||
canvasCtx.moveTo(startScreen.x, startScreen.y); // 起点
|
||
if (cp1Screen && cp2Screen) {
|
||
// 有2个控制点 → 三次贝塞尔 (cubic bezier)
|
||
canvasCtx.bezierCurveTo(cp1Screen.x, cp1Screen.y, cp2Screen.x, cp2Screen.y, endScreen.x, endScreen.y);
|
||
} else if (cp1Screen) {
|
||
// 仅1个控制点 → 二次贝塞尔 (quadratic bezier)
|
||
canvasCtx.quadraticCurveTo(cp1Screen.x, cp1Screen.y, endScreen.x, endScreen.y);
|
||
} else {
|
||
// 无控制点 → 直线
|
||
canvasCtx.lineTo(endScreen.x, endScreen.y);
|
||
}
|
||
canvasCtx.stroke();
|
||
canvasCtx.setLineDash([]); // 恢复实线
|
||
canvasCtx.restore();
|
||
|
||
// ── 在 t=0.5 处绘制方向箭头 ──
|
||
if (cp1Screen && cp2Screen) {
|
||
const t = 0.5; // 参数 t = 0.5（曲线中点）
|
||
const oneMinusT = 0.5; // 1-t = 0.5
|
||
// 三次贝塞尔公式计算中点坐标
|
||
const arrowX = oneMinusT ** 3 * startScreen.x + 3 * oneMinusT ** 2 * t * cp1Screen.x + 3 * oneMinusT * t ** 2 * cp2Screen.x + t ** 3 * endScreen.x;
|
||
const arrowY = oneMinusT ** 3 * startScreen.y + 3 * oneMinusT ** 2 * t * cp1Screen.y + 3 * oneMinusT * t ** 2 * cp2Screen.y + t ** 3 * endScreen.y;
|
||
// 三次贝塞尔的一阶导数（切线方向）
|
||
const tangentX = 3 * oneMinusT ** 2 * (cp1Screen.x - startScreen.x) + 6 * oneMinusT * t * (cp2Screen.x - cp1Screen.x) + 3 * t ** 2 * (endScreen.x - cp2Screen.x);
|
||
const tangentY = 3 * oneMinusT ** 2 * (cp1Screen.y - startScreen.y) + 6 * oneMinusT * t * (cp2Screen.y - cp1Screen.y) + 3 * t ** 2 * (endScreen.y - cp2Screen.y);
|
||
const tangentAngle = Math.atan2(tangentY, tangentX); // 切线角度
|
||
|
||
// 绘制箭头
|
||
canvasCtx.fillStyle = 'rgba(118,255,3,0.7)';
|
||
canvasCtx.beginPath();
|
||
canvasCtx.moveTo(arrowX + Math.cos(tangentAngle) * 5, arrowY + Math.sin(tangentAngle) * 5);
|
||
canvasCtx.lineTo(arrowX + Math.cos(tangentAngle + 2.5) * 4, arrowY + Math.sin(tangentAngle + 2.5) * 4);
|
||
canvasCtx.lineTo(arrowX + Math.cos(tangentAngle - 2.5) * 4, arrowY + Math.sin(tangentAngle - 2.5) * 4);
|
||
canvasCtx.closePath();
|
||
canvasCtx.fill();
|
||
|
||
// 绘制控制点小圆（辅助调试用）
|
||
canvasCtx.fillStyle = 'rgba(118,255,3,0.25)'; // 浅绿色半透明
|
||
for (const controlScreen of [cp1Screen, cp2Screen]) {
|
||
canvasCtx.beginPath();
|
||
canvasCtx.arc(controlScreen.x, controlScreen.y, 2.5, 0, Math.PI * 2); // 半径2.5px的小圆
|
||
canvasCtx.fill();
|
||
}
|
||
}
|
||
|
||
// ── 曲线名称标签 ──
|
||
// canvasCtx.font = '500 7px "JetBrains Mono"';
|
||
// canvasCtx.fillStyle = 'rgba(118,255,3,0.5)';
|
||
// canvasCtx.textAlign = 'center';
|
||
// const labelScreenY = Math.min(startScreen.y, endScreen.y) - 8; // 标签放在最高点上方
|
||
// canvasCtx.fillText(curve.instanceName || '', (startScreen.x + endScreen.x) / 2, labelScreenY);
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 绘制高级点列表
|
||
* @param {*} canvasCtx
|
||
* @param {*} map
|
||
* @param {*} dataStore
|
||
*/
|
||
export const drawAdvancedPointList = (canvasCtx, map, dataStore) => {
|
||
const store = dataStore || inspectionStore;
|
||
for (let pointIndex = 0; pointIndex < map.advancedPoints.length; pointIndex++) {
|
||
const advPoint = map.advancedPoints[pointIndex]; // 当前高级点
|
||
const pointScreen = worldToScreen(advPoint.pos.x, advPoint.pos.y, store); // 屏幕位置
|
||
|
||
// 判断是否被鼠标悬停
|
||
const isHovered = store.hoveredElement &&
|
||
store.hoveredElement.kind === 'point' &&
|
||
store.hoveredElement.index === pointIndex;
|
||
|
||
// ── 根据 className 决定颜色 ──
|
||
let pointColorHex = '#ffd600'; // 默认琥珀色
|
||
const classNameLower = (advPoint.className || '').toLowerCase();
|
||
if (classNameLower.includes('landmark') || classNameLower.includes('land')) {
|
||
pointColorHex = '#ffd600'; // LandMark → 琥珀色
|
||
} else if (classNameLower.includes('charge')) {
|
||
pointColorHex = '#22c55e'; // 充电点 → 绿色
|
||
} else if (classNameLower.includes('load')) {
|
||
pointColorHex = '#3b82f6'; // 装载点 → 蓝色
|
||
} else if (classNameLower.includes('work') || classNameLower.includes('process')) {
|
||
pointColorHex = '#a855f7'; // 工位 → 紫色
|
||
} else if (classNameLower.includes('station')) {
|
||
pointColorHex = '#00e5ff'; // 站点 → 青色
|
||
}
|
||
|
||
// ── 绘制菱形标记 ──
|
||
const diamondRadius = isHovered ? 8 : 5; // 悬停时放大
|
||
const pulseAlpha = isHovered ? Math.sin(store.animationTimeSeconds * 5) * 0.2 + 0.8 : 1; // 悬停时脉冲闪烁
|
||
|
||
canvasCtx.save();
|
||
canvasCtx.globalAlpha = pulseAlpha; // 应用透明度
|
||
canvasCtx.shadowColor = pointColorHex; // 辉光颜色
|
||
canvasCtx.shadowBlur = isHovered ? 18 : 8; // 悬停时增强辉光
|
||
|
||
// 绘制旋转45度的正方形（菱形）
|
||
canvasCtx.fillStyle = pointColorHex;
|
||
canvasCtx.beginPath();
|
||
canvasCtx.moveTo(pointScreen.x, pointScreen.y - diamondRadius); // 上顶点
|
||
canvasCtx.lineTo(pointScreen.x + diamondRadius * 0.7, pointScreen.y); // 右顶点
|
||
canvasCtx.lineTo(pointScreen.x, pointScreen.y + diamondRadius); // 下顶点
|
||
canvasCtx.lineTo(pointScreen.x - diamondRadius * 0.7, pointScreen.y); // 左顶点
|
||
canvasCtx.closePath();
|
||
canvasCtx.fill();
|
||
|
||
// 中心白色小圆点（指示精确位置）
|
||
canvasCtx.shadowBlur = 0;
|
||
canvasCtx.fillStyle = '#fff';
|
||
canvasCtx.globalAlpha = 0.9;
|
||
canvasCtx.beginPath();
|
||
canvasCtx.arc(pointScreen.x, pointScreen.y, 1.8, 0, Math.PI * 2); // 半径1.8px
|
||
canvasCtx.fill();
|
||
canvasCtx.restore();
|
||
|
||
// ── 方向箭头（基于 dir 字段，弧度）──
|
||
if (advPoint.dir !== undefined && advPoint.dir !== null) {
|
||
// dir 可能是字符串（smap 样例中为 "-1.5759999999999958"）或数字
|
||
const dirRadians = typeof advPoint.dir === 'string' ? parseFloat(advPoint.dir) : advPoint.dir;
|
||
if (!isNaN(dirRadians)) { // 有效方向角
|
||
const arrowLengthPx = 12; // 箭头长度（屏幕像素）
|
||
canvasCtx.strokeStyle = hexToCssRgba(pointColorHex, 0.5); // 半透明的线条
|
||
canvasCtx.lineWidth = 1;
|
||
canvasCtx.beginPath();
|
||
canvasCtx.moveTo(pointScreen.x, pointScreen.y); // 从点中心出发
|
||
// 注意：世界坐标 Y 向上，但 atan2 使用的 dir 是标准数学角，屏幕 Y 翻转后取负
|
||
canvasCtx.lineTo(
|
||
pointScreen.x + Math.cos(dirRadians) * arrowLengthPx,
|
||
pointScreen.y - Math.sin(dirRadians) * arrowLengthPx // Y 翻转
|
||
);
|
||
canvasCtx.stroke();
|
||
}
|
||
}
|
||
|
||
// ── 名称标签 ──
|
||
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);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 绘制地图边界
|
||
* @param {*} canvasCtx
|
||
* @param {*} map
|
||
* @param {*} dataStore
|
||
*/
|
||
export const drawMapBoundary = (canvasCtx, map, dataStore) => {
|
||
const store = dataStore || inspectionStore;
|
||
const boundaryTopLeft = worldToScreen(map.originX, map.maxY, store); // 边界左上角屏幕位置
|
||
const boundaryBottomRight = worldToScreen(map.maxX, map.originY, store); // 边界右下角屏幕位置
|
||
canvasCtx.strokeStyle = 'rgba(0,229,160,0.1)'; // 极淡的青绿色
|
||
canvasCtx.lineWidth = 1;
|
||
canvasCtx.setLineDash([5, 4]); // 虚线
|
||
canvasCtx.strokeRect(
|
||
boundaryTopLeft.x, boundaryTopLeft.y,
|
||
boundaryBottomRight.x - boundaryTopLeft.x,
|
||
boundaryBottomRight.y - boundaryTopLeft.y
|
||
);
|
||
canvasCtx.setLineDash([]); // 恢复实线
|
||
};
|
||
|
||
/**
|
||
* 从 normalPosList 构建占据栅格图像
|
||
*
|
||
* 原理：normalPosList 中每个点标记一个自由通行格子。
|
||
* 未出现在列表中的格子 = 障碍物（墙壁）
|
||
* 墙壁格子如果紧邻自由格子，则标记为"墙壁边缘"，渲染高亮
|
||
*
|
||
* @param {Object} parsedMap - parseSmapJson 的输出
|
||
* @param {boolean} showEdgeGlow - 是否计算墙壁边缘高亮效果
|
||
* @returns {HTMLCanvasElement} 离屏 Canvas 元素，包含渲染好的栅格图像
|
||
*/
|
||
export const buildOccupancyGridImage = (parsedMap, showEdgeGlow) => {
|
||
const gridW = parsedMap.gridWidth; // 栅格宽度（像素）
|
||
const gridH = parsedMap.gridHeight; // 栅格高度（像素）
|
||
const originX = parsedMap.originX; // 世界坐标原点 X
|
||
const originY = parsedMap.originY; // 世界坐标原点 Y
|
||
const resolution = parsedMap.resolution; // 分辨率
|
||
|
||
// ── 第一步：遍历 normalPosList，标记自由空间 ──
|
||
const occupancyGrid = new Uint8Array(gridW * gridH); // 0=墙壁, 1=自由空间
|
||
for (const freeSpacePoint of parsedMap.normalPositions) {
|
||
// 将世界坐标转换为栅格像素坐标
|
||
const gridColX = Math.floor((freeSpacePoint.x - originX) / resolution); // 列号（从左到右）
|
||
const pixelRowFromBottom = Math.floor((freeSpacePoint.y - originY) / resolution); // 行号（从下到上，世界坐标系）
|
||
const imageRowY = gridH - 1 - pixelRowFromBottom; // 翻转为图像行号（从上到下）
|
||
// 安全边界检查后标记为自由空间
|
||
if (gridColX >= 0 && gridColX < gridW && imageRowY >= 0 && imageRowY < gridH) {
|
||
occupancyGrid[imageRowY * gridW + gridColX] = 1; // 标记该格为自由
|
||
}
|
||
}
|
||
|
||
// ── 第二步：遍历每个格子，按类型着色 ──
|
||
const offscreenCanvas = document.createElement('canvas'); // 创建离屏 Canvas
|
||
offscreenCanvas.width = gridW; // 设置尺寸
|
||
offscreenCanvas.height = gridH;
|
||
const offscreenCtx = offscreenCanvas.getContext('2d'); // 获取上下文
|
||
const imageData = offscreenCtx.createImageData(gridW, gridH);// 创建 ImageData
|
||
const pixelData = imageData.data; // 像素数据数组 (RGBA 扁平排列)
|
||
|
||
// 定义三种颜色
|
||
const FREE_SPACE_R = 10, FREE_SPACE_G = 16, FREE_SPACE_B = 30; // 自由空间：深蓝黑
|
||
const WALL_INTERIOR_R = 22, WALL_INTERIOR_G = 36, WALL_INTERIOR_B = 64; // 墙壁内部：深蓝
|
||
const WALL_EDGE_R = 45, WALL_EDGE_G = 130, WALL_EDGE_B = 255; // 墙壁边缘：亮蓝
|
||
|
||
for (let rowY = 0; rowY < gridH; rowY++) { // 逐行扫描
|
||
for (let colX = 0; colX < gridW; colX++) { // 逐列扫描
|
||
const gridIndex = rowY * gridW + colX; // 一维数组索引
|
||
const pixelOffset = gridIndex << 2; // RGBA 偏移（×4）
|
||
|
||
if (occupancyGrid[gridIndex] === 1) {
|
||
// ── 自由空间 ──
|
||
pixelData[pixelOffset] = FREE_SPACE_R; // R
|
||
pixelData[pixelOffset + 1] = FREE_SPACE_G; // G
|
||
pixelData[pixelOffset + 2] = FREE_SPACE_B; // B
|
||
pixelData[pixelOffset + 3] = 255; // A（不透明）
|
||
} else {
|
||
// ── 障物（墙壁）── 判断是否为边缘
|
||
let isAdjacentToFreeSpace = false; // 是否紧邻自由空间
|
||
if (showEdgeGlow) { // 仅在启用边缘效果时检测
|
||
if (rowY > 0 && occupancyGrid[(rowY - 1) * gridW + colX] === 1) isAdjacentToFreeSpace = true; // 上方
|
||
else if (rowY < gridH - 1 && occupancyGrid[(rowY + 1) * gridW + colX] === 1) isAdjacentToFreeSpace = true; // 下方
|
||
else if (colX > 0 && occupancyGrid[rowY * gridW + colX - 1] === 1) isAdjacentToFreeSpace = true; // 左方
|
||
else if (colX < gridW - 1 && occupancyGrid[rowY * gridW + colX + 1] === 1) isAdjacentToFreeSpace = true; // 右方
|
||
}
|
||
if (isAdjacentToFreeSpace) {
|
||
// 墙壁边缘：亮蓝色
|
||
pixelData[pixelOffset] = WALL_EDGE_R;
|
||
pixelData[pixelOffset + 1] = WALL_EDGE_G;
|
||
pixelData[pixelOffset + 2] = WALL_EDGE_B;
|
||
pixelData[pixelOffset + 3] = 255;
|
||
} else {
|
||
// 墙壁内部：深蓝色
|
||
pixelData[pixelOffset] = WALL_INTERIOR_R;
|
||
pixelData[pixelOffset + 1] = WALL_INTERIOR_G;
|
||
pixelData[pixelOffset + 2] = WALL_INTERIOR_B;
|
||
pixelData[pixelOffset + 3] = 255;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 将 ImageData 绘制到离屏 Canvas 上
|
||
offscreenCtx.putImageData(imageData, 0, 0);
|
||
return offscreenCanvas;
|
||
}
|
||
|
||
export class MobileRobot {
|
||
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) {
|
||
this.init(color, this.imageUrl)
|
||
}
|
||
}
|
||
|
||
async init(color, imageUrl) {
|
||
const response = await fetch(imageUrl);
|
||
let svgText = await response.text();
|
||
// 替换颜色
|
||
svgText = svgText.replace(/currentColor/g, color);
|
||
svgText = svgText.replace(/stroke="[^"]*"/g, `stroke="${color}"`);
|
||
// 创建Blob URL
|
||
const blob = new Blob([svgText], { type: 'image/svg+xml' });
|
||
const url = URL.createObjectURL(blob);
|
||
this.imgElement = new Image();
|
||
this.imgElement.src = url;
|
||
}
|
||
// 命中检测: 检查世界坐标是否在机器人区域内 (半径0.35米)
|
||
hitTest(worldX, worldY, pixelsPerMeter){
|
||
const dx = worldX - this.x;
|
||
const dy = worldY - this.y;
|
||
const distance = Math.hypot(dx, dy);
|
||
const hitRadius = 0.35; // 米
|
||
return distance < hitRadius;
|
||
}
|
||
|
||
// 绘制到canvas上下文 (屏幕坐标)
|
||
draw(ctx, screenX, screenY, color, scale = 1) {
|
||
const size = 24; // 绘制大小px
|
||
if (this.imgElement && this.imgElement.complete) {
|
||
ctx.save();
|
||
ctx.translate(screenX, screenY);
|
||
ctx.rotate(-this.angle); // canvas Y向下, 角度翻转适配
|
||
ctx.drawImage(this.imgElement, -size / 2, -size / 2, size, size);
|
||
ctx.restore();
|
||
}
|
||
// 名字标签
|
||
ctx.font = '12px "JetBrains Mono"';
|
||
ctx.fillStyle = color;
|
||
ctx.shadowBlur = 0;
|
||
ctx.fillText(this.name, screenX, screenY - 20);
|
||
}
|
||
|
||
// 更新位置
|
||
setPosition(x, y) { this.x = x; this.y = y; }
|
||
setAngle(rad) { this.angle = rad; }
|
||
}
|
||
|