From 89d37105a3090d82e316e37c1258d30fc0e3fe5c Mon Sep 17 00:00:00 2001 From: "DESKTOP-474NEJQ\\xzsjob" <359059686@qq.com> Date: Fri, 11 Sep 2020 10:45:21 +0800 Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=20Ctrl=E9=94=AE=E6=A1=86?= =?UTF-8?q?=E9=80=89=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../working-area/working-area.component.ts | 95 +++++++++++++------ 1 file changed, 65 insertions(+), 30 deletions(-) diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index bb6ca24..2c28a25 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -83,6 +83,18 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV public copyData: any[] = []; private enterPaintEndButton = PIXI.Sprite.from('assets/images/enterPaintButton.jpg'); + /** + * 框选工具图形 + */ + private rectToolGraphics = new PIXI.Graphics(); + /** + * 初始鼠标位置 + */ + private initialScreenMousePos: PIXI.Point = new PIXI.Point(); + /** + * 最终鼠标位置 + */ + private finalScreenMousePos: PIXI.Point = new PIXI.Point(); // 根据ID 找到图标 // 根据ID 找到数据 @@ -95,6 +107,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.eventManager.addGlobalEventListener('window', 'keyup', (event: any) => { if (event.keyCode === 17) { this.selection.isMultiselection = false; + this.rectToolGraphics.visible = false; + this.rectToolGraphics.clear(); } if (event.keyCode === 46) { this.selection.objects.forEach(item => { @@ -119,9 +133,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV }); // 测试代码 this.eventManager.addGlobalEventListener('window', 'keypress', (event: any) => { - if (event.keyCode === 97) { - console.log(ObjectID.default.generate()); - } + }); } @@ -191,10 +203,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV // this.createEnterPaintEndButton(); // this.backgroundImage.addChild(this.paintingLine); this.on('select', obj => { - // console.log(obj.assetData); - // obj.assetData.Name = '这是我修改了的名字'; - // console.log(this.canvasData.originaleveryStoreyData.data[obj.assetData.Id]); - // console.log(this.canvasData.originalcompanyBuildingData.data[obj.assetData.Id]); if (obj instanceof MultipointIcon) { obj.setPointVisiable(true); } else if (obj instanceof PolygonIcon) { @@ -221,7 +229,18 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.refreshPreviewLineSegment(this.currentClickPoint.position, this.circleShadow.position); - // console.log(this.currentClickPoint.position); + if (this.rectToolGraphics.visible === true) { + + const init = this.initialScreenMousePos; + const final = this.finalScreenMousePos; + + this.rectToolGraphics.clear(); + this.rectToolGraphics.lineStyle(2, 0x00ff00, 1); + this.rectToolGraphics.beginFill(0xccccf2, 0.25); + this.rectToolGraphics.drawRect(init.x, init.y, final.x - init.x, final.y - init.y); + this.rectToolGraphics.endFill(); + this.rectToolGraphics.closePath(); + } }); } /** @@ -398,19 +417,12 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.backgroundImage.sortableChildren = true; this.backgroundImage .on('mousedown', event => { - if (!event.currentTarget.dragging && event.currentTarget.name === this.backgroundImage.name) { + if (!event.currentTarget.dragging && this.selection.isMultiselection === false) { event.currentTarget.data = event.data; - // this.oldGroup = this.parentGroup; - // this.parentGroup = dragGroup; event.currentTarget.dragging = true; - // event.currentTarget.scale.x *= 1.1; - // event.currentTarget.scale.y *= 1.1; event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); event.currentTarget.dragPoint.x -= event.currentTarget.x; event.currentTarget.dragPoint.y -= event.currentTarget.y; - // tslint:disable-next-line: max-line-length - // 点击背景创建图标 - // const pos = this.backgroundImage.toLocal(this.mousePosition); switch (this.paintMode) { case PaintMode.endPaint: console.log(this.backgroundImage.toLocal(this.mousePosition)); @@ -535,31 +547,47 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV // this.paintingIcon = new PolygonIcon(this.paintPoints, this); break; } + } else if (!event.currentTarget.dragging && this.selection.isMultiselection === true) { + this.rectToolGraphics.visible = true; + event.currentTarget.dragging = true; + this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); + this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); } }) .on('mouseup', event => { - if (event.currentTarget.dragging && event.currentTarget.name === this.backgroundImage.name) { + if (event.currentTarget.dragging) { event.currentTarget.dragging = false; - // this.parentGroup = this.oldGroup; - // event.currentTarget.scale.x /= 1.1; - // event.currentTarget.scale.y /= 1.1; event.currentTarget.data = null; } + if (this.rectToolGraphics.visible === true) { + this.backgroundImage.children.forEach(item => { + if (item instanceof SinglePointIcon + || item instanceof MultipointIcon + || item instanceof PolygonIcon) { + if (this.rectToolGraphics.getLocalBounds().contains(item.x, item.y)) { + this.selection.select(item); + } + } + }); + this.rectToolGraphics.clear(); + this.rectToolGraphics.visible = false; + } }) .on('mouseupoutside', event => { - if (event.currentTarget.dragging && event.currentTarget.name === this.backgroundImage.name) { + if (event.currentTarget.dragging) { event.currentTarget.dragging = false; - // this.parentGroup = this.oldGroup; - // event.currentTarget.scale.x /= 1.1; - // event.currentTarget.scale.y /= 1.1; event.currentTarget.data = null; } }) .on('mousemove', event => { - if (event.currentTarget.dragging && event.currentTarget.name === this.backgroundImage.name) { + if (event.currentTarget.dragging && this.selection.isMultiselection === 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 (event.currentTarget.dragging && this.selection.isMultiselection === true) { + if (this.rectToolGraphics.visible === true) { + this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); + } } }).on('rightclick', event => { event.stopPropagation(); @@ -574,6 +602,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.createEnterPaintEndButton(); this.backgroundImage.addChild(this.paintingLine); } + /** * 刷新背景图 */ @@ -635,6 +664,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.previewLineSegment.visible = false; this.backgroundImage.addChild(this.currentClickPoint); this.backgroundImage.addChild(this.previewLineSegment); + + this.backgroundImage.addChild(this.rectToolGraphics); } /** * 刷新预览线段 @@ -1432,17 +1463,21 @@ export class Selection { * @param obj 对象 */ public select(obj: any) { - this.workingArea.emit('select', obj); - this.objects.push(obj); + if (!this.contains(obj)) { + this.workingArea.emit('select', obj); + this.objects.push(obj); + } } /** * 取消选定对象 * @param obj 对象 */ public deselect(obj: any) { - this.workingArea.emit('deselect', obj); - const idx = this.objects.findIndex(x => x === obj); - this.objects.splice(idx, 1); + if (this.contains(obj)) { + this.workingArea.emit('deselect', obj); + const idx = this.objects.findIndex(x => x === obj); + this.objects.splice(idx, 1); + } } /** * 选定或取消选定对象