#

luxiaotao1123

2024-10-09 246764088f85c329e9e126b948e719dc36452b9d

#

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

@@ -1,5 +1,5 @@
import * as PIXI from 'pixi.js';

import * as TWEEDLE from 'tweedle.js';

export default class Player {

@@ -12,17 +12,79 @@
        globalThis.__PIXI_APP__ = this.app;

        this.mapContainer = generatePixiContainer('mapContainer');
        this.app.stage.addChild(this.mapContainer);

        this.activateMapScale();
        this.activateMapPan();
        this.startupTicker();

        const bunny = PIXI.Sprite.from('https://pixijs.com/assets/bunny.png');
        bunny.anchor.set(0.5);
        bunny.x = this.app.screen.width / 2;
        bunny.y = this.app.screen.height / 2;
        this.app.stage.addChild(bunny);
        bunny.x = 500;
        bunny.y = 400;
        this.mapContainer.addChild(bunny);
        this.app.ticker.add((delta) => {
            bunny.rotation += 0.1 * delta;
        });

        // startupTicker();
    }

    activateMapScale = () => {
        this.scale = 1;
        this.app.view.addEventListener('wheel', (event) => {
            event.preventDefault();
            if (this.scale !== this.mapContainer.scale.x) {
                this.scale = this.mapContainer.scale.x;
            }

            const delta = Math.sign(event.deltaY);

            const mousePosition = new PIXI.Point();
            this.app.renderer.plugins.interaction.mapPositionToPoint(mousePosition, event.clientX, event.clientY);

            const diffPositionX = mousePosition.x - this.mapContainer.x;
            const diffPositionY = mousePosition.y - this.mapContainer.y;

            const newScale = this.scale * (delta === 1 ? 0.9 : 1.1);
            const scaleFactor = newScale / this.scale;

            this.mapContainer.x = mousePosition.x - diffPositionX * scaleFactor;
            this.mapContainer.y = mousePosition.y - diffPositionY * scaleFactor;

            this.scale = newScale;

            this.mapContainer.scale.set(this.scale);

            this.mapContainer.children.forEach(child => {
                // child.scale.set(1 / this.scale); // 防止图标变小
            });
        });
    }

    activateMapPan = () => {
        const mapPanHandle = (event) => {
            if (event.button === 2) {
                this.pan = true;
                let previousPosition = { x: event.clientX, y: event.clientY };

                const mouseMoveHandler = (event) => {
                    if (this.pan) {
                        const dx = event.clientX - previousPosition.x;
                        const dy = event.clientY - previousPosition.y;
                        this.mapContainer.position.x += dx;
                        this.mapContainer.position.y += dy;

                        previousPosition = { x: event.clientX, y: event.clientY };
                    }
                };
                this.app.view.addEventListener('mousemove', mouseMoveHandler);
                this.app.view.addEventListener('mouseup', () => {
                    this.app.view.removeEventListener('mousemove', mouseMoveHandler);
                    this.pan = false;
                });
            }
        }
        this.app.view.addEventListener('mousedown', mapPanHandle);
    }

    showGridLines = () => {
@@ -65,13 +127,13 @@
    }


    // startupTicker = () => {
    //     this.app.ticker.add((delta) => {
    //         TWEEDLE.Group.shared.update();
    //     });
    // }
    startupTicker = () => {
        this.app.ticker.add((delta) => {
            TWEEDLE.Group.shared.update();
        });
    }

    resize(width, height) {
    resize = (width, height) => {
        this.app.renderer.resize(width, height);
        this.mapContainer.children.forEach((child) => {
            child.x = width / 2;
@@ -79,7 +141,7 @@
        });
    }

    destroy() {
    destroy = () => {
        this.app.destroy(true, { children: true });
    }