From 87ff1a0ea70cde333bcd251a512303ccad57f93b Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期三, 06 三月 2024 15:20:28 +0800 Subject: [PATCH] # --- zy-asrs-flow/src/pages/map/utils.js | 61 +++++++++++++++++++++++++++++- 1 files changed, 58 insertions(+), 3 deletions(-) diff --git a/zy-asrs-flow/src/pages/map/utils.js b/zy-asrs-flow/src/pages/map/utils.js index 6fbcf0b..c2d7558 100644 --- a/zy-asrs-flow/src/pages/map/utils.js +++ b/zy-asrs-flow/src/pages/map/utils.js @@ -1,6 +1,8 @@ +import * as PIXI from 'pixi.js'; let app = null; let mapContainer = null; +let effectTick, effectHalfCircle, effectRectangle; export function syncApp(param) { app = param; @@ -68,16 +70,16 @@ } // sprite be beSettings from sprite click event -export const beSettings = (sprite, setCurrSpriteBySettings, setDidClickSprite) => { +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) { - setCurrSpriteBySettings(sprite); + setSpriteBySettings(sprite); // setDidClickSprite(true); } } @@ -146,6 +148,59 @@ && spriteBounds.y < boxBounds.y + boxBounds.height; } +export const showSelectedEffect = (sprite) => { + const { width, height } = sprite; + const scale = mapContainer.scale.x; + const sideLen = (Math.max(width, height) + 10) * scale; + const color = 0x273c75; + + effectHalfCircle = new PIXI.Graphics(); + effectHalfCircle.beginFill(color); + effectHalfCircle.lineStyle(2, 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, color, 1); + effectRectangle.drawRoundedRect(0, 0, sideLen, sideLen, 16); + 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