From a554a78015cb8bd0b9f1e65a4ac478b42f73f5f9 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期五, 08 三月 2024 16:04:45 +0800 Subject: [PATCH] # --- zy-asrs-flow/src/pages/map/utils.js | 80 ++++++++++++++++++++++++++++++++++++++-- 1 files changed, 76 insertions(+), 4 deletions(-) diff --git a/zy-asrs-flow/src/pages/map/utils.js b/zy-asrs-flow/src/pages/map/utils.js index f97a5f9..c01b8d8 100644 --- a/zy-asrs-flow/src/pages/map/utils.js +++ b/zy-asrs-flow/src/pages/map/utils.js @@ -1,8 +1,8 @@ - - +import * as PIXI from 'pixi.js'; let app = null; let mapContainer = null; +let effectTick, effectHalfCircle, effectRectangle; export function syncApp(param) { app = param; @@ -24,16 +24,19 @@ } } -export const initSprite = (sprite) => { +export const initSprite = (sprite, type) => { sprite.anchor.set(0.5); sprite.cursor = 'pointer'; sprite.eventMode = 'static'; - sprite.data = {}; + sprite.data = { + type: type + }; } // sprite be movable from sprite click event export const beMovable = (sprite, setDidClickSprite) => { sprite.off('pointerup'); + sprite.off('pointermove'); sprite.off('pointerdown'); sprite.off('click'); @@ -60,11 +63,27 @@ if (dragTarget) { setDidClickSprite(false); this.parent.off('pointermove'); + this.parent.off('pointerup'); dragTarget.alpha = 1; dragTarget = null; } } +} + +// sprite be beSettings from sprite click event +export const beSettings = (sprite, setSpriteBySettings, setDidClickSprite) => { + sprite.off('pointerup'); + sprite.off('pointermove'); + sprite.off('pointerdown'); + sprite.off('click'); + + sprite.on("click", onClick); + + function onClick(event) { + setSpriteBySettings(sprite); + // setDidClickSprite(true); + } } // sprites be movable from select box @@ -131,6 +150,59 @@ && spriteBounds.y < boxBounds.y + boxBounds.height; } +export const showSelectedEffect = (sprite) => { + const { width, height } = sprite; + const scale = sprite.scale.x; + const sideLen = (Math.max(width, height) + 10) * scale; + const color = 0x273c75; + + 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); + + effectRectangle = new PIXI.Graphics(); + effectRectangle.lineStyle(2 * scale, color, 1); + effectRectangle.drawRoundedRect(0, 0, sideLen, sideLen, 16 * scale); + effectRectangle.endFill(); + effectRectangle.mask = effectHalfCircle; + + 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); + + let phase = 0; + effectTick = (delta) => { + phase += delta / 10; + phase %= (Math.PI * 2); + 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; + } +} + export const markSprite = (sprite) => { sprite.alpha = 0.5; } -- Gitblit v1.9.1