From 1ec34a7939d987f65c7887643218198a2e2bef46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E6=8C=AF=E5=8D=87?= <359059686@qq.com> Date: Fri, 8 Jan 2021 09:08:34 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E5=AE=89=E4=BF=A1=E5=9B=BE=E4=BE=8B=20=20?= =?UTF-8?q?=E7=89=88=E6=9C=AC=E5=8F=B71.0.0.20210107=5Fbeta?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/working-area/model/axImageShape.ts | 1 + src/app/working-area/model/axLegend.ts | 116 +++++ .../working-area/model/axPreviewImageShape.ts | 9 + src/app/working-area/model/axShape.ts | 6 +- .../working-area/working-area.component.ts | 492 +++++++++++------- 5 files changed, 444 insertions(+), 180 deletions(-) create mode 100644 src/app/working-area/model/axLegend.ts diff --git a/src/app/working-area/model/axImageShape.ts b/src/app/working-area/model/axImageShape.ts index bce7e50..f496619 100644 --- a/src/app/working-area/model/axImageShape.ts +++ b/src/app/working-area/model/axImageShape.ts @@ -120,6 +120,7 @@ export class AxImageShape extends AxShape { }); this.showConnectionPoint(false); } + this.setItemScale(1 / this.workingArea.backgroundImage.scale.x); } // 设置选择框 public setSelectionBox(b: boolean, sprite?: PIXI.Sprite) { diff --git a/src/app/working-area/model/axLegend.ts b/src/app/working-area/model/axLegend.ts new file mode 100644 index 0000000..af86e70 --- /dev/null +++ b/src/app/working-area/model/axLegend.ts @@ -0,0 +1,116 @@ +import { Constructor } from '@angular/material/core/common-behaviors/constructor'; +import { Sprite, Texture,Text, Graphics, Point } from 'pixi.js'; +import { WorkingAreaComponent } from '../working-area.component'; +import { AxShape } from './axShape'; + +/** + * 安信图例形状 + */ +export class AxLegend extends AxShape { + // 数据 + public shapeMap: Map = new Map(); + pen: Graphics = new Graphics(); + /** + * + */ + constructor(assetData: any, workingArea: WorkingAreaComponent,shapeMap:Map) { + super(assetData, workingArea); + this.name = this.assetData.Id; + this.shapeMap = shapeMap; + this.refresh(); + } + // 添加数据 + public addItem(item:Legend) { + if (this.shapeMap.has(item.Name)) { + this.shapeMap.get(item.Name).Count++; + } else { + this.shapeMap.set(item.Name, item); + } + this.refresh(); + } + // 删除数据 + public deleteItem(item: Legend) { + if (this.shapeMap.has(item.Name)) { + this.shapeMap.get(item.Name).Count--; + if (this.shapeMap.get(item.Name).Count === 0) { + this.shapeMap.delete(item.Name); + } + } + this.refresh(); + } + // 刷新 + refresh() { + this.removeChildren(); + let index = 1; + let offset = 50; + let number = 2; + let width = 450; + let height = 100; + for (let i = 0; i < number; i++){ + if (i >= this.shapeMap.size) break; + let x = width * i; + var textImage = new Text('图例',{ + fontSize: 36, + fill: ['#0000ff'], + }); + textImage.anchor.set(0.5) + textImage.x = x; + textImage.y = 0; + this.addChild(textImage); + + var textName = new Text("名称"+' 【数量】',{ + fontSize: 36, + fill: ['#0000ff'], + }); + textName.anchor.set(0,0.5); + textName.x = x + 32 + offset; + textName.y = 0; + this.addChild(textName); + } + for (let item of this.shapeMap.values()) { + let x = index % number === 0 ? (number -1) * width : (index % number - 1) * width; + let y = Math.ceil(index / number) * height; + let image: Sprite = Sprite.from(item.ImageUrl); + image.width = 64; + image.height = 64; + image.anchor.set(0.5); + image.x = x; + image.y = y; + this.addChild(image); + + var textName = new Text(item.Name+' 【'+item.Count.toString()+'】'); + textName.anchor.set(0,0.5); + textName.x = x + image.width/2 + offset; + textName.y = y; + this.addChild(textName); + index++; + } + if (this.shapeMap.size > 0) { + let rect = this.getLocalBounds(); + this.pen.clear(); + this.pen.beginFill(0xffffff,0.01); + this.pen.lineStyle(5, 0x000000); + this.pen.moveTo(rect.left-offset, rect.top-offset); + this.pen.lineTo(rect.right+offset, rect.top-offset); + this.pen.lineTo(rect.right+offset, rect.bottom+offset); + this.pen.lineTo(rect.left - offset, rect.bottom + offset); + this.pen.closePath(); + this.pen.endFill(); + } + this.addChild(this.pen); + } +} + +export class Legend{ + public Name: string; + public ImageUrl: string; + public Count: number; + /** + * + */ + constructor(name:string,imageUrl:string,count:number) { + this.Name = name; + this.ImageUrl = imageUrl; + this.Count = count; + } +} diff --git a/src/app/working-area/model/axPreviewImageShape.ts b/src/app/working-area/model/axPreviewImageShape.ts index 623b2d7..8d0cd5d 100644 --- a/src/app/working-area/model/axPreviewImageShape.ts +++ b/src/app/working-area/model/axPreviewImageShape.ts @@ -24,4 +24,13 @@ export class AxPreviewImageShape extends AxShape { setImageUrl(url: string) { this.image.texture = Texture.from(url); } + public setItemScale(scale: number) { + this.scale.set(scale); + } + /** + * + * @param rect 画边框 + */ + public drawBorder(scale: number) { + } } diff --git a/src/app/working-area/model/axShape.ts b/src/app/working-area/model/axShape.ts index 3023a7f..7e784b3 100644 --- a/src/app/working-area/model/axShape.ts +++ b/src/app/working-area/model/axShape.ts @@ -33,7 +33,6 @@ export class AxShape extends Container { this.buttonMode = true; this .on('pointerdown', event => { - console.log(this.assetData); event.stopPropagation(); if (this.selectable) { this.workingArea.selection.selectOne(this); @@ -46,8 +45,6 @@ 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('pointerup', event => { @@ -100,6 +97,9 @@ export class AxShape extends Container { refresh(): void{ + } + public setItemScale(scale: number) { + } /** * 显示边框 diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index 368101b..b0b50ed 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -15,6 +15,8 @@ import { AxShape } from './model/axShape'; import { PropertyInfo } from './model/PropertyInfo'; import { AxPreviewImageShape } from './model/axPreviewImageShape'; import { AxArrowConnector } from './model/axArrowConnector'; +import { AxLegend, Legend } from './model/axLegend'; +import { NullTemplateVisitor } from '@angular/compiler'; @Component({ @@ -134,10 +136,18 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV public carData: Map = new Map(); // 当前选择的车辆id public selectCar: any = null; + // 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta + // Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。 + // Beta版: 该版本相对于α版已有了很大的改进，消除了严重的错误，但还是存在着一些缺陷，需要经过多次测试来进一步消除，此版本主要的修改对像是软件的UI。 + // RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。 + // Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。 + public VERSION = '1.0.0.20210107_beta'; /** * 数据初始化 */ ngOnInit(): void { + PIXI.utils.skipHello() + this.sayHello(); this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => { if (event.keyCode === 17) { this.selection.isMultiselection = true; @@ -151,22 +161,51 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV } // 按Del键删除选中的图标 if (event.keyCode === 46) { - this.selection.objects.forEach(item => { - if (this.allowEdit - && this.canvasData.gameMode === item.assetData.GameMode) { - this.backgroundImage.removeChild(this.backgroundImage.getChildByName(item.assetData.Id)); - } - }); - this.selection.deselectAll(); - this.emit('deleteIcon'); + this.deleteSelectedShape(); } }); } + /** + * 删除选中的图标 + */ + public deleteSelectedShape() { + this.selection.objects.forEach(item => { + this.deleteShape(item); + }); + this.selection.deselectAll(); + } + /** + * + * @param obj 删除一个形状 + */ + public deleteShape(shape) { + if (this.allowEdit && this.canvasData.gameMode === shape.assetData.GameMode) { + this.emit('deleteIcon',shape); + } + } + /** + * 打招呼 + */ + sayHello() { + var _a; + if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { + var args = [ + "\n %c 版本号 - " + this.VERSION + "\n", + 'color: #ff66a5; background: #000000; padding:5px 0;', + ]; + (_a = window.console).log.apply(_a, args); + } + else if (window.console) { + window.console.log("\n %c 版本号 - " + this.VERSION + "\n"); + } +} /** * 页面初始化 */ ngAfterViewInit(): void { - this.createCanvas(); + setTimeout(() => { + this.createCanvas(); + }); window.onresize = () => { this.resetCanvas(); }; @@ -184,7 +223,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV if (this.backgroundImage.scale.x >= 32) { this.backgroundImage.scale.x = 32; this.backgroundImage.scale.y = 32; - this.emit('backgroundScale', this.backgroundImage.scale.x); + this.resizeItem(1/this.backgroundImage.scale.x) return; } this.backgroundImage.pivot.set(pivot.x, pivot.y); @@ -198,7 +237,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV if (this.backgroundImage.scale.x <= 0.1) { this.backgroundImage.scale.x = 0.1; this.backgroundImage.scale.y = 0.1; - this.emit('backgroundScale', this.backgroundImage.scale.x); + this.resizeItem(1/this.backgroundImage.scale.x) return; } this.backgroundImage.pivot.set(pivot.x, pivot.y); @@ -209,7 +248,16 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.backgroundImage.position.x += delX; this.backgroundImage.position.y += delY; } - this.emit('backgroundScale', this.backgroundImage.scale.x); + this.resizeItem(1/this.backgroundImage.scale.x) + } + // 重置图形缩放 + public resizeItem(size:number) { + this.backgroundImage.children.forEach(item => { + if (item instanceof AxShape) { + item.setItemScale(size); + item.drawBorder(size); + } + }); } /** * @@ -249,17 +297,18 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV backgroundColor: 0xE9FAFF }); this.content.nativeElement.appendChild(this.app.view); + this.app.view.style.border = '1px dashed blue'; this.animator = new Charm(PIXI); - + this.createBackgroundImage(); this.app.ticker.add((delta) => { this.animator.update(); this.mousePosition = this.app.renderer.plugins.interaction.mouse.global; // 预览图片 - if (this.previewImage !== null && this.backgroundImage !== null) { + if (this.previewImage !== undefined && this.previewImage !== null) { this.previewImage.position = this.backgroundImage.toLocal(this.mousePosition); } - if (this.circleShadow !== null && this.backgroundImage !== null) { + if (this.circleShadow !== undefined && this.circleShadow !== null) { this.circleShadow.position = this.backgroundImage.toLocal(this.mousePosition); this.refreshPreviewLineSegment(this.currentClickPoint.position, this.circleShadow.position); this.refreshPreviewPoint(); @@ -290,96 +339,88 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV /** * 选中事件 */ - this.on('select', shape => { - if (shape instanceof AxShape) { - shape.showBorder(); - shape.setPointVisiable(this.allowEdit); - } + this.on('select', (axShape:AxShape)=> { + axShape.showBorder(); + axShape.setPointVisiable(this.allowEdit); }); /** * 取消选中事件 */ - this.on('deselect', shape => { - if (shape instanceof AxShape) { - shape.hideBorder(); - shape.setPointVisiable(false); - } - }); - /** - * 根据背景缩放事件 - */ - this.on('backgroundScale', scale => { - const data = 1 / scale; - this.backgroundImage?.children.forEach(item => { - if (item instanceof AxImageShape) { - item.setItemScale(data); - item.drawBorder(data); - } else if (item instanceof MultipointIcon) { - item.setItemScale(data); - item.drawBorder(data); - } else if (item instanceof PolygonIcon) { - item.setItemScale(data); - item.drawBorder(data); - } else if (item instanceof AxPreviewImageShape) { - item.scale.set(data); - } else if (item instanceof AxArrowConnector) { - item.setItemScale(data); - item.drawBorder(data); - } - }); + this.on('deselect', (axShape:AxShape)=> { + axShape.hideBorder(); + axShape.setPointVisiable(false); }); /** * 创建图标事件（数据处理） */ - this.on('createIcon', obj => { - if (obj.assetData.GameMode === GameMode.BasicInformation) { // 基本信息 + this.on('createIcon', (axShape:AxShape)=> { + if (axShape.assetData.GameMode === GameMode.BasicInformation) { // 基本信息 // 添加楼层数据 - this.canvasData.originaleveryStoreyData.data[obj.assetData.Id] = obj.assetData; + this.canvasData.originaleveryStoreyData.data[axShape.assetData.Id] = axShape.assetData; // 添加建筑数据 - this.canvasData.originalcompanyBuildingData.data[obj.assetData.Id] = obj.assetData; - } else if (obj.assetData.GameMode === GameMode.Assignment) { // 处置预案 + this.canvasData.originalcompanyBuildingData.data[axShape.assetData.Id] = axShape.assetData; + } else if (axShape.assetData.GameMode === GameMode.Assignment) { // 处置预案 if (this.canvasData.selectPanelPoint.Data === undefined || this.canvasData.selectPanelPoint.Data === null) { this.canvasData.selectPanelPoint.Data = new FloorNodeData(); } - this.canvasData.selectPanelPoint.Data.Stock[obj.assetData.Id] = obj.assetData; - } else if (obj.assetData.GameMode === GameMode.Examinee) { // 考生考试 - if (obj.assetData.Tag === 1) { - this.canvasData.examOriginaleveryStoreyData.data[obj.assetData.Id] = obj.assetData; + this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id] = axShape.assetData; + } + else if (axShape.assetData.GameMode === GameMode.Examinee) { // 考生考试 + if (axShape.assetData.Tag === 1) { + this.canvasData.examOriginaleveryStoreyData.data[axShape.assetData.Id] = axShape.assetData; } else { if (this.canvasData.selectPanelPoint.Data === undefined || this.canvasData.selectPanelPoint.Data === null) { this.canvasData.selectPanelPoint.Data = new FloorNodeData(); } - this.canvasData.selectPanelPoint.Data.Stock[obj.assetData.Id] = obj.assetData; + this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id] = axShape.assetData; } } + var temp = this.backgroundImage.getChildByName("图例") as AxLegend; + if ( temp !== undefined + && temp !== null) { + var itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1); + temp.addItem(itemLegend); + } this.canvasData.isChange = true; }); /** * 删除图标事件(数据处理) */ - this.on('deleteIcon', obj => { - if (obj.assetData.GameMode === GameMode.BasicInformation) { // 基本信息 + this.on('deleteIcon', (axShape:AxShape)=>{ + // 删除图例对象 + var temp = this.backgroundImage.getChildByName("图例") as AxLegend; + if ( temp !== undefined + && temp !== null) { + var itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1); + temp.deleteItem(itemLegend); + } + + + if (axShape.assetData.GameMode === GameMode.BasicInformation) { // 基本信息 // 删除楼层数据 - delete this.canvasData.originaleveryStoreyData.data[obj.assetData.Id]; + delete this.canvasData.originaleveryStoreyData.data[axShape.assetData.Id]; // 删除建筑数据 - delete this.canvasData.originalcompanyBuildingData.data[obj.assetData.Id]; - } else if (obj.assetData.GameMode === GameMode.Assignment) { // 处置预案 - delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[obj.assetData.Id]; - delete this.canvasData.selectPanelPoint.Data.Increment[obj.assetData.Id]; - delete this.canvasData.selectPanelPoint.Data.Stock[obj.assetData.Id]; - } else if (obj.assetData.GameMode === GameMode.Examinee) { // 考生考试 - if (obj.assetData.Tag === 1) { + delete this.canvasData.originalcompanyBuildingData.data[axShape.assetData.Id]; + } else if (axShape.assetData.GameMode === GameMode.Assignment) { // 处置预案 + delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[axShape.assetData.Id]; + delete this.canvasData.selectPanelPoint.Data.Increment[axShape.assetData.Id]; + delete this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id]; + } + else if (axShape.assetData.GameMode === GameMode.Examinee) { // 考生考试 + if (axShape.assetData.Tag === 1) { // 删除楼层数据 - delete this.canvasData.examOriginaleveryStoreyData.data[obj.assetData.Id]; + delete this.canvasData.examOriginaleveryStoreyData.data[axShape.assetData.Id]; } else { - delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[obj.assetData.Id]; - delete this.canvasData.selectPanelPoint.Data.Increment[obj.assetData.Id]; - delete this.canvasData.selectPanelPoint.Data.Stock[obj.assetData.Id]; + delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[axShape.assetData.Id]; + delete this.canvasData.selectPanelPoint.Data.Increment[axShape.assetData.Id]; + delete this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id]; } - this.canvasData.isChange = true; + } + this.backgroundImage.removeChild(axShape); + this.canvasData.isChange = true; }); } /** @@ -450,17 +491,17 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.selection.select(obj); }); } - /** - * 创建背景图 - */ - public createBackground(imageUrl:string,imageAngle:number) { - if (this.backgroundImage !== null) { - this.backgroundImage.destroy(); - this.backgroundImage = null; - } - this.createBackgroundImage() - this.refreshBackgroundImage(imageUrl,imageAngle); - } + // /** + // * 创建背景图 + // */ + // public createBackground(imageUrl:string,imageAngle:number) { + // if (this.backgroundImage !== null) { + // this.backgroundImage.destroy(); + // this.backgroundImage = null; + // } + // this.createBackgroundImage() + // this.refreshBackgroundImage(imageUrl,imageAngle); + // } /** * 创建楼层图形 */ @@ -489,7 +530,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV break; } }); - this.emit('backgroundScale', this.backgroundImage.scale.x); + // this.emit('backgroundScale', this.backgroundImage.scale.x); } /** * 创建节点图形 @@ -517,7 +558,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV }); }); } - this.emit('backgroundScale', this.backgroundImage.scale.x); + // this.emit('backgroundScale', this.backgroundImage.scale.x); } /** * 创建确认绘制结束按钮 @@ -530,7 +571,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.enterPaintEndButton.interactive = true; this.enterPaintEndButton.buttonMode = true; this.enterPaintEndButton - .on('mousedown', event => { + .on('pointerdown', event => { event.stopPropagation(); this.enterPaint(); }); @@ -544,26 +585,26 @@ 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.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; + // 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 wScale = appWidth / imageWidth; + // const hScale = appHeight / imageHeight; - const scale = wScale < hScale - ? wScale - : hScale; - this.backgroundImage.scale.set(scale); + // const scale = wScale < hScale + // ? wScale + // : hScale; + // this.backgroundImage.scale.set(scale); this.backgroundImage.sortableChildren = true; this.backgroundImage - .on('mousedown', event => { + .on('pointerdown', event => { if (!event.currentTarget.dragging && this.selection.isMultiselection === false) { this.selection.deselectAll(); event.currentTarget.data = event.data; @@ -573,7 +614,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV event.currentTarget.dragPoint.y -= event.currentTarget.y; switch (this.paintMode) { case PaintMode.endPaint: - console.log(this.backgroundImage.toLocal(this.mousePosition)); break; case PaintMode.singlePointIcon: const json = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos)); @@ -612,7 +652,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV }; const singleIcon = new AxImageShape(assetData, this); this.emit('createIcon', singleIcon); - this.emit('backgroundScale', this.backgroundImage.scale.x); + // this.emit('backgroundScale', this.backgroundImage.scale.x); break; case PaintMode.lineIcon: this.previewLineSegment.visible = true; @@ -669,7 +709,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.paintingIcon = new MultipointIcon(assetData1, this); // this.paintingIcon = new MultipointIcon(this.previewSinglePointIcon.texture, new PIXI.Point(0, 0), this.paintPoints, this, // this.canvasData.selectTemplateData.name); - this.emit('backgroundScale', this.backgroundImage.scale.x); + // this.emit('backgroundScale', this.backgroundImage.scale.x); break; case PaintMode.polygonIcon: this.previewLineSegment.visible = true; @@ -754,7 +794,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.paintingShape.redraw(); } } - this.emit('backgroundScale', this.backgroundImage.scale.x); + // this.emit('backgroundScale', this.backgroundImage.scale.x); break; } } else if (!event.currentTarget.dragging && this.selection.isMultiselection === true) { @@ -764,7 +804,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); } }) - .on('mouseup', event => { + .on('pointerup', event => { if (event.currentTarget.dragging) { event.currentTarget.dragging = false; event.currentTarget.data = null; @@ -787,13 +827,13 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.rectToolGraphics.visible = false; } }) - .on('mouseupoutside', event => { + .on('pointerupoutside', event => { if (event.currentTarget.dragging) { event.currentTarget.dragging = false; event.currentTarget.data = null; } }) - .on('mousemove', event => { + .on('pointermove', event => { 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; @@ -850,43 +890,119 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV if (!imageUrl) { this.backgroundImage.visible = false; } else { + this.backgroundImage.visible = false; + 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; this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl); - 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; - - const scale = wScale < hScale? wScale: hScale; - this.backgroundImage.scale.set(scale); this.backgroundImage.angle = imageAngle; - this.backgroundImage.visible = true; + // 等待图片加载完成 + let imageWidth = this.backgroundImage.texture.width; + let imageHeight = this.backgroundImage.texture.height; + let appWidth = this.app.view.width - 470; + let appHeight = this.app.view.height; + let wScale = appWidth / imageWidth; + let hScale = appHeight / imageHeight; + let scale = wScale < hScale ? wScale : hScale; + // 设置图片缩放 + this.backgroundImage.scale.set(scale); } } /** - * 清空画布 - */ - public destroyBackgroundImage(): void { - this.app.stage.removeChild(this.backgroundImage); - this.backgroundImage = null; - } - /** - * 设置背景图缩放 - * @param scale 缩放系数 + * 刷新 + * @param imageUrl + * @param imageAngle */ - public setBackgroundScale(scale: number): void { - this.backgroundImage?.scale.set(scale); - this.emit('backgroundScale', this.backgroundImage?.scale.x); + public async refresh(imageUrl: string = this.canvasData.selectStorey.imageUrl, imageAngle: number = this.canvasData.selectStorey.imageAngle): Promise { + this.backgroundImage.visible = false; + 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; + this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl); + this.backgroundImage.angle = imageAngle; + // 等待图片加载完成 + let imageWidth = this.backgroundImage.texture.width; + let imageHeight = this.backgroundImage.texture.height; + let appWidth = this.app.view.width - 470; + let appHeight = this.app.view.height; + let wScale = appWidth / imageWidth; + let hScale = appHeight / imageHeight; + let scale = wScale < hScale ? wScale : hScale; + // 设置图片缩放 + this.backgroundImage.scale.set(scale); + // 清空所有图形 + this.selection.deselectAll(); + let itemList = []; + this.backgroundImage.children.forEach(item => { + if (item instanceof AxShape && item instanceof AxPreviewImageShape===false) { + itemList.push(item.name); + } + }); + + itemList.forEach(item => { + this.backgroundImage.getChildByName(item).destroy(); + // let child = this.backgroundImage.getChildByName(item); + // this.backgroundImage.removeChild(child); + }) + //加载当前数据 + this.createFloorShape(this.canvasData.originaleveryStoreyData.data); + // 创建处置预案图形 + this.createNodeShape(this.canvasData.selectPanelPoint.Data); + this.createAxLegend(); + this.backgroundImage.visible = true; } /** - * 设置背景图角度 - * @param imageAngle 角度值 + * 创建安信图例 */ - public setBackgroundAngle(imageAngle: number) { - this.backgroundImage.angle = imageAngle; + public createAxLegend() { + const tempAssetData = { + Id: "图例",//ObjectID.default.generate() + Color: "#066EED80", + PropertyInfos:[] + }; + let shapeMap: Map = new Map(); + + for (let item in this.canvasData.originaleveryStoreyData.data) { + if (shapeMap.has(this.canvasData.originaleveryStoreyData.data[item].Name)) { + shapeMap.get(this.canvasData.originaleveryStoreyData.data[item].Name).Count++; + } else { + shapeMap.set(this.canvasData.originaleveryStoreyData.data[item].Name, new Legend( + this.canvasData.originaleveryStoreyData.data[item].Name, + this.canvasData.originaleveryStoreyData.data[item].ImageUrl, + 1 + )); + } + } + var axLegend = new AxLegend(tempAssetData, this, shapeMap); + var rect = this.backgroundImage.getLocalBounds(); + var itemRect = axLegend.getLocalBounds(); + axLegend.x = rect.right - itemRect.right; + axLegend.y = rect.bottom - itemRect.bottom; } + // /** + // * 清空画布 + // */ + // public destroyBackgroundImage(): void { + // this.app.stage.removeChild(this.backgroundImage); + // this.backgroundImage = null; + // } + /** + // // * 设置背景图缩放 + // // * @param scale 缩放系数 + // // */ + // public setBackgroundScale(scale: number): void { + // this.backgroundImage?.scale.set(scale); + // this.emit('backgroundScale', this.backgroundImage?.scale.x); + // } + // /** + // * 设置背景图角度 + // * @param imageAngle 角度值 + // */ + // public setBackgroundAngle(imageAngle: number) { + // this.backgroundImage.angle = imageAngle; + // } /** * 创建预览单点图标 */ @@ -1115,7 +1231,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV break; } this.paintPoints.splice(0, this.paintPoints.length); - this.emit('backgroundScale', this.backgroundImage.scale.x); + // this.emit('backgroundScale', this.backgroundImage.scale.x); } /** * 复制 @@ -1164,7 +1280,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV } this.selection.select(this.backgroundImage.getChildByName(newData.Id)); }); - this.emit('backgroundScale', this.backgroundImage.scale.x); + // this.emit('backgroundScale', this.backgroundImage.scale.x); } ////////////////////////////////////////////////////////////////////////通用///////////////////////////////////////////////////////////////////////////// /** @@ -1178,48 +1294,43 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV }); } ////////////////////////////////////////////////////////////////////////采集平台加载逻辑/////////////////////////////////////////////////////////////////////// - public onBasicInformationClickFloor() { - - } ////////////////////////////////////////////////////////////////////////编制平台加载逻辑/////////////////////////////////////////////////////////////////////// - public onClickAssignmentFloor() { - - } ////////////////////////////////////////////////////////////////////////考试系统加载逻辑/////////////////////////////////////////////////////////////////////// - /** - * 处理考生隐藏数据 - */ - public processinghiddenData() { - for (let key in this.canvasData.originaleveryStoreyData.data){ - if (this.canvasData.hiddenBasicInfoFacilities.indexOf(key)!==-1) { - delete this.canvasData.originaleveryStoreyData.data[key]; - } - } - } - /** * 考生点击楼层 */ - public onExamineeClickFloor() { - // // 创建背景图 - // 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); - // console.log("考生加载................................") - // 创建背景图 - this.createBackground(this.canvasData.selectStorey.imageUrl, this.canvasData.selectStorey.imageAngle); + public async onExamineeClickFloor() { + this.backgroundImage.visible = false; + 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; + this.backgroundImage.texture = await PIXI.Texture.fromURL(this.canvasData.selectStorey.imageUrl); + this.backgroundImage.angle = this.canvasData.selectStorey.imageAngle; + // 等待图片加载完成 + let imageWidth = this.backgroundImage.texture.width; + let imageHeight = this.backgroundImage.texture.height; + let appWidth = this.app.view.width - 470; + let appHeight = this.app.view.height; + let wScale = appWidth / imageWidth; + let hScale = appHeight / imageHeight; + let scale = wScale < hScale ? wScale : hScale; + // 设置图片缩放 + this.backgroundImage.scale.set(scale); + // 清空所有图形 + this.selection.deselectAll(); + let itemList = []; + this.backgroundImage.children.forEach(item => { + if (item instanceof AxShape && item instanceof AxPreviewImageShape===false) { + itemList.push(item.name); + } + }); + + itemList.forEach(item => { + this.backgroundImage.getChildByName(item).destroy(); + }) // 创建楼层图形 this.createFloorShape(this.canvasData.examOriginaleveryStoreyData.data); // 创建楼层图形 @@ -1228,16 +1339,42 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.createNodeShape(this.canvasData.selectPanelPoint.Data); // 隐藏图标 this.setIconVisible(this.canvasData.hiddenBasicInfoFacilities, false); - // 隐藏基本信息图形 - this.setNameVisible(false, 0); + this.backgroundImage.visible = true; } /** * 考官点击楼层 */ - public onExaminerClickFloor() { - // 创建背景图 - this.createBackground(this.canvasData.selectStorey.imageUrl, this.canvasData.selectStorey.imageAngle); + public async onExaminerClickFloor() { + this.backgroundImage.visible = false; + 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; + this.backgroundImage.texture = await PIXI.Texture.fromURL(this.canvasData.selectStorey.imageUrl); + this.backgroundImage.angle = this.canvasData.selectStorey.imageAngle; + // 等待图片加载完成 + let imageWidth = this.backgroundImage.texture.width; + let imageHeight = this.backgroundImage.texture.height; + let appWidth = this.app.view.width - 470; + let appHeight = this.app.view.height; + let wScale = appWidth / imageWidth; + let hScale = appHeight / imageHeight; + let scale = wScale < hScale ? wScale : hScale; + // 设置图片缩放 + this.backgroundImage.scale.set(scale); + // 清空所有图形 + this.selection.deselectAll(); + let itemList = []; + this.backgroundImage.children.forEach(item => { + if (item instanceof AxShape && item instanceof AxPreviewImageShape===false) { + itemList.push(item.name); + } + }); + + itemList.forEach(item => { + this.backgroundImage.getChildByName(item).destroy(); + }) // 创建楼层图形 this.createFloorShape(this.canvasData.examOriginaleveryStoreyData.data); // 创建楼层图形 @@ -1246,6 +1383,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.createNodeShape(this.canvasData.selectPanelPoint.Data); // 隐藏图标 this.setIconVisible(this.canvasData.hiddenBasicInfoFacilities, false); + this.backgroundImage.visible = true; } } From 291c7392456f918500bd8c85d429df491a230b08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E6=8C=AF=E5=8D=87?= <359059686@qq.com> Date: Fri, 8 Jan 2021 10:24:02 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E8=B7=9F=E6=96=B0=E7=89=88=E6=9C=AC?= =?UTF-8?q?=E5=88=B01.0.1.20210108=5Fbeta?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../working-area/working-area.component.ts | 65 +++---------------- 1 file changed, 8 insertions(+), 57 deletions(-) diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index b0b50ed..1547755 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -141,7 +141,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV // Beta版: 该版本相对于α版已有了很大的改进，消除了严重的错误，但还是存在着一些缺陷，需要经过多次测试来进一步消除，此版本主要的修改对像是软件的UI。 // RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。 // Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。 - public VERSION = '1.0.0.20210107_beta'; + public VERSION = '1.0.1.20210108_beta'; /** * 数据初始化 */ @@ -887,7 +887,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 刷新背景图 */ public async refreshBackgroundImage(imageUrl:string = this.canvasData.selectStorey.imageUrl,imageAngle:number = this.canvasData.selectStorey.imageAngle): Promise { - if (!imageUrl) { + if (imageUrl === undefined || imageUrl === null || imageUrl === "") { this.backgroundImage.visible = false; } else { this.backgroundImage.visible = false; @@ -907,6 +907,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV let scale = wScale < hScale ? wScale : hScale; // 设置图片缩放 this.backgroundImage.scale.set(scale); + this.backgroundImage.visible = true; } } /** @@ -915,23 +916,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * @param imageAngle */ public async refresh(imageUrl: string = this.canvasData.selectStorey.imageUrl, imageAngle: number = this.canvasData.selectStorey.imageAngle): Promise { - this.backgroundImage.visible = false; - 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; - this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl); - this.backgroundImage.angle = imageAngle; - // 等待图片加载完成 - let imageWidth = this.backgroundImage.texture.width; - let imageHeight = this.backgroundImage.texture.height; - let appWidth = this.app.view.width - 470; - let appHeight = this.app.view.height; - let wScale = appWidth / imageWidth; - let hScale = appHeight / imageHeight; - let scale = wScale < hScale ? wScale : hScale; - // 设置图片缩放 - this.backgroundImage.scale.set(scale); + await this.refreshBackgroundImage(); + // 清空所有图形 this.selection.deselectAll(); let itemList = []; @@ -946,12 +932,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV // let child = this.backgroundImage.getChildByName(item); // this.backgroundImage.removeChild(child); }) - //加载当前数据 + //加载当前数据 this.createFloorShape(this.canvasData.originaleveryStoreyData.data); // 创建处置预案图形 this.createNodeShape(this.canvasData.selectPanelPoint.Data); this.createAxLegend(); - this.backgroundImage.visible = true; } /** * 创建安信图例 @@ -1302,23 +1287,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 考生点击楼层 */ public async onExamineeClickFloor() { - this.backgroundImage.visible = false; - 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; - this.backgroundImage.texture = await PIXI.Texture.fromURL(this.canvasData.selectStorey.imageUrl); - this.backgroundImage.angle = this.canvasData.selectStorey.imageAngle; - // 等待图片加载完成 - let imageWidth = this.backgroundImage.texture.width; - let imageHeight = this.backgroundImage.texture.height; - let appWidth = this.app.view.width - 470; - let appHeight = this.app.view.height; - let wScale = appWidth / imageWidth; - let hScale = appHeight / imageHeight; - let scale = wScale < hScale ? wScale : hScale; - // 设置图片缩放 - this.backgroundImage.scale.set(scale); + await this.refreshBackgroundImage(); // 清空所有图形 this.selection.deselectAll(); let itemList = []; @@ -1339,30 +1308,13 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.createNodeShape(this.canvasData.selectPanelPoint.Data); // 隐藏图标 this.setIconVisible(this.canvasData.hiddenBasicInfoFacilities, false); - this.backgroundImage.visible = true; } /** * 考官点击楼层 */ public async onExaminerClickFloor() { - this.backgroundImage.visible = false; - 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; - this.backgroundImage.texture = await PIXI.Texture.fromURL(this.canvasData.selectStorey.imageUrl); - this.backgroundImage.angle = this.canvasData.selectStorey.imageAngle; - // 等待图片加载完成 - let imageWidth = this.backgroundImage.texture.width; - let imageHeight = this.backgroundImage.texture.height; - let appWidth = this.app.view.width - 470; - let appHeight = this.app.view.height; - let wScale = appWidth / imageWidth; - let hScale = appHeight / imageHeight; - let scale = wScale < hScale ? wScale : hScale; - // 设置图片缩放 - this.backgroundImage.scale.set(scale); + await this.refreshBackgroundImage(); // 清空所有图形 this.selection.deselectAll(); let itemList = []; @@ -1383,7 +1335,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.createNodeShape(this.canvasData.selectPanelPoint.Data); // 隐藏图标 this.setIconVisible(this.canvasData.hiddenBasicInfoFacilities, false); - this.backgroundImage.visible = true; } } From bb568965f79550fb76d303af88ad5745ca8e5b06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E6=8C=AF=E5=8D=87?= <359059686@qq.com> Date: Sat, 9 Jan 2021 10:29:43 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=89=88=E6=9C=AC1.0.3.2?= =?UTF-8?q?0210109b?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../working-area/model/axArrowConnector.ts | 10 +++++++- src/app/working-area/model/axImageShape.ts | 4 +++- src/app/working-area/model/axLegend.ts | 22 ++++++++++------- .../working-area/model/axPreviewImageShape.ts | 3 +++ src/app/working-area/model/multipointIcon.ts | 6 +++-- src/app/working-area/model/polygonIcon.ts | 4 +++- .../working-area/working-area.component.ts | 24 +++++++++---------- 7 files changed, 47 insertions(+), 26 deletions(-) diff --git a/src/app/working-area/model/axArrowConnector.ts b/src/app/working-area/model/axArrowConnector.ts index 68b2828..6ed0dd9 100644 --- a/src/app/working-area/model/axArrowConnector.ts +++ b/src/app/working-area/model/axArrowConnector.ts @@ -2,6 +2,7 @@ import { WorkingAreaComponent } from '../working-area.component'; import * as PIXI from 'pixi.js'; import { AxShape } from './axShape'; import { Sprite } from 'pixi.js'; +import { GameMode } from './gameMode'; /** * 连接箭头 @@ -50,6 +51,7 @@ export class AxArrowConnector extends AxShape { this.sortableChildren = true; this.text.zIndex = this.children.length; this.text.visible = this.showName; + this.text.angle = -this.workingArea.backgroundImage.angle; } public drawPoints() { @@ -115,11 +117,16 @@ export class AxArrowConnector extends AxShape { } // 设置缩放 public setItemScale(scale: number) { - this.text.scale.set(scale); + // this.text.scale.set(scale); this.pointSprites.forEach(point => { point.scale.set(scale); }); } + public setNameVisible(value: boolean, mode: GameMode) { + if (this.assetData.GameMode === mode) { + this.text.visible = value; + } + } /** * 刷新形状 */ @@ -359,6 +366,7 @@ export class AxArrowConnector extends AxShape { // c.end(); // } // } + this.text.angle = -this.workingArea.backgroundImage.angle; } paintMarker(c: PIXI.Graphics, ptX: number, ptY: number, nx: number, ny: number, size: number, arrowWidth: number, edgeWidth: number, spacing: number, initialMove: boolean) { diff --git a/src/app/working-area/model/axImageShape.ts b/src/app/working-area/model/axImageShape.ts index f496619..d12ae3c 100644 --- a/src/app/working-area/model/axImageShape.ts +++ b/src/app/working-area/model/axImageShape.ts @@ -50,6 +50,7 @@ export class AxImageShape extends AxShape { downRight: PIXI.Sprite; constructor(assetData: any, workingArea: WorkingAreaComponent) { super(assetData, workingArea); + this.angle = -this.workingArea.backgroundImage.angle; this.x = this.assetData.Point.x; this.y = this.assetData.Point.y; this.name = this.assetData.Id; @@ -185,7 +186,7 @@ export class AxImageShape extends AxShape { if (this.assetData.FixedSize) { this.scale.set(scale); } else { - this.text.scale.set(scale); + // this.text.scale.set(scale); this.upLeft.scale.set(scale); this.upRight.scale.set(scale); this.downLeft.scale.set(scale); @@ -265,5 +266,6 @@ export class AxImageShape extends AxShape { + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue; this.text.x = this.image.x; this.text.y = this.image.y - this.image.height / 2; + this.angle = -this.workingArea.backgroundImage.angle; } } diff --git a/src/app/working-area/model/axLegend.ts b/src/app/working-area/model/axLegend.ts index af86e70..55359cf 100644 --- a/src/app/working-area/model/axLegend.ts +++ b/src/app/working-area/model/axLegend.ts @@ -15,6 +15,7 @@ export class AxLegend extends AxShape { */ constructor(assetData: any, workingArea: WorkingAreaComponent,shapeMap:Map) { super(assetData, workingArea); + this.angle = -this.workingArea.backgroundImage.angle; this.name = this.assetData.Id; this.shapeMap = shapeMap; this.refresh(); @@ -42,15 +43,15 @@ export class AxLegend extends AxShape { refresh() { this.removeChildren(); let index = 1; - let offset = 50; + let offset = 25; let number = 2; - let width = 450; - let height = 100; + let width = 300; + let height = 50; for (let i = 0; i < number; i++){ if (i >= this.shapeMap.size) break; let x = width * i; var textImage = new Text('图例',{ - fontSize: 36, + fontSize: 20, fill: ['#0000ff'], }); textImage.anchor.set(0.5) @@ -59,7 +60,7 @@ export class AxLegend extends AxShape { this.addChild(textImage); var textName = new Text("名称"+' 【数量】',{ - fontSize: 36, + fontSize: 20, fill: ['#0000ff'], }); textName.anchor.set(0,0.5); @@ -71,14 +72,16 @@ export class AxLegend extends AxShape { let x = index % number === 0 ? (number -1) * width : (index % number - 1) * width; let y = Math.ceil(index / number) * height; let image: Sprite = Sprite.from(item.ImageUrl); - image.width = 64; - image.height = 64; + image.width = 32; + image.height = 32; image.anchor.set(0.5); image.x = x; image.y = y; this.addChild(image); - var textName = new Text(item.Name+' 【'+item.Count.toString()+'】'); + var textName = new Text(item.Name+' 【'+item.Count.toString()+'】',{ + fontSize: 20, + }); textName.anchor.set(0,0.5); textName.x = x + image.width/2 + offset; textName.y = y; @@ -89,7 +92,7 @@ export class AxLegend extends AxShape { let rect = this.getLocalBounds(); this.pen.clear(); this.pen.beginFill(0xffffff,0.01); - this.pen.lineStyle(5, 0x000000); + this.pen.lineStyle(3, 0x000000); this.pen.moveTo(rect.left-offset, rect.top-offset); this.pen.lineTo(rect.right+offset, rect.top-offset); this.pen.lineTo(rect.right+offset, rect.bottom+offset); @@ -98,6 +101,7 @@ export class AxLegend extends AxShape { this.pen.endFill(); } this.addChild(this.pen); + this.angle = -this.workingArea.backgroundImage.angle; } } diff --git a/src/app/working-area/model/axPreviewImageShape.ts b/src/app/working-area/model/axPreviewImageShape.ts index 8d0cd5d..7f66812 100644 --- a/src/app/working-area/model/axPreviewImageShape.ts +++ b/src/app/working-area/model/axPreviewImageShape.ts @@ -33,4 +33,7 @@ export class AxPreviewImageShape extends AxShape { */ public drawBorder(scale: number) { } + public refresh() { + this.angle = -this.workingArea.backgroundImage.angle; + } } diff --git a/src/app/working-area/model/multipointIcon.ts b/src/app/working-area/model/multipointIcon.ts index 2416956..395afd1 100644 --- a/src/app/working-area/model/multipointIcon.ts +++ b/src/app/working-area/model/multipointIcon.ts @@ -36,7 +36,7 @@ export class MultipointIcon extends AxShape { * @param points 点集合 */ constructor(assetData: any,workingArea: WorkingAreaComponent) { - super(assetData,workingArea); + super(assetData, workingArea); this.name = this.assetData.Id; this.pointsData = this.assetData.MultiPoint; this.x = this.assetData.Point.x; @@ -46,6 +46,7 @@ export class MultipointIcon extends AxShape { this.text.anchor.set(0.5,0.5); // this.text.position = this.getLineCenter(this.pointsData[0], this.pointsData[1]); this.text.visible = this.showName; + this.text.angle = -this.workingArea.backgroundImage.angle; this.addChild(this.text); // 画线图标 for (let i = 0, count = this.pointsData.length - 1; i < count; i++) { @@ -184,7 +185,7 @@ export class MultipointIcon extends AxShape { } // 设置缩放 public setItemScale(scale: number) { - this.text.scale.set(scale); + // this.text.scale.set(scale); this.pointsGraphics.forEach((item, index, array) => { item.scale.set(scale); }); @@ -198,5 +199,6 @@ export class MultipointIcon extends AxShape { this.text.text = this.assetData.Name + '\r\n' + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue; + this.text.angle = -this.workingArea.backgroundImage.angle; } } diff --git a/src/app/working-area/model/polygonIcon.ts b/src/app/working-area/model/polygonIcon.ts index 1bf4f42..2494748 100644 --- a/src/app/working-area/model/polygonIcon.ts +++ b/src/app/working-area/model/polygonIcon.ts @@ -75,6 +75,7 @@ export class PolygonIcon extends AxShape { this.text.anchor.set(0.5); this.text.position = this.calculatePolygonGravityCenter(this.pointsData); this.text.visible = this.showName; + this.text.angle = -this.workingArea.backgroundImage.angle; // console.log(this.calculatePolygonGravityCenter(this.pointsData)); this.polygonGraphics.addChild(this.text); // 添加圆点事件 @@ -156,7 +157,7 @@ export class PolygonIcon extends AxShape { } // 设置缩放 public setItemScale(scale: number) { - this.text.scale.set(scale); + // this.text.scale.set(scale); this.pointsGraphics.forEach(point => { point.scale.set(scale); }); @@ -194,5 +195,6 @@ export class PolygonIcon extends AxShape { this.polygonGraphics.beginFill(color, angle); this.polygonGraphics.drawPolygon(this.getPoints()); this.polygonGraphics.endFill(); + this.text.angle = -this.workingArea.backgroundImage.angle; } } diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index 1547755..95a6f56 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -141,7 +141,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV // Beta版: 该版本相对于α版已有了很大的改进，消除了严重的错误，但还是存在着一些缺陷，需要经过多次测试来进一步消除，此版本主要的修改对像是软件的UI。 // RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。 // Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。 - public VERSION = '1.0.1.20210108_beta'; + public VERSION = '1.0.3.20210109_beta'; /** * 数据初始化 */ @@ -442,6 +442,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV item.setNameVisible(value, mode); } else if (item instanceof PolygonIcon) { item.setNameVisible(value, mode); + } else if (item instanceof AxArrowConnector) { + item.setNameVisible(value, mode); } }); } @@ -491,17 +493,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.selection.select(obj); }); } - // /** - // * 创建背景图 - // */ - // public createBackground(imageUrl:string,imageAngle:number) { - // if (this.backgroundImage !== null) { - // this.backgroundImage.destroy(); - // this.backgroundImage = null; - // } - // this.createBackgroundImage() - // this.refreshBackgroundImage(imageUrl,imageAngle); - // } /** * 创建楼层图形 */ @@ -605,6 +596,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.backgroundImage.sortableChildren = true; this.backgroundImage .on('pointerdown', event => { + if (event.data.button !== 0) return; if (!event.currentTarget.dragging && this.selection.isMultiselection === false) { this.selection.deselectAll(); event.currentTarget.data = event.data; @@ -662,6 +654,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV if (this.paintPoints.length >= 2) { this.enterPaintEndButton.position = this.circleShadow.position; this.enterPaintEndButton.visible = true; + this.enterPaintEndButton.zIndex = this.backgroundImage.children.length; } if (this.paintingIcon !== null) { @@ -719,6 +712,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.enterPaintEndButton.position = this.circleShadow.position; } else if (this.paintPoints.length >= 3) { this.enterPaintEndButton.visible = true; + this.enterPaintEndButton.zIndex = this.backgroundImage.children.length; } this.paintPoints.forEach((value, index, array) => { if (index === 0) { @@ -747,6 +741,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.previewLineSegment.visible = true; this.enterPaintEndButton.position = this.circleShadow.position; this.enterPaintEndButton.visible = true; + this.enterPaintEndButton.zIndex = this.backgroundImage.children.length; this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); if (this.paintPoints.length < 2) { @@ -908,6 +903,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV // 设置图片缩放 this.backgroundImage.scale.set(scale); this.backgroundImage.visible = true; + this.backgroundImage.children.forEach((item) => { + if (item instanceof AxShape) { + item.refresh(); + } + }) } } /** From 45f57ef5f2380187df6aafac8e312abe3cd47e63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E6=8C=AF=E5=8D=87?= <359059686@qq.com> Date: Sat, 9 Jan 2021 11:58:00 +0800 Subject: [PATCH 4/4] 1.0.4.20210109b --- src/app/working-area/model/axLegend.ts | 2 +- .../working-area/working-area.component.ts | 25 ++++++++++++++++--- 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/src/app/working-area/model/axLegend.ts b/src/app/working-area/model/axLegend.ts index 55359cf..55f4d8f 100644 --- a/src/app/working-area/model/axLegend.ts +++ b/src/app/working-area/model/axLegend.ts @@ -44,7 +44,7 @@ export class AxLegend extends AxShape { this.removeChildren(); let index = 1; let offset = 25; - let number = 2; + let number = this.assetData.PropertyInfos[0].PropertyValue; let width = 300; let height = 50; for (let i = 0; i < number; i++){ diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index 95a6f56..3e4d492 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -141,7 +141,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV // Beta版: 该版本相对于α版已有了很大的改进，消除了严重的错误，但还是存在着一些缺陷，需要经过多次测试来进一步消除，此版本主要的修改对像是软件的UI。 // RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。 // Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。 - public VERSION = '1.0.3.20210109_beta'; + public VERSION = '1.0.4.20210109_beta'; /** * 数据初始化 */ @@ -353,7 +353,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV /** * 创建图标事件（数据处理） */ - this.on('createIcon', (axShape:AxShape)=> { + 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; @@ -383,6 +384,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV var itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1); temp.addItem(itemLegend); } + this.emit('canvasDataChanged'); this.canvasData.isChange = true; }); /** @@ -420,6 +422,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV } this.backgroundImage.removeChild(axShape); + this.emit('canvasDataChanged'); this.canvasData.isChange = true; }); } @@ -462,6 +465,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV icon.refresh(); } else if (icon instanceof AxArrowConnector) { icon.redraw(); + } else if (icon instanceof AxLegend) { + icon.refresh(); } } /** @@ -945,7 +950,21 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV const tempAssetData = { Id: "图例",//ObjectID.default.generate() Color: "#066EED80", - PropertyInfos:[] + PropertyInfos: [ + { + Tag : '', + Order : 0, + Enabled : true, + Visible : true, + Required : false, + RuleName : "", + RuleValue : "", + PhysicalUnit : "", + PropertyName : "列", + PropertyType : 2, + PropertyValue : 2, + }, + ] }; let shapeMap: Map = new Map();