#

luxiaotao1123

2024-03-04 429a56010fb52292c5f690f5fc48ce0a2dc542df

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
import * as PIXI from 'pixi.js';
import * as TWEEDLE from 'tweedle.js';
 
export default class Player {
 
    constructor(dom, dark) {
        this.darkModel = dark;
        // init
        this.app = generatePixiApp(dark);
        dom.appendChild(this.app.view);
 
        globalThis.__PIXI_APP__ = this.app;
 
        this.mapContainer = generatePixiContainer('mapContainer');
        this.app.stage.addChild(this.mapContainer);
        this.app.view.addEventListener('contextmenu', (event) => {
            event.preventDefault();
        });
 
        this.scale = 1; // 缩放
        this.pan = false; // 平移
 
        // func
        this.app.view.addEventListener('mousedown', (event) => {
            // 右键
            if (event.button === 2) {
                this.mapPan(event);
            }
        })
        this.activateMapScale();
        this.showCoordinates();
        this.appTicker();
    }
 
    activateMapScale = () => {
        this.app.view.addEventListener('wheel', (event) => {
            event.preventDefault();
            const delta = Math.sign(event.deltaY);
 
            if (delta === 1) {
                this.scale *= 0.9;
            } else if (delta === -1) {
                this.scale *= 1.1;
            }
            this.mapContainer.scale.set(this.scale);
            this.mapContainer.children.forEach(child => {
                // child.scale.set(1 / this.scale); // 防止图标变小
            })
        });
    }
 
    mapPan = (event) => {
        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;
        });
    }
 
    showCoordinates = () => {
        const coordinatesText = new PIXI.Text('{ x: 0, y: 0 }', {
            fill: 0x000000,
            fontSize: 13,
            fontFamily: 'MicrosoftYaHei',
            fontWeight: 'bold',
        });
        coordinatesText.name = 'xyStr'
        coordinatesText.position.set(10, 10);
        this.app.stage.addChild(coordinatesText);
 
        const mouseMoveInfoTextHandler = (event) => {
            const mouseX = (event.clientX - this.mapContainer.position.x) / this.scale;
            const mouseY = (event.clientY - this.mapContainer.position.y) / this.scale;
            coordinatesText.text = `{ x: ${mouseX.toFixed(2)}, y: ${mouseY.toFixed(2)} }`;
        };
        this.app.view.addEventListener('mousemove', mouseMoveInfoTextHandler);
    }
 
    showGridlines = () => {
        if (!this.gridLineContainer) {
            this.gridLineContainer = generatePixiContainer('gridLineContainer');
            this.app.stage.addChild(this.gridLineContainer);
        }
 
        const inte = 30;
        const lineDefaultAlpha = .5;;
        const lineDefaultColor = 0x000000;
        for (let i = 0; i < this.app.view.width / inte; i++) {
            const graphics = new PIXI.Graphics();
            graphics.lineStyle(.3, lineDefaultColor, lineDefaultAlpha);
            graphics.beginFill(lineDefaultColor);
            graphics.moveTo(i * inte, 0);
            graphics.lineTo(i * inte, this.app.view.height);
            graphics.endFill();
            this.gridLineContainer.addChild(graphics);
        }
 
        for (let i = 0; i < this.app.view.height / inte; i++) {
            const graphics = new PIXI.Graphics();
            graphics.lineStyle(.3, lineDefaultColor, lineDefaultAlpha);
            graphics.beginFill(lineDefaultColor);
            graphics.moveTo(0, i * inte);
            graphics.lineTo(this.app.view.width, i * inte);
            graphics.endFill();
 
            this.gridLineContainer.addChild(graphics);
        }
    }
 
    hideGridlines = () => {
        if (this.gridLineContainer) {
            this.app.stage.removeChild(this.gridLineContainer);
            this.gridLineContainer = null;
        }
    }
 
    appTicker = () => {
        TWEEDLE.Group.shared.update();
    }
 
}
 
function generatePixiApp(dark) {
    const app = new PIXI.Application({
        background: dark ? '#f1f2f6' : '#f1f2f6',
        antialias: true,
    })
    app.stage.eventMode = 'auto';
    app.stage.hitArea = app.screen;
    return app;
}
 
function generatePixiContainer(name) {
    const mapContainer = new PIXI.Container();
    mapContainer.name = name;
    mapContainer.data = {};
    return mapContainer;
}