From 2d78f1c6801e757e5bc747854426be89c8fcf84d Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期三, 09 十月 2024 14:06:25 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/player.js | 139 ++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 139 insertions(+), 0 deletions(-) diff --git a/zy-acs-flow/src/map/player.js b/zy-acs-flow/src/map/player.js index 5a1112d..2dfc06d 100644 --- a/zy-acs-flow/src/map/player.js +++ b/zy-acs-flow/src/map/player.js @@ -1,5 +1,6 @@ import * as PIXI from 'pixi.js'; import * as TWEEDLE from 'tweedle.js'; +import * as Tool from './tool'; export default class Player { @@ -27,6 +28,99 @@ bunny.rotation += 0.1 * delta; }); + } + + activateMapMultiSelect = (fn) => { + const mapMultiSelectHandle = (event) => { + console.log(123); + + if (event.button !== 0) { + return; + } + + let isSelecting = false; + if (!this.selectionBox) { + this.selectionBox = new PIXI.Graphics(); + this.app.stage.addChild(this.selectionBox); + } + + // select start pos + const startPoint = new PIXI.Point(); + this.app.renderer.events.mapPositionToPoint(startPoint, event.clientX, event.clientY); + let selectionStart = { x: startPoint.x, y: startPoint.y }; + + // avoid trigger sprite event + let hasHitSprite = false; + for (let child of this.mapContainer.children) { + if (child.data?.uuid) { + if (child.getBounds().contains(selectionStart.x, selectionStart.y)) { + hasHitSprite = true; break; + } + } + } + + if (!hasHitSprite) { + isSelecting = true; + } + + const handleMouseMove = (event) => { + if (isSelecting) { + // select end pos + const endPoint = new PIXI.Point(); + this.app.renderer.events.mapPositionToPoint(endPoint, event.clientX, event.clientY); + const selectionEnd = { x: endPoint.x, y: endPoint.y } + + const width = Math.abs(selectionEnd.x - selectionStart.x); + const height = Math.abs(selectionEnd.y - selectionStart.y); + + this.selectionBox.clear(); + this.selectionBox.lineStyle(2, 0xCCCCCC, 1); + this.selectionBox.beginFill(0xCCCCCC, 0.2); + this.selectionBox.drawRect(Math.min(selectionStart.x, selectionEnd.x), Math.min(selectionStart.y, selectionEnd.y), width, height); + this.selectionBox.endFill(); + } + } + + this.mapContainer.parent.on('mousemove', handleMouseMove); + + this.mapContainer.parent.on('mouseup', (event) => { + if (isSelecting) { + this.clearSelectedSprites(); + + // sprite show style which be selected + this.mapContainer.children.forEach(child => { + if (Tool.isSpriteInSelectionBox(child, this.selectionBox)) { + this.selectedSprites.push(child); + Tool.markSprite(child); + } + }) + isSelecting = false; + this.selectionBox.clear(); + + // complete + if (fn) { + fn(this.selectedSprites, () => { + // trigger at end of selectionBox when fn happen mouseup + this.selectedSprites = []; + }); + } + + } + + this.mapContainer.parent.off('mousemove', handleMouseMove); + }); + } + + this.mapContainer.parent.on('mousedown', mapMultiSelectHandle) + } + + clearSelectedSprites = () => { + if (this.selectedSprites && this.selectedSprites.length > 0) { + this.selectedSprites.forEach(child => { + Tool.unMarkSprite(child); + }) + } + this.selectedSprites = []; } activateMapScale = () => { @@ -87,6 +181,51 @@ this.app.view.addEventListener('mousedown', mapPanHandle); } + adaptScreen = () => { + if (!this.mapContainer || !this.app) { + return; + } + + this.mapContainer.scale.set(1); + this.mapContainer.position.set(0, 0); + if (this.mapContainer.children.length === 0) { + return; + } + + let minX, maxX, minY, maxY; + for (let sprite of this.mapContainer.children) { + if (sprite?.data?.uuid) { + let bounds = sprite.getBounds(); + minX = minX !== undefined ? Math.min(minX, bounds.x) : bounds.x; + minY = minY !== undefined ? Math.min(minY, bounds.y) : bounds.y; + maxX = maxX !== undefined ? Math.max(maxX, bounds.x + bounds.width) : bounds.x + bounds.width; + maxY = maxY !== undefined ? Math.max(maxY, bounds.y + bounds.height) : bounds.y + bounds.height; + } + } + + this.scale = Math.min( + this.app.renderer.width / (maxX - minX) * 0.8, + this.app.renderer.height / (maxY - minY) * 0.8 + ); + + let centerPoint = { + x: (minX + maxX) / 2 * this.mapContainer.scale.x, + y: (minY + maxY) / 2 * this.mapContainer.scale.y + }; + + new TWEEDLE.Tween(this.mapContainer.scale).easing(TWEEDLE.Easing.Quadratic.Out) + .to({ + x: this.scale, + y: this.scale + }, 200).start(); + + new TWEEDLE.Tween(this.mapContainer.position).easing(TWEEDLE.Easing.Quadratic.Out) + .to({ + x: this.app.renderer.width / 2 - centerPoint.x * this.scale, + y: this.app.renderer.height / 2 - centerPoint.y * this.scale + }, 200).start(); + } + showGridLines = () => { this.hideGridLines(); if (!this.gridLineContainer) { -- Gitblit v1.9.1