From e1f902a0647c92ee89eb636bec03ff5e07932b2a 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:18:32 +0800 Subject: [PATCH] =?UTF-8?q?=E9=80=82=E5=BA=94=E7=BC=A9=E6=94=BE=20?= =?UTF-8?q?=E9=87=8D=E7=BD=AE=E7=BC=A9=E6=94=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../working-area/working-area.component.ts | 157 +++++++----------- 1 file changed, 56 insertions(+), 101 deletions(-) diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index 91ed430..0f47f43 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -36,6 +36,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV constructor(private eventManager: EventManager, public canvasData: CanvasShareDataService) { super(); + console.log('组件构造函数'); } @ViewChild('content') @@ -162,6 +163,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 数据初始化 */ ngOnInit(): void { + console.log('组件OnInit'); PIXI.utils.skipHello(); this.sayHello(); this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => { @@ -175,6 +177,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV }); } ngOnDestroy(): void { + console.log('组件OnDestroy'); this.selection.clear(); this.camera2D.destroy(); this.app.destroy(); @@ -344,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 @@ -451,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网格 */ @@ -531,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; /** * 重置画布 */ @@ -699,23 +719,8 @@ 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 => { @@ -919,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) { @@ -980,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 }; @@ -1002,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(); + // } + // }); } /** * 刷新