#

vincentlu

2025-03-18 4c9169967a879b54c04b0754ab9830a5a6baa708

#

 zy-acs-flow/src/map/MapPage.jsx

@@ -424,17 +424,6 @@
                        color="primary"
                        size="small"
                        onClick={() => {
                            player.flipMapHorizontally();
                        }}
                    >
                        <Flip />
                        &nbsp;{translate('page.map.action.flip')}&nbsp;
                    </Fab>
                    <Fab
                        variant="extended"
                        color="primary"
                        size="small"
                        onClick={() => {
                            player.rotateMap(Math.PI / 2);
                        }}
                    >

 zy-acs-flow/src/map/constants.js

@@ -3,6 +3,8 @@

export const AGV_ANGLE_OFFSET_VAL = 0;

export const MAP_MIRROR = true;

export const ANIMATE_DURING_TIME = 300;

export const MAP_MODE = Object.freeze({

 zy-acs-flow/src/map/player.js

@@ -2,7 +2,7 @@
import * as TWEEDLE from 'tweedle.js';
import * as Tool from './tool';
import star from '/img/map/star.png';
import { DEVICE_TYPE } from './constants';
import { MAP_MIRROR } from './constants';

export default class Player {

@@ -150,7 +150,7 @@

            this.scale = newScale;

            this.mapContainer.scale.set(this.scale);
            this.mapContainer.scale.set(this.scale, Math.abs(this.scale));

            this.mapContainer.children.forEach(child => {
                // child.scale.set(1 / (this.scale * 1)); // 防止图标变小
@@ -226,7 +226,7 @@

        new TWEEDLE.Tween(this.mapContainer.scale).easing(TWEEDLE.Easing.Quadratic.Out)
            .to({
                x: this.scale,
                x: MAP_MIRROR ? -this.scale : this.scale,
                y: this.scale
            }, 200).start();

@@ -257,31 +257,6 @@
            })
            .start();
    }

    flipMapHorizontally = () => {
        // 1. 确定 mapContainer 的中心点
        const bounds = this.mapContainer.getLocalBounds();
        const centerX = bounds.x + bounds.width / 2;
        const centerY = bounds.y + bounds.height / 2;

        // 2. 将 mapContainer 以中心点进行旋转/翻转
        this.mapContainer.pivot.set(centerX, centerY);
        this.mapContainer.position.set(this.app.renderer.width / 2, this.app.renderer.height / 2);

        // 当前的水平缩放值
        const currentScaleX = this.mapContainer.scale.x;
        const targetScaleX = -currentScaleX; // 翻转时，让 x 轴缩放取相反值

        // 3. 用 TWEEDLE 做动画翻转，如果只想立即翻转，也可以直接赋值
        new TWEEDLE.Tween(this.mapContainer.scale)
            .to({ x: targetScaleX }, 300) // 300 毫秒动画
            .easing(TWEEDLE.Easing.Quadratic.Out)
            .onComplete(() => {
                // 将最终 x 轴缩放存储到 localStorage
                localStorage.setItem('mapScaleX', this.mapContainer.scale.x);
            })
            .start();
    };

    showCoordinates = () => {
        this.coordinatesText = new PIXI.Text('{ X: 0, Y: 0 }', {