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 | 84 +++++++++++++++++++++++++++++++++++++++--- 1 files changed, 78 insertions(+), 6 deletions(-) diff --git a/zy-asrs-flow/src/pages/map/utils.js b/zy-asrs-flow/src/pages/map/utils.js index a72b30d..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,6 +63,7 @@ if (dragTarget) { setDidClickSprite(false); this.parent.off('pointermove'); + this.parent.off('pointerup'); dragTarget.alpha = 1; dragTarget = null; } @@ -67,9 +71,24 @@ } +// 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 // the scale was dynamic -export const spriteListBeMovable = (selectedSprites, scale, activateMapEvent) => { +export const spriteListBeMovable = (selectedSprites, scale, resetFn) => { if (selectedSprites && selectedSprites.length > 0) { let batchMove = false; let batchMoveStartPos = null; @@ -99,7 +118,7 @@ mapContainer.parent.off('mousemove'); mapContainer.parent.off('mouseup'); - activateMapEvent(MapEvent.SELECTION_BOX); + resetFn(); } const batchMoveStart = (event) => { @@ -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