From 99cc3bb108a9ced40b126778da8bbd34963549b5 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期四, 10 十月 2024 10:52:10 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/tool.js | 109 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 104 insertions(+), 5 deletions(-) diff --git a/zy-acs-flow/src/map/tool.js b/zy-acs-flow/src/map/tool.js index 4d3a804..fa64cbe 100644 --- a/zy-acs-flow/src/map/tool.js +++ b/zy-acs-flow/src/map/tool.js @@ -10,23 +10,33 @@ import station from '/map/station.svg'; import direction from '/map/direction.svg'; -let app, mapContainer; +let app, mapContainer, themeMode; +let selectedSprite, effectTick, effectHalfCircle, effectRectangle; + +export function getApp() { + return app; +} export function setApp(param) { app = param; +} + +export function getMapContainer() { + return mapContainer; } export function setMapContainer(param) { mapContainer = param; } -export function getApp() { - return app; +export function getThemeMode() { + return themeMode; } -export function getMapContainer() { - return mapContainer; +export function setThemeMode(param) { + themeMode = param; } + export const getRealPosition = (x, y) => { const rect = app.view.getBoundingClientRect(); @@ -189,6 +199,19 @@ && spriteBounds.y < boxBounds.y + boxBounds.height; } +export const beSettings = (sprite, setSpriteSettings) => { + sprite.off('pointerup'); + sprite.off('pointermove'); + sprite.off('pointerdown'); + sprite.off('click'); + + sprite.on("click", onClick); + + function onClick(event) { + setSpriteSettings(sprite); + } +} + export const clearMapData = () => { if (!mapContainer) { return; @@ -212,6 +235,82 @@ } +export const showSelectedEffect = (sprite) => { + const { width, height } = sprite; + + const scale = sprite.scale.x; + const sideLen = (Math.max(width, height) + 10) * scale; + const color = themeMode === 'light' ? 0x273c75 : 0xffffff; + + effectHalfCircle = new PIXI.Graphics(); + effectHalfCircle.beginFill(color); + effectHalfCircle.lineStyle(2 * scale, color); + effectHalfCircle.arc(0, 0, sideLen, 0, Math.PI); + effectHalfCircle.endFill(); + effectHalfCircle.position.set(sprite.x, sprite.y); + effectHalfCircle.scale.set(1 / scale); + effectHalfCircle.zIndex = 9999; + + effectRectangle = new PIXI.Graphics(); + effectRectangle.lineStyle(5 * scale, color, 1); + effectRectangle.drawRoundedRect(0, 0, sideLen, sideLen, 16 * scale); + effectRectangle.endFill(); + effectRectangle.mask = effectHalfCircle; + effectRectangle.zIndex = 9999; + + const scaledWidth = sideLen * (1 / scale); + const scaledHeight = sideLen * (1 / scale); + + effectRectangle.scale.set(1 / scale); + effectRectangle.position.set(sprite.x - scaledWidth / 2, sprite.y - scaledHeight / 2); + + mapContainer.addChild(effectRectangle); + mapContainer.addChild(effectHalfCircle); + + selectedSprite = sprite; + + let phase = 0; + effectTick = (delta) => { + phase += delta / 10; + phase %= (Math.PI * 2); + if (effectHalfCircle) { + effectHalfCircle.rotation = phase; + } + }; + + app.ticker.add(effectTick); +} + +export const removeSelectedEffect = () => { + if (effectTick) { + app.ticker.remove(effectTick); + } + if (effectHalfCircle) { + mapContainer.removeChild(effectHalfCircle); + effectHalfCircle = null; + } + if (effectRectangle) { + mapContainer.removeChild(effectRectangle); + effectRectangle = null; + } + selectedSprite = null; +} + +export const updateEffect = (sprite) => { + if (!sprite || sprite !== selectedSprite || !effectRectangle || !effectHalfCircle) { + return + } + const { width, height } = sprite; + const scale = sprite?.scale.x; + const sideLen = (Math.max(width, height) + 10) * scale; + const scaledWidth = sideLen * (1 / scale); + const scaledHeight = sideLen * (1 / scale); + + effectRectangle.position.set(sprite.x - scaledWidth / 2, sprite.y - scaledHeight / 2); + + effectHalfCircle.position.set(sprite.x, sprite.y); +} + export const generateID = () => { return Date.now().toString(36) + Math.random().toString(36).substring(2); } -- Gitblit v1.9.1