From d5df2385eeaf50c240fba88669b5ef002dbda4bb Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期六, 19 十月 2024 15:05:22 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/tool.js | 94 +++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 83 insertions(+), 11 deletions(-) diff --git a/zy-acs-flow/src/map/tool.js b/zy-acs-flow/src/map/tool.js index bac077c..d750603 100644 --- a/zy-acs-flow/src/map/tool.js +++ b/zy-acs-flow/src/map/tool.js @@ -4,7 +4,9 @@ DEVICE_TYPE, DEVICE_Z_INDEX, AGV_STATUS_MODE, + DEVICE_SPRITE_TINT, DEVICE_SELECTED_EFFECT_PADDING, + DEVICE_SELECTED_EFFECT_COLOR, } from './constants'; import shelf from '/map/shelf.svg'; @@ -22,6 +24,7 @@ let app, mapContainer, themeMode; let selectedSprite, effectCircle, effectTicker; +let tooltip; export function getApp() { return app; @@ -102,8 +105,10 @@ default: break; } + DEVICE_SPRITE_TINT[deviceType] != null && (sprite.tint = DEVICE_SPRITE_TINT[deviceType]); + if (sprite && deviceType !== DEVICE_TYPE.AGV) { - // sprite.blendMode = PIXI.BLEND_MODES.MULTIPLY; + sprite.blendMode = PIXI.BLEND_MODES.MULTIPLY; } return sprite; } @@ -222,13 +227,17 @@ sprite.off('pointerup'); sprite.off('pointermove'); sprite.off('pointerdown'); + sprite.off('pointerover'); + sprite.off('pointerout'); sprite.off('click'); - sprite.on("click", onClick); - - function onClick(event) { + sprite.on("click", (event) => { setCurSprite(sprite); - } + }); + + sprite.on('pointerover', onSpriteMouseOver); + sprite.on('pointermove', onSpriteMouseMove); + sprite.on('pointerout', onSpriteMouseOut); } @@ -236,6 +245,8 @@ sprite.off('pointerup'); sprite.off('pointermove'); sprite.off('pointerdown'); + sprite.off('pointerover'); + sprite.off('pointerout'); sprite.off('click'); sprite.on("pointerdown", onDragStart); @@ -273,12 +284,68 @@ sprite.off('pointerup'); sprite.off('pointermove'); sprite.off('pointerdown'); + sprite.off('pointerover'); + sprite.off('pointerout'); sprite.off('click'); - sprite.on("click", onClick); - - function onClick(event) { + sprite.on("click", (event) => { setSpriteSettings(sprite); + }); + + sprite.on('pointerover', onSpriteMouseOver); + sprite.on('pointermove', onSpriteMouseMove); + sprite.on('pointerout', onSpriteMouseOut); + +} + +const createSpriteTooltip = (sprite) => { + const style = new PIXI.TextStyle({ + fontFamily: 'Microsoft YaHei', + fontSize: 16, + fill: '#ffffff', + stroke: '#4a1850', + strokeThickness: 2, + dropShadow: true, + dropShadowColor: '#000000', + dropShadowBlur: 4, + dropShadowAngle: Math.PI / 6, + dropShadowDistance: 6, + }); + + const text = new PIXI.Text(`缂栧彿: ${sprite.data.no}`, style); + + const background = new PIXI.Graphics(); + background.beginFill(0x000000, 0.7); + background.drawRoundedRect(0, 0, text.width + 20, text.height + 20, 10); + background.endFill(); + + text.x = 10; + text.y = 10; + background.addChild(text); + + tooltip = new PIXI.Container(); + tooltip.addChild(background); + return tooltip; +} + +function onSpriteMouseOver(event) { + tooltip = createSpriteTooltip(this);// this => sprite + tooltip.x = event.data.global.x + 10; + tooltip.y = event.data.global.y + 10; + app.stage.addChild(tooltip); +} + +function onSpriteMouseMove(event) { + if (tooltip) { + tooltip.x = event.data.global.x + 10; + tooltip.y = event.data.global.y + 10; + } +} + +function onSpriteMouseOut() { + if (tooltip && tooltip.parent) { + tooltip.parent.removeChild(tooltip); + tooltip = null; } } @@ -340,7 +407,14 @@ const maxDimension = Math.max(width, height); const radius = (maxDimension / 2) + (DEVICE_SELECTED_EFFECT_PADDING[sprite.data?.type] || 10); - const color = themeMode === 'light' ? '#40739e' : '#718093'; + let color; + const spriteEffectColor = DEVICE_SELECTED_EFFECT_COLOR[sprite.data?.type]; + if (spriteEffectColor) { + color = spriteEffectColor; + } else { + color = themeMode === 'light' ? '#747d8c' : '#718093'; + } + const alpha = 1; effectCircle = new PIXI.Graphics(); @@ -384,7 +458,6 @@ } if (effectCircle) { mapContainer.removeChild(effectCircle); - effectCircle.destroy(); effectCircle = null; } selectedSprite = null; @@ -394,7 +467,6 @@ if (!selectedSprite || !effectCircle) { return; } - // 鏇存柊鍦嗙殑浣嶇疆锛岀‘淇濊窡闅弒prite effectCircle.position.set(selectedSprite.x, selectedSprite.y); }; -- Gitblit v1.9.1