From 072fa343de3d15437ed6e46e75200fdde40a4497 Mon Sep 17 00:00:00 2001
From: vincentlu <t1341870251@gmail.com>
Date: 星期四, 19 三月 2026 13:00:55 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/map/constants.js | 26 ++++++++++++
zy-acs-flow/src/map/tool.js | 9 +++-
zy-acs-flow/src/map/player.js | 32 ++++++++++-----
3 files changed, 52 insertions(+), 15 deletions(-)
diff --git a/zy-acs-flow/src/map/constants.js b/zy-acs-flow/src/map/constants.js
index 05d7710..032b4f4 100644
--- a/zy-acs-flow/src/map/constants.js
+++ b/zy-acs-flow/src/map/constants.js
@@ -27,6 +27,25 @@
AREA_MODE: "4",
})
+export const MAP_TONES = Object.freeze({
+ light: {
+ canvasBackground: '#f1f2f6',
+ textPrimary: 0x333333,
+ grid: {
+ color: 0x000000,
+ alpha: 0.08,
+ },
+ },
+ dark: {
+ canvasBackground: '#1c222b',
+ textPrimary: 0xcfd6e3,
+ grid: {
+ color: 0x5f6773,
+ alpha: 0.22,
+ },
+ },
+});
+
export const DEVICE_TYPE = Object.freeze({
SHELF: "SHELF",
STATION: 'STATION',
@@ -72,7 +91,7 @@
DIRECTION: null,
AGV: 0xb2bec3,
- POINT: 0xdfe6e9,
+ POINT: 0x555a68,
})
export const DEVICE_SELECTED_EFFECT_PADDING = Object.freeze({
@@ -111,3 +130,8 @@
ORDER: 1,
REVERSE_ORDER: 2,
})
+
+export const ROUTE_COLORS = Object.freeze({
+ light: 0x2f68ac,
+ dark: 0x4a84c8,
+});
diff --git a/zy-acs-flow/src/map/player.js b/zy-acs-flow/src/map/player.js
index 406ad91..b2ad5d2 100644
--- a/zy-acs-flow/src/map/player.js
+++ b/zy-acs-flow/src/map/player.js
@@ -2,7 +2,9 @@
import * as TWEEDLE from 'tweedle.js';
import * as Tool from './tool';
import star from '/img/map/star.png';
-import { DEVICE_TYPE, MAP_MIRROR } from './constants';
+import { DEVICE_TYPE, MAP_MIRROR, MAP_TONES } from './constants';
+
+const getMapTone = (mode) => mode === 'dark' ? MAP_TONES.dark : MAP_TONES.light;
export default class Player {
@@ -275,8 +277,9 @@
}
showCoordinates = () => {
+ const tone = getMapTone(this.themeMode);
this.coordinatesText = new PIXI.Text('{ X: 0, Y: 0 }', {
- fill: this.themeMode === 'dark' ? 0xdddddd : 0x333333,
+ fill: tone.textPrimary,
fontSize: 13,
fontFamily: 'Microsoft YaHei',
fontWeight: 'bold',
@@ -286,7 +289,7 @@
this.app.stage.addChild(this.coordinatesText);
this.rotationText = new PIXI.Text('ROTATION: 0掳', {
- fill: this.themeMode === 'dark' ? 0xdddddd : 0x333333,
+ fill: tone.textPrimary,
fontSize: 13,
fontFamily: 'Microsoft YaHei',
fontWeight: 'bold',
@@ -310,8 +313,8 @@
}
const spacing = 30;
- const lineDefaultAlpha = .1;;
- const lineDefaultColor = 0x000000;
+ const tone = getMapTone(this.themeMode);
+ const { color: lineDefaultColor, alpha: lineDefaultAlpha } = tone.grid;
for (let i = 0; i < this.app.view.width / spacing; i++) {
const graphics = new PIXI.Graphics();
graphics.lineStyle(1, lineDefaultColor, lineDefaultAlpha);
@@ -341,7 +344,8 @@
}
}
- showStarryBackground = (tint = 0x8395a7) => {
+ showStarryBackground = (tint) => {
+ const resolvedTint = tint ?? (this.themeMode === 'dark' ? 0x6f7d92 : 0x8395a7);
if (!this.starryContainer) {
this.starryContainer = generatePixiContainer('starryContainer');
this.app.stage.addChild(this.starryContainer);
@@ -369,7 +373,7 @@
};
star.sprite.anchor.x = 0.5;
star.sprite.anchor.y = 0.7;
- star.sprite.tint = tint; // filter
+ star.sprite.tint = resolvedTint; // filter
randomizeStar(star, true);
this.starryContainer.addChild(star.sprite);
stars.push(star);
@@ -449,20 +453,26 @@
}
setTheme = (themeMode) => {
- this.app.renderer.background.color = themeMode === 'dark' ? '#3a3f44' : '#f1f2f6';
+ this.themeMode = themeMode;
+ const tone = getMapTone(themeMode);
+ this.app.renderer.background.color = tone.canvasBackground;
if (this.coordinatesText) {
- this.coordinatesText.style.fill = themeMode === 'dark' ? 0xdddddd : 0x333333;
+ this.coordinatesText.style.fill = tone.textPrimary;
}
if (this.rotationText) {
- this.rotationText.style.fill = themeMode === 'dark' ? 0xdddddd : 0x333333;
+ this.rotationText.style.fill = tone.textPrimary;
+ }
+ if (this.gridLineContainer) {
+ this.showGridLines();
}
}
}
const generateApp = (dom, themeMode) => {
+ const tone = getMapTone(themeMode);
const app = new PIXI.Application({
- background: themeMode === 'dark' ? '#3b4148' : '#f1f2f6',
+ background: tone.canvasBackground,
antialias: true,
// resizeTo: dom,
})
diff --git a/zy-acs-flow/src/map/tool.js b/zy-acs-flow/src/map/tool.js
index 1323f30..6bad62e 100644
--- a/zy-acs-flow/src/map/tool.js
+++ b/zy-acs-flow/src/map/tool.js
@@ -13,6 +13,7 @@
POINT_ROUTE_DIRECTION,
ANIMATE_DURING_TIME,
AGV_ANGLE_OFFSET_VAL,
+ ROUTE_COLORS,
} from './constants';
import { getRouteList, fetchAreaList } from './http';
import PointRoute from "./PointRoute";
@@ -140,7 +141,9 @@
tintType[deviceType] != null && (sprite.tint = tintType[deviceType]);
if (sprite && deviceType !== DEVICE_TYPE.AGV) {
- sprite.blendMode = PIXI.BLEND_MODES.MULTIPLY;
+ sprite.blendMode = themeMode === 'dark'
+ ? PIXI.BLEND_MODES.NORMAL
+ : PIXI.BLEND_MODES.MULTIPLY;
}
return sprite;
}
@@ -932,8 +935,8 @@
agvPath.name = agvPathName;
agvPath.lineStyle(
Math.max(200, 4 * (1 / mapContainer?.scale.x || 1)),
- themeMode === 'dark' ? 0x40739e : 0x2f68ac,
- 0.8,
+ ROUTE_COLORS[themeMode === 'dark' ? 'dark' : 'light'],
+ themeMode === 'dark' ? 0.75 : 0.8,
);
agvPath.zIndex = DEVICE_Z_INDEX.DYNAMIC_ROUTE;
// agvPath.blendMode = PIXI.BLEND_MODES.NORMAL;
--
Gitblit v1.9.1