From 8b6ea63cc68244e44d5149248148fb0c0adf9274 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E6=8C=AF=E5=8D=87?= <359059686@qq.com> Date: Thu, 4 Feb 2021 17:20:59 +0800 Subject: [PATCH] =?UTF-8?q?=E7=89=88=E6=9C=AC=E6=9B=B4=E6=96=B01.0.17?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/canvas-share-data.service.ts | 1 + src/app/working-area/model/axSelection.ts | 1 - .../working-area/working-area.component.ts | 183 ++++++------------ 3 files changed, 63 insertions(+), 122 deletions(-) diff --git a/src/app/canvas-share-data.service.ts b/src/app/canvas-share-data.service.ts index b489243..2c62212 100644 --- a/src/app/canvas-share-data.service.ts +++ b/src/app/canvas-share-data.service.ts @@ -70,6 +70,7 @@ export class CanvasShareDataService { [ '泡沫枪', '泡沫枪'], [ '泡沫发生器', '泡沫发生器' ], [ '消防管网', '消防管网'], + [ '泡沫管网', '消防管网'], [ 'DCS控制室', 'DCS控制室'] ]); diff --git a/src/app/working-area/model/axSelection.ts b/src/app/working-area/model/axSelection.ts index f075523..4089480 100644 --- a/src/app/working-area/model/axSelection.ts +++ b/src/app/working-area/model/axSelection.ts @@ -1,4 +1,3 @@ -import { allowedNodeEnvironmentFlags } from "process"; /** * 选择器 diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index 6ef9347..0f47f43 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, Input } from '@angular/core'; +import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, Input, OnDestroy } from '@angular/core'; import * as PIXI from 'pixi.js'; import { EventEmitter } from 'events'; import { EventManager } from '@angular/platform-browser'; @@ -32,10 +32,11 @@ import { EVENT_SELECTION_CHANGED } from './model/events'; /** * 工作区 */ -export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterViewInit { +export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterViewInit,OnDestroy { constructor(private eventManager: EventManager, public canvasData: CanvasShareDataService) { super(); + console.log('组件构造函数'); } @ViewChild('content') @@ -87,7 +88,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV /** * 选择器 */ - public readonly selection: AxSelection = new AxSelection(); + public selection: AxSelection = new AxSelection(); /** * 当前鼠标的点 */ @@ -157,26 +158,18 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。 * Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。 */ - public VERSION = '1.0.16.20210203_beta'; + public VERSION = '1.0.17.20210204_beta'; /** * 数据初始化 */ ngOnInit(): void { + console.log('组件OnInit'); PIXI.utils.skipHello(); this.sayHello(); this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => { - // event.stopPropagation(); - // if (event.keyCode === 17) { - // this.isCtrlKeyClicked = true; - // } + }); this.eventManager.addGlobalEventListener('window', 'keyup', (event: any) => { - // event.stopPropagation(); - // if (event.keyCode === 17) { - // this.isCtrlKeyClicked = false; - // this.rectToolGraphics.visible = false; - // this.rectToolGraphics.clear(); - // } // 按Del键删除选中的图标 if (event.keyCode === 46) { this.deleteSelectedShape(); @@ -184,6 +177,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV }); } ngOnDestroy(): void { + console.log('组件OnDestroy'); + this.selection.clear(); this.camera2D.destroy(); this.app.destroy(); } @@ -352,7 +347,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV worldHeight: 20000, interaction: this.app.renderer.plugins.interaction, }); - + this.camera2D.pivot.set(0.5); + this.camera2D.position = new PIXI.Point(0, 0); this.app.stage.addChild(this.camera2D); this.camera2D @@ -459,7 +455,43 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.grid2D.updateGrid(); this.resizeItem(1 / this.camera2D.scale.x); } + /** + * 重置相机 + */ + private resetCamera2D() { + this.camera2D.scale.set(1); + this.camera2D.x = (this.app.view.width - this.backgroundImage.width) / 2; + this.camera2D.y = (this.app.view.height - this.backgroundImage.height) / 2; + this.updateCamera2D(); + } + /** + * 缩放适应 + */ + public zoomFit() { + const imageWidth = this.backgroundImage.texture.width; + const imageHeight = this.backgroundImage.texture.height; + const appWidth = this.app.view.width - 470; + const appHeight = this.app.view.height; + const wScale = appWidth / imageWidth; + const hScale = appHeight / imageHeight; + let scale = wScale < hScale ? wScale : hScale; + if (scale < 0.12) { + scale = 0.12; + } + if (scale > 16) { + scale = 16; + } + this.camera2D.scale.set(scale); + if (wScale < hScale) { + this.camera2D.x = 470 / 2; + this.camera2D.y = (appHeight - (imageHeight * this.camera2D.scale.y)) / 2; + } else { + this.camera2D.x = 470 / 2 + (appWidth - (imageWidth * this.camera2D.scale.x)) / 2; + this.camera2D.y = 0; + } + this.updateCamera2D(); + } /** * 创建2D网格 */ @@ -506,11 +538,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 创建图标事件（数据处理） */ this.on('createIcon', (axShape: AxShape) => { - console.log('新增图标：' + axShape.assetData.Name); if (axShape.assetData.GameMode === GameMode.BasicInformation) { // 基本信息 // 添加楼层数据 this.canvasData.originaleveryStoreyData.data[axShape.assetData.Id] = axShape.assetData; - console.log(this.canvasData.originaleveryStoreyData); // 添加建筑数据 this.canvasData.originalcompanyBuildingData.data[axShape.assetData.Id] = axShape.assetData; } else if (axShape.assetData.GameMode === GameMode.Assignment) { // 处置预案 @@ -541,27 +571,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.canvasData.isChange = true; this.updateCamera2D(); }); - // /// - // this.app.renderer.plugins.interaction.on('pointerdown', (event) => { - // if (event.data.button !== 2) { return }; - // this.dragFlag = true; - // this.startPoint = { x: event.data.global.x, y: event.data.global.y }; - // }); - // this.app.renderer.plugins.interaction.on('pointermove', (event) => { - // if (this.dragFlag) { - // const dx = event.data.global.x - this.startPoint.x; - // const dy = event.data.global.y - this.startPoint.y; - // this.app.stage.position.x += dx; - // this.app.stage.position.y += dy; - // this.startPoint = { x: event.data.global.x, y: event.data.global.y }; - // } - // }); - // this.app.renderer.plugins.interaction.on('pointerup', (event) => { - // this.dragFlag = false; - // }); } - // dragFlag; - // startPoint; /** * 重置画布 */ @@ -592,7 +602,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV */ public refreshIcon(id: string): void { const icon = this.backgroundImage.children.find(item => item.name === id); - // console.log(icon); if (icon instanceof AxImageShape) { icon.refresh(); } else if (icon instanceof MultipointIcon) { @@ -710,28 +719,12 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV public createBackgroundImage() { this.backgroundImage = PIXI.Sprite.from('assets/images/noImg.png'); this.backgroundImage.anchor.set(0.5); - // this.backgroundImage.x = this.app.view.width / 2; - // this.backgroundImage.y = this.app.view.height / 2; this.backgroundImage.interactive = true; this.backgroundImage.name = 'background'; - // this.backgroundImage.angle = this.canvasData.selectStorey.imageAngle; - // const imageWidth = 665; - // const imageHeight = 530; - // const appWidth = this.app.view.width - 470; - // const appHeight = this.app.view.height; - - // const wScale = appWidth / imageWidth; - // const hScale = appHeight / imageHeight; - - // const scale = wScale < hScale - // ? wScale - // : hScale; - // this.backgroundImage.scale.set(scale); this.backgroundImage.sortableChildren = true; this.backgroundImage .on('pointerdown', event => { if (event.data.button !== 0) { return; } - // console.log(this.backgroundImage.toLocal(this.mousePosition)); if (this.isCtrlKeyClicked === false) { switch (this.paintMode) { case PaintMode.endPaint: @@ -931,47 +924,14 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV // } }) .on('pointerup', event => { - // event.currentTarget.data = null; - // if (this.rectToolGraphics.visible === true) { - // const shapes: AxShape[] = []; - // this.backgroundImage.children.forEach(item => { - // if ( item instanceof AxShape - // && item instanceof AxPreviewImageShape === false) { - // // 判断2个矩形是否相交 - // const rect1 = this.rectToolGraphics.getBounds(); - // const rect2 = item.getBounds(); - // if (this.isOverlap(rect1, rect2)) { - // shapes.push(item); - // } - // } - // }); - // this.rectToolGraphics.clear(); - // this.rectToolGraphics.visible = false; - // this.selectAll(shapes); - // } }) .on('pointerupoutside', event => { - // if (this.isMove) { - // event.currentTarget.data = null; - // } + }) .on('pointermove', event => { - // if (this.isCtrlKeyClicked === false) { - // // const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); - // // event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x; - // // event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y; - // } else if (this.isCtrlKeyClicked === true) { - // if (this.rectToolGraphics.visible === true) { - // this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); - // } - // } + }) - // .on('rightclick', event => { - // event.stopPropagation(); - // this.deselectAll(); - // this.setPaintMode(PaintMode.endPaint); - // }) .on('pointerover', (event) => { if (this.previewImage !== null && this.paintMode === PaintMode.singlePointIcon) { @@ -992,6 +952,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.backgroundImage.addChild(this.paintingLine); } + /** + * 判断矩形一是否包含矩形二 + * @param rect1 矩形一 + * @param rect2 矩形二 + */ public isOverlap(rect1, rect2): boolean { const l1 = { x: rect1.x, y: rect1.y }; const r1 = { x: rect1.x + rect1.width, y: rect1.y + rect1.height }; @@ -1014,43 +979,21 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV imageAngle = 0; } this.backgroundImage.scale.set(1); - this.backgroundImage.pivot.set(0); - // this.backgroundImage.x = this.app.view.width / 2; - // this.backgroundImage.y = this.app.view.height / 2; if (imageUrl === undefined || imageUrl === null || imageUrl === '') { this.backgroundImage.texture = this.backgroundTexture; } else { this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl); } - this.backgroundImage.x = this.backgroundImage.width/2; - this.backgroundImage.y = this.backgroundImage.height/2; + this.backgroundImage.x = this.backgroundImage.width / 2; + this.backgroundImage.y = this.backgroundImage.height / 2; this.backgroundImage.angle = imageAngle; - // 等待图片加载完成 - const imageWidth = this.backgroundImage.texture.width; - const imageHeight = this.backgroundImage.texture.height; - const appWidth = this.app.view.width - 470; - const appHeight = this.app.view.height; - const wScale = appWidth / imageWidth; - const hScale = appHeight / imageHeight; - let scale = wScale < hScale ? wScale : hScale; - if (scale < 0.12) { - scale = 0.12; - } - if (scale > 16) { - scale = 16; - } - this.camera2D.scale.set(scale); - this.camera2D.x = 235; - this.camera2D.y = 0; - // 设置图片缩放 - // this.backgroundImage.scale.set(scale); - // this.backgroundImage.visible = true; - this.backgroundImage.children.forEach((item) => { - if (item instanceof AxShape) { - item.refresh(); - } - }); + this.resetCamera2D(); + // this.backgroundImage.children.forEach((item) => { + // if (item instanceof AxShape) { + // item.refresh(); + // } + // }); } /** * 刷新 @@ -1250,7 +1193,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 开始绘制 */ public beginPaint() { - console.log(this.canvasData.selectTemplateData); this.deselectAll(); this.setPaintMode(PaintMode.endPaint); this.setPaintMode(this.canvasData.selectTemplateData.interactiveMode); @@ -1342,7 +1284,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV private enterPaint(): void { this.previewLineSegment.visible = false; this.enterPaintEndButton.visible = false; - console.log(this.paintMode); switch (this.paintMode) { case PaintMode.singlePointIcon: break;