From b289a4c397c65f40aa89d13604a51f9f13a0328f Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期六, 19 十月 2024 10:17:50 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/tool.js | 187 +++++++++++++++++++++++++++++++++------------- 1 files changed, 132 insertions(+), 55 deletions(-) diff --git a/zy-acs-flow/src/map/tool.js b/zy-acs-flow/src/map/tool.js index 9bb38d2..8f942a9 100644 --- a/zy-acs-flow/src/map/tool.js +++ b/zy-acs-flow/src/map/tool.js @@ -330,83 +330,160 @@ } } + +// export const showSelectedEffect = (sprite) => { +// if (!sprite?.texture || !sprite?.texture?.valid) { +// return; +// } +// 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); +// } + +let effectCircle = null; +let effectTicker = null; + export const showSelectedEffect = (sprite) => { if (!sprite?.texture || !sprite?.texture?.valid) { return; } + + // 濡傛灉宸茬粡鏈夌壒鏁堬紝鍏堢Щ闄� + removeSelectedEffect(); + const { width, height } = sprite; const scale = sprite.scale.x; - const sideLen = (Math.max(width, height) + 10) * scale; + const maxDimension = Math.max(width, height); + const radius = (maxDimension / 2) * scale * 1.2; // 鏀惧ぇ1.2鍊嶏紝浣垮渾绋嶅ぇ浜巗prite + 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; + // 鍒涘缓鍦嗗舰鐗规晥 + effectCircle = new PIXI.Graphics(); + effectCircle.lineStyle(2 * scale, color, 1); + effectCircle.drawCircle(0, 0, radius); + effectCircle.endFill(); + effectCircle.position.set(sprite.x, sprite.y); + effectCircle.zIndex = sprite.zIndex - 1; // 纭繚涓嶉伄鎸prite - 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); + // 灏嗙壒鏁堟坊鍔犲埌瀹瑰櫒涓� + mapContainer.addChild(effectCircle); selectedSprite = sprite; - let phase = 0; - effectTick = (delta) => { - phase += delta / 10; - phase %= (Math.PI * 2); - if (effectHalfCircle) { - effectHalfCircle.rotation = phase; + // 瀹炵幇鑴夊啿鏁堟灉 + let pulseScale = 1; + let scalingUp = true; + effectTicker = (delta) => { + const pulseSpeed = 0.005 * delta; + if (scalingUp) { + pulseScale += pulseSpeed; + if (pulseScale >= 1.2) { + scalingUp = false; + } + } else { + pulseScale -= pulseSpeed; + if (pulseScale <= 1) { + scalingUp = true; + } } + effectCircle.scale.set(pulseScale); + // 濮嬬粓璺熼殢sprite鐨勪綅缃� + effectCircle.position.set(selectedSprite.x, selectedSprite.y); }; - app.ticker.add(effectTick); -} + app.ticker.add(effectTicker); +}; export const removeSelectedEffect = () => { - if (effectTick) { - app.ticker.remove(effectTick); + if (effectTicker) { + app.ticker.remove(effectTicker); + effectTicker = null; } - if (effectHalfCircle) { - mapContainer.removeChild(effectHalfCircle); - effectHalfCircle = null; - } - if (effectRectangle) { - mapContainer.removeChild(effectRectangle); - effectRectangle = null; + if (effectCircle) { + mapContainer.removeChild(effectCircle); + effectCircle.destroy(); + effectCircle = null; } selectedSprite = null; -} +}; -export const updateEffect = (sprite) => { - if (!sprite || sprite !== selectedSprite || !effectRectangle || !effectHalfCircle) { - return +export const updateEffect = () => { + if (!selectedSprite || !effectCircle) { + 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); -} + // 鏇存柊鍦嗙殑浣嶇疆锛岀‘淇濊窡闅弒prite + effectCircle.position.set(selectedSprite.x, selectedSprite.y); +}; export const multipleSelectEnhancer = (selectedSprites, setCurSprite, setBatchSprites) => { selectedSprites = selectedSprites.filter(sprite => sprite.data?.type); -- Gitblit v1.9.1