From 099d9a5da5b562e63e2e56efbe9f799e2bcdd614 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期五, 22 十一月 2024 09:35:24 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/tool.js | 94 ++++++++++++++++++++++++++-------------------- 1 files changed, 53 insertions(+), 41 deletions(-) diff --git a/zy-acs-flow/src/map/tool.js b/zy-acs-flow/src/map/tool.js index 4af5a42..4d61c35 100644 --- a/zy-acs-flow/src/map/tool.js +++ b/zy-acs-flow/src/map/tool.js @@ -9,6 +9,7 @@ DEVICE_SELECTED_EFFECT_COLOR, POINT_ROUTE_DIRECTION, DEVICE_SPRITE_TINT_DARK, + ANIMATE_DURING_TIME, } from './constants'; import { getRouteList } from './http'; import PointRoute from "./PointRoute"; @@ -71,11 +72,10 @@ export const getRealPosition = (x, y) => { - const rect = app.view.getBoundingClientRect(); - return { - mapX: (x - rect.left) / mapContainer.scale.x - mapContainer.x / mapContainer.scale.x, - mapY: (y - rect.top) / mapContainer.scale.y - mapContainer.y / mapContainer.scale.y - } + const globalPoint = new PIXI.Point(); + app.renderer.plugins.interaction.mapPositionToPoint(globalPoint, x, y); + const mapPoint = mapContainer.toLocal(globalPoint); + return { mapX: mapPoint.x, mapY: mapPoint.y }; } export const generateSprite = (deviceType, texture) => { @@ -111,8 +111,8 @@ if (texture) { sprite = new PIXI.Sprite(PIXI.Texture.from(texture, { resourceOptions: { scale: 1 } })); } - sprite.width = 300; - sprite.height = 500; + sprite.width = 750; + sprite.height = 1300; sprite.zIndex = DEVICE_Z_INDEX.AGV; break case DEVICE_TYPE.POINT: @@ -348,7 +348,7 @@ function onSpriteMouseOver(event) { if (tooltip) { - app.stage.removeChild(tooltip); + app?.stage.removeChild(tooltip); } tooltip = createSpriteTooltip(this);// this => sprite tooltip.x = event.data.global.x + 10; @@ -365,7 +365,7 @@ function onSpriteMouseOut() { if (tooltip && tooltip.parent) { - tooltip.parent.removeChild(tooltip); + tooltip.parent?.removeChild(tooltip); tooltip = null; } } @@ -478,7 +478,7 @@ effectTicker = null; } if (effectCircle) { - mapContainer.removeChild(effectCircle); + mapContainer?.removeChild(effectCircle); effectCircle = null; } selectedSprite = null; @@ -543,6 +543,37 @@ export const rotationParseNum = (num) => { return num * (Math.PI / 180); } + +const animateRotation = (sprite, targetRotation, rotationOffset = 0) => { + if (!mapContainer || !sprite) { + return; + } + // origin + let currentRotation = sprite.rotation + rotationOffset; + // target + targetRotation += rotationOffset; + + // diff + let rotationDifference = targetRotation - currentRotation; + if (rotationDifference === 0) { + return; + } + rotationDifference = ((rotationDifference + Math.PI) % (2 * Math.PI)) - Math.PI; + + // destination + const endRotation = sprite.rotation + rotationDifference; + + new TWEEDLE.Tween(sprite) + .to({ rotation: endRotation }, ANIMATE_DURING_TIME) + .easing(TWEEDLE.Easing.Linear.None) + .onUpdate(() => { + // agv + if (sprite.updateTextRotation) { + sprite.updateTextRotation(); + } + }) + .start(); +}; export const incrementSpriteNo = (str, incrementValue) => { const match = str.match(/(\D*)(\d+)/); @@ -625,7 +656,7 @@ } } -const agvRotationOffsetDegrees = 0; +const agvRotationOffsetDegrees = 90; const agvRotationOffset = rotationParseNum(agvRotationOffsetDegrees); const showAgvSprite = (curZone, agvVo, setCurSprite) => { @@ -633,11 +664,11 @@ if (!code) { return; } const codeSprite = querySprite(DEVICE_TYPE.POINT, code); if (!codeSprite) { return; } - let agvSprite = querySprite(DEVICE_TYPE.AGV, agvNo); - const targetRotation = rotationParseNum(direction); + const targetRotation = rotationParseNum(direction); const backpackCount = backpack?.filter(item => item.loaded === true).length || 0; + let agvSprite = querySprite(DEVICE_TYPE.AGV, agvNo); if (!agvSprite) { const agvStatusMode = getAgvStatusMode(backpackCount, battery); const agvTexture = generateAgvSpriteTexture(agvStatusMode); @@ -652,16 +683,16 @@ agvSprite.position.set(codeSprite.position.x, codeSprite.position.y); agvSprite.rotation = targetRotation + agvRotationOffset; mapContainer.addChild(agvSprite); - beInsight(agvSprite, setCurSprite); // agvNo sprite const agvText = new PIXI.Text(agvNo.toString(), { - fontSize: 60, + fontSize: 50, fill: 0x000000, }); agvText.anchor.set(0.5, 0.5); - agvText.position.set(0, 0); + agvText.position.set(0, 5); agvSprite.addChild(agvText); + agvSprite.updateTextRotation = () => { if (agvText && agvSprite) { agvText.rotation = -agvSprite.rotation; @@ -682,38 +713,19 @@ agvSprite.data.battery = battery; } - animateRotation(agvSprite, targetRotation, agvRotationOffset); + animateRotation(agvSprite, targetRotation + agvRotationOffset, agvRotationOffset); } + + beInsight(agvSprite, setCurSprite); new TWEEDLE.Tween(agvSprite.position) .to({ x: codeSprite.position.x, y: codeSprite.position.y - }, 1000) + }, ANIMATE_DURING_TIME) .easing(TWEEDLE.Easing.Linear.None) .start(); } - -const animateRotation = (sprite, targetRotation, agvRotationOffset) => { - let currentRotation = sprite.rotation + agvRotationOffset; - targetRotation += agvRotationOffset; - - let rotationDifference = targetRotation - currentRotation; - - rotationDifference = ((rotationDifference + Math.PI) % (2 * Math.PI)) - Math.PI; - - const endRotation = sprite.rotation + rotationDifference; - - new TWEEDLE.Tween(sprite) - .to({ rotation: endRotation }, 1000) - .easing(TWEEDLE.Easing.Linear.None) - .onUpdate(() => { - if (sprite.updateTextRotation) { - sprite.updateTextRotation(); - } - }) - .start(); -}; const drawerAgvPath = (curZone, agvVo) => { if (!mapContainer) { @@ -728,9 +740,9 @@ } agvPath = new PIXI.Graphics(); agvPath.name = agvPathName; - agvPath.lineStyle(Math.max(20, 4 * (1 / mapContainer.scale.x)), 0x2f68ac, 0.8); + agvPath.lineStyle(Math.max(20, 4 * (1 / mapContainer?.scale.x || 1)), 0x2f68ac, 0.8); agvPath.zIndex = DEVICE_Z_INDEX.DYNAMIC_ROUTE; - agvPath.blendMode = PIXI.BLEND_MODES.NORMAL; + // agvPath.blendMode = PIXI.BLEND_MODES.NORMAL; let firstNode = true; for (let i = Math.max(0, dynamicRoute.indexOf(curCode)); i < dynamicRoute.length; i++) { -- Gitblit v1.9.1