#

vincentlu

2026-01-10 1bc33546a044cbc84dd9595c19dbcd9a4e309fc9

 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 { DEVICE_TYPE, MAP_MIRROR } from './constants';

export default class Player {

@@ -90,6 +90,9 @@

                    // sprite show style which be selected
                    this.mapContainer.children.forEach(child => {
                        if (child?.data?.type === DEVICE_TYPE.AREA) {
                            return;
                        }
                        if (Tool.isSpriteInSelectionBox(child, this.selectionBox)) {
                            this.selectedSprites.push(child);
                            Tool.markSprite(child);
@@ -115,6 +118,19 @@

        this.mapContainer.parent.off('mousedown');
        this.mapContainer.parent.on('mousedown', mapMultiSelectHandle)
    }

    deactivateMapMultiSelect = () => {
        if (!this.mapContainer?.parent) {
            return;
        }
        this.mapContainer.parent.off('mousedown');
        this.clearSelectedSprites();
        if (this.selectionBox) {
            this.selectionBox.clear();
            this.app?.stage.removeChild(this.selectionBox);
            this.selectionBox = null;
        }
    }

    clearSelectedSprites = () => {
@@ -150,7 +166,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)); // 防止图标变小
@@ -215,8 +231,8 @@
        }

        this.scale = Math.min(
            this.app.renderer.width / (maxX - minX) * 0.8,
            this.app.renderer.height / (maxY - minY) * 0.8
            this.app.renderer.width / (maxX - minX) * 0.85,
            this.app.renderer.height / (maxY - minY) * 0.85,
        );

        let centerPoint = {
@@ -226,7 +242,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 +273,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 }', {
@@ -496,4 +487,4 @@
    mapContainer.name = name;
    mapContainer.data = {};
    return mapContainer;
}
}