From a9eff59b9b4a55cc744cd756e46291b55cb15d68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E6=8C=AF=E5=8D=87?= <359059686@qq.com> Date: Mon, 4 Jan 2021 11:59:21 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=80=83=E8=AF=95=E7=B3=BB?= =?UTF-8?q?=E7=BB=9F=E5=8A=A0=E8=BD=BD=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- debug.log | 1 + src/app/working-area/model/axShape.ts | 124 +++++++++++++++- .../working-area/working-area.component.ts | 137 ++++++++++-------- 3 files changed, 194 insertions(+), 68 deletions(-) diff --git a/debug.log b/debug.log index 01d4421..8c28f43 100644 --- a/debug.log +++ b/debug.log @@ -1,3 +1,4 @@ [1225/112746.821:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3) [1225/152100.333:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3) [1226/082525.401:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3) +[0104/111348.201:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3) diff --git a/src/app/working-area/model/axShape.ts b/src/app/working-area/model/axShape.ts index 14f1359..3f8a59c 100644 --- a/src/app/working-area/model/axShape.ts +++ b/src/app/working-area/model/axShape.ts @@ -13,17 +13,24 @@ export class AxShape extends Container { moveable = true; // 鍙互琚変腑鐨 selectable = true; + // 鍏佽缂栬緫 + allowEdit = true; // 鏄惁鏄剧ず鍚嶇О showName = true; - + // 杈规 + border: PIXI.Graphics = new PIXI.Graphics(); constructor(assetData: any, workingArea: WorkingAreaComponent) { super(); + this.border.visible = false; + this.addChild(this.border); this.assetData = assetData; this.workingArea = workingArea; this.workingArea.backgroundImage.addChild(this); + this.zIndex = 200; this.interactive = true; this.buttonMode = true; - this.on('mousedown', event => { + this + .on('pointerdown', event => { console.log(this.assetData); event.stopPropagation(); if (this.selectable) { @@ -37,25 +44,38 @@ export class AxShape extends Container { event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); event.currentTarget.dragPoint.x -= event.currentTarget.x; event.currentTarget.dragPoint.y -= event.currentTarget.y; + console.log(event.currentTarget.dragPoint); + console.log(this.position); } }) - .on('mouseup', event => { + .on('pointerup', event => { if (event.currentTarget.dragging) { event.currentTarget.alpha = 1; event.currentTarget.dragging = false; event.currentTarget.data = null; } }) - .on('mouseupoutside', event => { + .on('pointerupoutside', event => { if (event.currentTarget.dragging) { event.currentTarget.alpha = 1; event.currentTarget.dragging = false; event.currentTarget.data = null; } }) - .on('mousemove', event => { + .on('pointermove', event => { if (event.currentTarget.dragging) { const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); + + // const offsetX = newPosition.x - event.currentTarget.dragPoint.x; + // const offsetY = newPosition.y - event.currentTarget.dragPoint.y; + // const offset = this.workingArea.backgroundImage.toLocal(new Point(offsetX, offsetY)); + // event.currentTarget.position += offset; + // // this.workingArea.selection.objects.forEach(shpae => { + // // shpae.x = newPosition.x - event.currentTarget.dragPoint.x; + // // shpae.y = newPosition.y - event.currentTarget.dragPoint.y; + // // shpae.assetData.Point = new PIXI.Point(this.x, this.y); + // // this.workingArea.canvasData.isChange = true; + // // }) event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x; event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y; this.assetData.Point = new PIXI.Point(this.x, this.y); @@ -63,12 +83,12 @@ export class AxShape extends Container { } }) .on('rightclick', event => { - + this.border.visible = false; }) - .on('mouseover', event => { + .on('pointerover', event => { event.stopPropagation(); }) - .on('mouseout', event => { + .on('pointerout', event => { event.stopPropagation(); }); } @@ -79,4 +99,92 @@ export class AxShape extends Container { refresh(): void{ } + /** + * 鏄剧ず杈规 + */ + public showBorder() { + if (this.assetData.FixedSize) { + this.drawBorder(1); + } + else { + this.drawBorder(1/this.workingArea.backgroundImage.scale.x); + } + this.border.visible = true; + } + /** + * 闅愯棌杈规 + */ + public hideBorder() { + this.border.clear(); + this.border.visible = false; + } + /** + * 璁剧疆鐐规樉绀虹姸鎬 + * @param b true/false + */ + public setPointsVisible(b:boolean) { + + } + /** + * + * @param rect 鐢昏竟妗 + */ + public drawBorder(scale: number) { + if (this.visible === false) { return;} + this.border.clear(); + const rect = this.getLocalBounds(); + const p1 = new PIXI.Point(rect.left, rect.top); + const p2 = new PIXI.Point(rect.right, rect.top); + const p3 = new PIXI.Point(rect.right, rect.bottom); + const p4 = new PIXI.Point(rect.left, rect.bottom); + + this.border.lineStyle(scale * 1, 0x00a8ff); + + var spaceLength = scale * 1; + var lineLenght = rect.width + 0.5 + 0.5; + var dashLength = scale*( lineLenght +spaceLength - Math.floor((rect.width + rect.height)/2 / 4.1))/Math.floor((rect.width + rect.height)/2 / 4.1); + this.drawDash(this.border, p1.x -0.5*scale, p1.y, p2.x + 0.5*scale, p2.y,dashLength,spaceLength); + this.drawDash(this.border, p2.x, p2.y -0.5*scale, p3.x, p3.y + 0.5*scale, dashLength, spaceLength); + this.drawDash(this.border, p3.x+0.5*scale, p3.y, p4.x - 0.5*scale, p4.y, dashLength, spaceLength); + this.drawDash(this.border, p4.x, p4.y + 0.5*scale, p1.x, p1.y - 0.5*scale, dashLength, spaceLength); + + this.border.lineStyle(0, 0x0000ff); + this.border.beginFill(0x00ff00,0.1); + this.border.moveTo(p1.x, p1.y); + this.border.lineTo(p2.x, p2.y); + this.border.lineTo(p3.x, p4.y); + this.border.lineTo(p4.x, p4.y); + this.border.closePath(); + this.border.endFill(); + } + // 鐢昏櫄绾 + drawDash(target, x1, y1, x2, y2,dashLength = 5, spaceLength = 1) { + let x = x2 - x1; + let y = y2 - y1; + let hyp = Math.sqrt((x) * (x) + (y) * (y)); + let units = hyp / (dashLength + spaceLength); + let dashSpaceRatio = dashLength / (dashLength + spaceLength); + let dashX = (x / units) * dashSpaceRatio; + let spaceX = (x / units) - dashX; + let dashY = (y / units) * dashSpaceRatio; + let spaceY = (y / units) - dashY; + + target.moveTo(x1, y1); + + while (hyp > 0) { + x1 += dashX; + y1 += dashY; + hyp -= dashLength; + if (hyp < 0) { + x1 = x2; + y1 = y2; + } + target.lineTo(x1, y1); + x1 += spaceX; + y1 += spaceY; + target.moveTo(x1, y1); + hyp -= spaceLength; + } + target.moveTo(x2, y2); + } } diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index 3a25511..4259f0c 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, Input } from ' import * as PIXI from 'pixi.js'; import { EventEmitter } from 'events'; import { EventManager } from '@angular/platform-browser'; -import { OutlineFilter } from 'pixi-filters'; +// import { OutlineFilter } from 'pixi-filters'; import { AssetData, CanvasShareDataService, DisposalNodeData, FloorNodeData } from '../canvas-share-data.service'; import * as ObjectID from 'bson-objectid'; import { Charm } from './charm'; @@ -96,7 +96,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV /** * 缁胯壊鎻忚竟 */ - public outlineFilterGreen = new OutlineFilter(2, 0x00ff00); + // public outlineFilterGreen = new OutlineFilter(2, 0x00ff00); /** * 鎷疯礉绱犳潗鏁版嵁 */ @@ -307,49 +307,43 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV /** * 閫変腑浜嬩欢 */ - this.on('select', obj => { - if (this.allowEdit) { - if (obj instanceof AxArrowConnector) { - obj.setPointsVisible(true); - } - else if (obj instanceof MultipointIcon) { - if (obj.assetData.GameMode === this.canvasData.gameMode) { - obj.setPointVisiable(true); - } else { - obj.filters = [this.outlineFilterGreen]; - } - } else if (obj instanceof PolygonIcon) { - if (obj.assetData.GameMode === this.canvasData.gameMode) { - obj.setPointVisiable(true); - } else { - obj.filters = [this.outlineFilterGreen]; - } + this.on('select', shape => { + if (shape instanceof AxShape) { + shape.showBorder(); + if (this.allowEdit) { + } else { - obj.filters = [this.outlineFilterGreen]; + } - } else { - obj.filters = [this.outlineFilterGreen]; } }); /** * 鍙栨秷閫変腑浜嬩欢 */ - this.on('deselect', obj => { - if (this.allowEdit) { - if (obj instanceof AxArrowConnector) { - obj.setPointsVisible(false); - } - else if (obj instanceof MultipointIcon) { - obj.setPointVisiable(false); - } else if (obj instanceof PolygonIcon) { - obj.filters = []; - obj.setPointVisiable(false); + this.on('deselect', shape => { + if (shape instanceof AxShape) { + shape.hideBorder(); + if (this.allowEdit) { + } else { - obj.filters = []; + } - } else { - obj.filters = []; } + // if (this.allowEdit) { + // if (obj instanceof AxArrowConnector) { + // obj.setPointsVisible(false); + // } + // else if (obj instanceof MultipointIcon) { + // obj.setPointVisiable(false); + // } else if (obj instanceof PolygonIcon) { + // obj.filters = []; + // obj.setPointVisiable(false); + // } else { + // obj.filters = []; + // } + // } else { + // obj.filters = []; + // } }); /** * 鏍规嵁鑳屾櫙缂╂斁浜嬩欢 @@ -502,30 +496,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV // if (this.canvasData.gameMode === GameMode.Assignment) { // this.createNodeShape(this.canvasData.selectPanelPoint.Data); // } - } - /** - * 鍔犺浇鑰冪敓鏁版嵁 - */ - public loadExamineeData(b: boolean = true) { - this.createBackground(this.canvasData.selectStorey.imageUrl, this.canvasData.selectStorey.imageAngle); - if (b) { - this.createFloorShape(this.canvasData.examOriginaleveryStoreyData.data); - this.processinghiddenData(); - } - this.createFloorShape(this.canvasData.originaleveryStoreyData.data); - this.createNodeShape(this.canvasData.selectPanelPoint.Data); - this.setNameVisible(false, 0); - this.setNameVisible(false, 1); - } - /** - * 澶勭悊闅愯棌鏁版嵁 - */ - public processinghiddenData() { - for (let key in this.canvasData.originaleveryStoreyData.data){ - if (this.canvasData.hiddenBasicInfoFacilities.indexOf(key)!==-1) { - delete this.canvasData.originaleveryStoreyData.data[key]; - } - } } /** * 鍒涘缓鑳屾櫙鍥 @@ -571,9 +541,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 鍒涘缓鑺傜偣鍥惧舰 */ public createNodeShape(nodeData: any) { - console.log(789,nodeData) if (nodeData !== undefined && nodeData !== null) { Object.keys(nodeData).forEach((key) => { + if (nodeData[key] === undefined || nodeData[key] === null) { return;} Object.keys(nodeData[key]).forEach((tempKey) => { switch (nodeData[key][tempKey].InteractiveMode) { case 0: @@ -690,6 +660,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.backgroundImage .on('mousedown', event => { if (!event.currentTarget.dragging && this.selection.isMultiselection === false) { + this.selection.deselectAll(); event.currentTarget.data = event.data; event.currentTarget.dragging = true; event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); @@ -1282,6 +1253,52 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.emit('backgroundScale', this.backgroundImage.scale.x); } + + + + ////////////////////////////////////////////////////////////////////////鑰冭瘯绯荤粺鍔犺浇閫昏緫/////////////////////////////////////////////////////////////////////// + /** + * 澶勭悊鑰冪敓闅愯棌鏁版嵁 + */ + public processinghiddenData() { + for (let key in this.canvasData.originaleveryStoreyData.data){ + if (this.canvasData.hiddenBasicInfoFacilities.indexOf(key)!==-1) { + delete this.canvasData.originaleveryStoreyData.data[key]; + } + } + } + + /** + * 鍔犺浇鑰冪敓鏁版嵁 + */ + public loadExamineeData() { + // 鍒涘缓鑳屾櫙鍥 + this.createBackground(this.canvasData.selectStorey.imageUrl, this.canvasData.selectStorey.imageAngle); + // 鍒涘缓妤煎眰鍥惧舰 + this.createFloorShape(this.canvasData.examOriginaleveryStoreyData.data); + // 澶勭悊鍏变韩鏁版嵁涓冨畼闅愯棌鐨勬暟鎹 + this.processinghiddenData(); + // 寤烘ゼ灞傚浘褰 + this.createFloorShape(this.canvasData.originaleveryStoreyData.data); + // 鍒涘缓澶勭疆棰勬鍥惧舰 + this.createNodeShape(this.canvasData.selectPanelPoint.Data); + // 闅愯棌鍩烘湰淇℃伅鍥惧舰 + this.setNameVisible(false, 0); + // 闅愯棌鎯冲畾浣滀笟鍥惧舰 + this.setNameVisible(false, 1); + } + + /** + * 鍔犺浇鑰冨畼鏁版嵁 + */ + public loadExaminerData() { + // 鍒涘缓鑳屾櫙鍥 + this.createBackground(this.canvasData.selectStorey.imageUrl, this.canvasData.selectStorey.imageAngle); + // 鍒涘缓妤煎眰鍥惧舰 + this.createFloorShape(this.canvasData.originaleveryStoreyData.data); + // 鍒涘缓澶勭疆棰勬鍥惧舰 + this.createNodeShape(this.canvasData.selectPanelPoint.Data); + } } /**