diff --git a/src/app/working-area/model/axArrowConnector.ts b/src/app/working-area/model/axArrowConnector.ts index 6ed0dd9..6bd8b3f 100644 --- a/src/app/working-area/model/axArrowConnector.ts +++ b/src/app/working-area/model/axArrowConnector.ts @@ -9,7 +9,7 @@ import { GameMode } from './gameMode'; */ export class AxArrowConnector extends AxShape { pointSprites: Array = new Array(); - line: PIXI.Graphics; + tempLine: PIXI.Graphics; text: PIXI.Text; style = new PIXI.TextStyle({ fontFamily: 'Arial', @@ -29,9 +29,9 @@ export class AxArrowConnector extends AxShape { }); pts: PIXI.Point[]; - markerStart = true;// 是否绘制起始箭头 - markerEnd = true;// 是否绘制结束箭头 - constructor(assetData: any, workingArea: WorkingAreaComponent,markerStart: boolean,markerEnd:boolean) { + markerStart = true; // 是否绘制起始箭头 + markerEnd = true; // 是否绘制结束箭头 + constructor(assetData: any, workingArea: WorkingAreaComponent, markerStart: boolean, markerEnd: boolean) { super(assetData, workingArea); this.markerStart = markerStart; @@ -42,21 +42,21 @@ export class AxArrowConnector extends AxShape { + '\r\n' + this.assetData.PropertyInfos?.find((item: { PropertyName: string; }) => item.PropertyName === '名称/编号')?.PropertyValue, this.style); - this.line = new PIXI.Graphics(); + this.tempLine = new PIXI.Graphics(); this.addChild(this.text); - this.addChild(this.line); + this.addChild(this.tempLine); this.workingArea.backgroundImage.addChild(this); this.refresh(); this.drawPoints(); this.sortableChildren = true; this.text.zIndex = this.children.length; this.text.visible = this.showName; - this.text.angle = -this.workingArea.backgroundImage.angle; + this.text.angle = -this.workingArea.backgroundImage.angle; } public drawPoints() { this.assetData.MultiPoint.forEach(element => { - var point = new Sprite(this.pointTexture); + const point = new Sprite(this.pointTexture); point.position = element; point.anchor.set(0.5); this.pointSprites.push(point); @@ -67,7 +67,7 @@ export class AxArrowConnector extends AxShape { value .on('pointerdown', event => { event.stopPropagation(); - if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { + if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { event.currentTarget.data = event.data; event.currentTarget.alpha = 0.5; event.currentTarget.dragging = true; @@ -102,7 +102,7 @@ export class AxArrowConnector extends AxShape { }) .on('rightclick', event => { }); - }) + }); this.setPointVisiable(false); } @@ -110,10 +110,10 @@ export class AxArrowConnector extends AxShape { * 设置点显示状态 * @param b true/false */ - public setPointVisiable(b:boolean) { + public setPointVisiable(b: boolean) { this.pointSprites.forEach(item => { item.visible = b; - }) + }); } // 设置缩放 public setItemScale(scale: number) { @@ -121,17 +121,28 @@ export class AxArrowConnector extends AxShape { this.pointSprites.forEach(point => { point.scale.set(scale); }); + this.refresh(); } public setNameVisible(value: boolean, mode: GameMode) { if (this.assetData.GameMode === mode) { this.text.visible = value; } } + /** + * + * @param scale 绘制边框 + */ + public drawBorder(scale: number) { + const visible = this.pointSprites[0].visible; + this.setPointVisiable(false); + super.drawBorder(scale); + this.setPointVisiable(visible); + } /** * 刷新形状 */ public refresh(): void { - const c = this.line; + const c = this.tempLine; const pts = this.assetData.MultiPoint; if (pts.length < 2) { return; @@ -142,17 +153,22 @@ export class AxArrowConnector extends AxShape { + '\r\n' + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue; const strokeWidth = 1; - const startWidth = 30 + strokeWidth; - const endWidth = 30 + strokeWidth; - const edgeWidth = this.assetData.Thickness === 0 ? 10 : this.assetData.Thickness; // 宽度 + + const edgeWidth = this.assetData.Thickness === 0 ? 1 : this.assetData.Thickness; // 宽度 + + const startWidth = edgeWidth * 2 + strokeWidth; + const endWidth = edgeWidth * 2 + strokeWidth; + const openEnded = false; const spacing = (openEnded) ? 0 : 0 + strokeWidth / 2; - const startSize = 30 + strokeWidth; - const endSize = 30 + strokeWidth; + + const startSize = edgeWidth * 2 + strokeWidth; + const endSize = edgeWidth * 2 + strokeWidth; + const isRounded = true; const lineColor = 0x000000; - const fillColor: number = this.assetData.Color.substring(0, 7).replace('#', '0x');; + const fillColor: number = this.assetData.Color.substring(0, 7).replace('#', '0x'); const pe = pts[pts.length - 1]; @@ -190,8 +206,8 @@ export class AxArrowConnector extends AxShape { // } // c.lineStyle(1, 0x000000, 1); c.clear(); - c.lineTextureStyle({ width: 1, color: lineColor, join: PIXI.LINE_JOIN.ROUND }); - + c.lineTextureStyle({ width: 1 / this.workingArea.backgroundImage.scale.x, color: lineColor, join: PIXI.LINE_JOIN.ROUND }); + const startNx = nx; const startNy = ny; if (!openEnded) { @@ -328,12 +344,9 @@ export class AxArrowConnector extends AxShape { fns[i](); } - if (openEnded) - { + if (openEnded) { c.closePath(); - } - else - { + } else { c.closePath(); c.endFill(); } @@ -410,10 +423,10 @@ export class AxArrowConnector extends AxShape { return (ccw < 0.0) ? -1 : ((ccw > 0.0) ? 1 : 0); } - redraw(): void{ + redraw(): void { this.pointSprites.forEach(item => { item.destroy(); - }) + }); this.pointSprites.splice(0, this.pointSprites.length); this.refresh(); this.drawPoints(); diff --git a/src/app/working-area/model/axGrid.ts b/src/app/working-area/model/axGrid.ts new file mode 100644 index 0000000..348c709 --- /dev/null +++ b/src/app/working-area/model/axGrid.ts @@ -0,0 +1,259 @@ +import * as PIXI from 'pixi.js'; + +const DEFAULT_LINE_STYLE = { + width: 1, + color: 0xffffff, + alpha: 1, + alignment: 0.5, + native: true, +}; + +/** + * @description 在屏幕上绘制网格的实用程序类。 + * @extends PIXI.Graphics + */ +export class AxGrid extends PIXI.Graphics { + private _cellSize: number; + private _correctedWidth: number; + private _gridWidth: number; + private _useCorrectedWidth: boolean; + private _drawBoundaries: any; + private _amtLines: any; + /** + * @param {number} cellSize 默认值:网格边长的平方根 + */ + set cellSize(cellSize) { + this._cellSize = cellSize || Math.sqrt(this._correctedWidth); + } + + get cellSize() { + return this._cellSize; + } + + /** + * 网格边等距线的数量 + */ + get amtLines() { + return Math.floor(this.gridWidth / this.cellSize); + } + + /** + * 由' width '构造函数参数给出的网格的请求宽度。 + */ + get originalWidth() { + return this._gridWidth; + } + + /** + * 修正后的网格宽度，即大于最小平方根的数 + * 修正后的宽度。 + */ + get correctedWidth() { + return this._correctedWidth; + } + + get useCorrectedWidth() { + return this._useCorrectedWidth; + } + + /** + * 网格中每个角落的坐标。 + * @returns {{ x1: number, y1: number, x2: number, y2: number}} + * 最左边(**x1**)，最上面(**y1**)，最右边(**x2**)和最下面(**y2**)的坐标。 + */ + get bounds() { + return { + x1: this.x, + y1: this.y, + x2: this.x + this._correctedWidth, + y2: this.y + this._correctedWidth, + }; + } + + set drawBoundaries(drawBoundaries) { + this._drawBoundaries = drawBoundaries; + } + + get drawBoundaries() { + return this._drawBoundaries; + } + + /** + * 网格的实际宽度。 + * 当' cellSize '不是默认值时，网格的宽度将为 + * 在' width '构造函数中给出的宽度。否则，就是修改后的宽度。 + */ + get gridWidth() { + if (!this.useCorrectedWidth) { return this._gridWidth; } + return Math.abs(this.cellSize - Math.sqrt(this._correctedWidth)) <= 1e-6 ? this._correctedWidth : this._gridWidth; + } + + /** + * + * @param {number} width number. Required. + * + * The target sidelength of the grid. It is best for `width` to be a perfect square (i.e., 2, 4, 9, 16, 25, etc.). If + * not and the parameter `useCorrectedWidth` is set to **false**, then the grid will use a corrected width, + * which is the smallest perfect square greater than `width`. + * + * @param {number} cellSize number, null. Optional, default: square root of corrected width + * + * The size of each cell in the grid. + * If the value is **null**, the grid will use the default value. + * + * @param {{ width: number, color: number, alpha: number, alignment: number, native: boolean }}. Object. Optional. + * + * default: + * **{ + * width: 1, + * color: 0xffffff, + * alpha: 1, + * alignment: 0.5, + * native: true + * }** + * + * Configuration for the line style on the object. See documentation on `PIXI.Graphics` for more on the `LineStyle` class. + * + * @param {boolean} useCorrectedWidth boolean. Optional. default: **true** + * If **true**, the grid will use the smallest perfect square greater than `width`. + * Otherwise, the grid will use the exact value given by `width`. + * + * @param {boolean} drawBoundaries boolean. Optional. default: **true** + * If **true**, the grid will draw its boundaries. + * Otherwise, the grid will not draw its boundaries. Mouse pointer detection is not affected. + */ + constructor( + width, + cellSize= null, + lineConfig = null, + useCorrectedWidth = true, + drawBoundaries = true, + ) { + super(); + + this._cellSize = null; + this._amtLines = null; + + this._gridWidth = width; + this._useCorrectedWidth = useCorrectedWidth; + this._correctedWidth = null; + this._correctWidth(); + + this._drawBoundaries = drawBoundaries; + + this.cellSize = cellSize; + + const lConfig = { ...DEFAULT_LINE_STYLE, ...(lineConfig || {} )}; + this.lineStyle( + lConfig.width, + lConfig.color, + lConfig.alpha, + lConfig.alignment, + lConfig.native + ); + + // handle mouse move + this.interactive = true; + this.on('mousemove', (evt) => { + const mouseCoords = evt.data.getLocalPosition(evt.currentTarget.parent); + // 检查鼠标是否在此网格的范围内。如果不是，那就什么都不做。 + if ( + mouseCoords.x >= this.bounds.x1 && + mouseCoords.x <= this.bounds.x2 && + mouseCoords.y >= this.bounds.y1 && + mouseCoords.y <= this.bounds.y2 + ) { + const gridCoords = this.getCellCoordinates(mouseCoords.x, mouseCoords.y); + this.onMousemove(evt, gridCoords); + } + }); + } + + /** + * 绘制网格 + */ + drawGrid() { + this.clearGrid(true); + for (let i = (this._drawBoundaries ? 0 : 1); i <= this.amtLines - (this._drawBoundaries ? 0 : 1); i += 1) { + const startCoord = i * this._cellSize; + + // 画列 + this.moveTo(startCoord, 0); + this.lineTo(startCoord, this._correctedWidth); + + // 画行 + this.moveTo(0, startCoord); + this.lineTo(this._correctedWidth, startCoord); + } + this.endFill(); + + return this; + } + + /** + * 清除网格 + * + * @param {boolean} retainLineStyle 可选，默认：true + * + * 当**true**时，线条样式对象的配置将被保留。 + * 否则，对象的行样式将恢复为' PIXI '指定的默认值。图形的对象。 + */ + clearGrid(retainLineStyle = true) { + const { width, alignment, color, alpha, native } = this.line; + this.clear(); + + if (!retainLineStyle) { return; } + this.lineStyle(width, color, alpha, alignment, native); + + return this; + } + + /** + * Transforms global coordinates to grid coordinates. + * @param {number} x + * The global X coordinate. + * + * @param {number} y + * The global Y coordinate. + */ + getCellCoordinates(x, y) { + return { + x: Math.floor((x - this.bounds.x1) / this.cellSize), + y: Math.floor((y - this.bounds.y1) / this.cellSize), + }; + } + + /** + * 检测到mousemove事件后触发的回调。 + * + * @param {PIXI.InteractionData} evt + * 'PIXI.InteractionData '事件 + * + * @param {{x: number, y: number}} gridCoords + * 网格坐标 + */ + onMousemove(evt, gridCoords) { + + } + + // 计算修正后的宽度。如果`useCorrectedWidth`构造函数参数设置为**false**， + // 然后，它简单地保持“width”的给定值作为修正后的宽度。 + _correctWidth() { + if (!this._useCorrectedWidth) { + this._correctedWidth = this._gridWidth; + } + + this._correctedWidth = Math.ceil(Math.sqrt(this._gridWidth)) ** 2; + } + + // 计算修正后的宽度。如果`useCorrectedWidth`构造函数参数设置为**false**， + // 然后，它简单地保持“width”的给定值作为修正后的宽度。 + correctWidth(width: number) { + if (!this._useCorrectedWidth) { + this._correctedWidth = width; + } + + this._correctedWidth = Math.ceil(Math.sqrt(width)) ** 2; + this.cellSize = null; + } +} diff --git a/src/app/working-area/model/axImageShape.ts b/src/app/working-area/model/axImageShape.ts index d12ae3c..2a91bd1 100644 --- a/src/app/working-area/model/axImageShape.ts +++ b/src/app/working-area/model/axImageShape.ts @@ -13,7 +13,7 @@ import { AxArrowConnector } from './axArrowConnector'; * AxImageShape */ export class AxImageShape extends AxShape { - connectPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png'); + // connectPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png'); style = new PIXI.TextStyle({ fontFamily: 'Arial', fontSize: 18, @@ -100,55 +100,55 @@ export class AxImageShape extends AxShape { - if (this.assetData.CanConnect) { - // connectPoint - this.connectPoint = new PIXI.Sprite(this.connectPointTexture); - this.connectPoint.anchor.set(0.5); - this.connectPoint.x = this.image.x; - this.connectPoint.y = this.image.y; - this.addChild(this.connectPoint); - this.connectPoint.interactive = true; - this.connectPoint - .on('pointerdown', event => { - event.stopPropagation(); - this.paintingPipeline(this.x, this.y); - }) - .on('pointerover', event => { - this.setSelectionBox(true, this.connectPoint); - }) - .on('pointerout', event => { - this.setSelectionBox(false); - }); - this.showConnectionPoint(false); - } + // if (this.assetData.CanConnect) { + // // connectPoint + // this.connectPoint = new PIXI.Sprite(this.connectPointTexture); + // this.connectPoint.anchor.set(0.5); + // this.connectPoint.x = this.image.x; + // this.connectPoint.y = this.image.y; + // this.addChild(this.connectPoint); + // this.connectPoint.interactive = true; + // this.connectPoint + // .on('pointerdown', event => { + // event.stopPropagation(); + // // this.paintingPipeline(this.x, this.y); + // }) + // .on('pointerover', event => { + // this.setSelectionBox(true, this.connectPoint); + // }) + // .on('pointerout', event => { + // this.setSelectionBox(false); + // }); + // // this.showConnectionPoint(false); + // } this.setItemScale(1 / this.workingArea.backgroundImage.scale.x); } - // 设置选择框 - public setSelectionBox(b: boolean, sprite?: PIXI.Sprite) { - if (b) { - this.selectionBox.lineStyle(2, 0x00EB00, 1); - this.selectionBox.position = sprite.position; - this.selectionBox.drawRect(- sprite.width / 2, - sprite.height / 2, sprite.width, sprite.height); - } else { - this.selectionBox.clear(); - } - } + // // 设置选择框 + // public setSelectionBox(b: boolean, sprite?: PIXI.Sprite) { + // if (b) { + // this.selectionBox.lineStyle(2, 0x00EB00, 1); + // this.selectionBox.position = sprite.position; + // this.selectionBox.drawRect(- sprite.width / 2, - sprite.height / 2, sprite.width, sprite.height); + // } else { + // this.selectionBox.clear(); + // } + // } // 设置名称 public setNameVisible(value: boolean, mode: GameMode) { if (this.assetData.GameMode === mode) { this.text.visible = value; } } - // 显示连接点 - public showConnectionPoint(b: boolean) { - this.connectPoint.visible = b; - } + // // 显示连接点 + // public showConnectionPoint(b: boolean) { + // this.connectPoint.visible = b; + // } /** * 设置点显示状态 * @param value 显示状态 */ public setPointVisiable(value: boolean) { - let rect = this.getLocalBounds(); + const rect = this.getLocalBounds(); this.upLeft.x = rect.left; this.upLeft.y = rect.top; this.upRight.x = rect.right; @@ -163,15 +163,15 @@ export class AxImageShape extends AxShape { this.downRight.visible = value; } /** - * + * * @param scale 绘制边框 */ public drawBorder(scale: number) { - let visible = this.upLeft.visible; + const visible = this.upLeft.visible; this.setPointVisiable(false); - + super.drawBorder(scale); - let rect = this.getLocalBounds(); + const rect = this.getLocalBounds(); this.upLeft.x = rect.left; this.upLeft.y = rect.top; this.upRight.x = rect.right; @@ -193,66 +193,66 @@ export class AxImageShape extends AxShape { this.downRight.scale.set(scale); } } - paintingPipeline(x: number, y: number) { - if (this.assetData.CanConnect) { - if (this.workingArea.getPaintMode() === PaintMode.Pipeline) { - if (this.workingArea.paintingShape === null) { - this.workingArea.previewLineSegment.visible = true; - this.workingArea.currentClickPoint.position = - new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y); - this.workingArea.paintPoints.push(new PIXI.Point(x, y)); - const json = JSON.parse(JSON.stringify(this.workingArea.canvasData.selectTemplateData.propertyInfos)); - const list = []; - json.forEach(element => { - const property = new PropertyInfo(element); - list.push(property); - }); - const tempData = { - TemplateId: this.workingArea.canvasData.selectTemplateData.id, - CanConnect: this.workingArea.canvasData.selectTemplateData.canConnect, - Pipelines: new Array(), - FloorId: this.workingArea.canvasData.selectStorey.id, - Angle: this.workingArea.canvasData.selectTemplateData.angle, - Color: this.workingArea.canvasData.selectTemplateData.color, - Enabled: this.workingArea.canvasData.selectTemplateData.enabled, - FillMode: this.workingArea.canvasData.selectTemplateData.fillMode, - FireElementId: this.workingArea.canvasData.selectTemplateData.fireElementId, - FixedSize: this.workingArea.canvasData.selectTemplateData.fixedSize, - Height : 32, - Width : 32, - Id: ObjectID.default.generate(), - ImageUrl: this.workingArea.canvasData.selectTemplateData.imageUrl, - InteractiveMode: this.workingArea.canvasData.selectTemplateData.interactiveMode, - MultiPoint : JSON.parse(JSON.stringify(this.workingArea.paintPoints)), - Point: new PIXI.Point(0, 0), - Name : this.workingArea.canvasData.selectTemplateData.name, - PropertyInfos: list, - Border : this.workingArea.canvasData.selectTemplateData.border, - DrawMode : this.workingArea.canvasData.selectTemplateData.drawMode, - Thickness : this.workingArea.canvasData.selectTemplateData.thickness, - IsFromBuilding : this.workingArea.canvasData.selectTemplateData.isFromBuilding, - GameMode: this.workingArea.canvasData.gameMode, - LinkedObjects: new Array(this.assetData.Id), - Tag: this.workingArea.canvasData.selectTemplateData.tag - }; - this.workingArea.paintingShape = new AxArrowConnector(tempData, this.workingArea,false,true); - this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id); - this.workingArea.emit('createIcon', this.workingArea.paintingShape); - } else { - this.workingArea.previewLineSegment.visible = false; - this.workingArea.currentClickPoint.position = - new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y); - this.workingArea.paintPoints.push(new PIXI.Point(x, y)); - this.workingArea.paintingShape.assetData.MultiPoint = - JSON.parse(JSON.stringify(this.workingArea.paintPoints)); - this.workingArea.paintingShape.assetData.LinkedObjects.push(this.assetData.Id); - this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id); - this.workingArea.paintingShape.redraw(); - this.workingArea.initPipelineData(); - } - } - } - } + // paintingPipeline(x: number, y: number) { + // if (this.assetData.CanConnect) { + // if (this.workingArea.getPaintMode() === PaintMode.Pipeline) { + // if (this.workingArea.paintingShape === null) { + // this.workingArea.previewLineSegment.visible = true; + // this.workingArea.currentClickPoint.position = + // new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y); + // this.workingArea.paintPoints.push(new PIXI.Point(x, y)); + // const json = JSON.parse(JSON.stringify(this.workingArea.canvasData.selectTemplateData.propertyInfos)); + // const list = []; + // json.forEach(element => { + // const property = new PropertyInfo(element); + // list.push(property); + // }); + // const tempData = { + // TemplateId: this.workingArea.canvasData.selectTemplateData.id, + // CanConnect: this.workingArea.canvasData.selectTemplateData.canConnect, + // Pipelines: new Array(), + // FloorId: this.workingArea.canvasData.selectStorey.id, + // Angle: this.workingArea.canvasData.selectTemplateData.angle, + // Color: this.workingArea.canvasData.selectTemplateData.color, + // Enabled: this.workingArea.canvasData.selectTemplateData.enabled, + // FillMode: this.workingArea.canvasData.selectTemplateData.fillMode, + // FireElementId: this.workingArea.canvasData.selectTemplateData.fireElementId, + // FixedSize: this.workingArea.canvasData.selectTemplateData.fixedSize, + // Height : 32, + // Width : 32, + // Id: ObjectID.default.generate(), + // ImageUrl: this.workingArea.canvasData.selectTemplateData.imageUrl, + // InteractiveMode: this.workingArea.canvasData.selectTemplateData.interactiveMode, + // MultiPoint : JSON.parse(JSON.stringify(this.workingArea.paintPoints)), + // Point: new PIXI.Point(0, 0), + // Name : this.workingArea.canvasData.selectTemplateData.name, + // PropertyInfos: list, + // Border : this.workingArea.canvasData.selectTemplateData.border, + // DrawMode : this.workingArea.canvasData.selectTemplateData.drawMode, + // Thickness : this.workingArea.canvasData.selectTemplateData.thickness, + // IsFromBuilding : this.workingArea.canvasData.selectTemplateData.isFromBuilding, + // GameMode: this.workingArea.canvasData.gameMode, + // LinkedObjects: new Array(this.assetData.Id), + // Tag: this.workingArea.canvasData.selectTemplateData.tag + // }; + // this.workingArea.paintingShape = new AxArrowConnector(tempData, this.workingArea, false, true); + // this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id); + // this.workingArea.emit('createIcon', this.workingArea.paintingShape); + // } else { + // this.workingArea.previewLineSegment.visible = false; + // this.workingArea.currentClickPoint.position = + // new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y); + // this.workingArea.paintPoints.push(new PIXI.Point(x, y)); + // this.workingArea.paintingShape.assetData.MultiPoint = + // JSON.parse(JSON.stringify(this.workingArea.paintPoints)); + // this.workingArea.paintingShape.assetData.LinkedObjects.push(this.assetData.Id); + // this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id); + // this.workingArea.paintingShape.redraw(); + // this.workingArea.initPipelineData(); + // } + // } + // } + // } // 刷新 public refresh() { if (this.assetData.CanConnect) { diff --git a/src/app/working-area/model/axImageShapeTest.ts b/src/app/working-area/model/axImageShapeTest.ts new file mode 100644 index 0000000..81c141c --- /dev/null +++ b/src/app/working-area/model/axImageShapeTest.ts @@ -0,0 +1,11 @@ +import { AxRectangleShape } from "./axRectangleShape"; + +export class AxImageShapeTest extends AxRectangleShape{ + /** + * + */ + constructor(x:number,y:number,width:number,height:number) { + super(x,y,width,height); + + } +} \ No newline at end of file diff --git a/src/app/working-area/model/axLegend.ts b/src/app/working-area/model/axLegend.ts index 55f4d8f..a886fd3 100644 --- a/src/app/working-area/model/axLegend.ts +++ b/src/app/working-area/model/axLegend.ts @@ -1,5 +1,7 @@ import { Constructor } from '@angular/material/core/common-behaviors/constructor'; -import { Sprite, Texture,Text, Graphics, Point } from 'pixi.js'; +import { MatGridTileHeaderCssMatStyler } from '@angular/material/grid-list'; +import { DefaultProxy } from 'cesium'; +import { Sprite, Texture, Text, Graphics, Point } from 'pixi.js'; import { WorkingAreaComponent } from '../working-area.component'; import { AxShape } from './axShape'; @@ -8,20 +10,35 @@ import { AxShape } from './axShape'; */ export class AxLegend extends AxShape { // 数据 - public shapeMap: Map = new Map(); + public shapeMap: Map = new Map(); pen: Graphics = new Graphics(); + // up: Sprite = new Sprite(this.pointTexture); + // down: Sprite= new Sprite(this.pointTexture); + // left: Sprite= new Sprite(this.pointTexture); + // right: Sprite= new Sprite(this.pointTexture); + upLeft: Sprite = new Sprite(this.pointTexture); + upRight: Sprite = new Sprite(this.pointTexture); + downLeft: Sprite = new Sprite(this.pointTexture); + downRight: Sprite = new Sprite(this.pointTexture); /** * */ - constructor(assetData: any, workingArea: WorkingAreaComponent,shapeMap:Map) { + constructor(assetData: any, workingArea: WorkingAreaComponent, shapeMap: Map) { super(assetData, workingArea); this.angle = -this.workingArea.backgroundImage.angle; this.name = this.assetData.Id; + this.pivot.set(this.assetData.PivotX, this.assetData.PivotY); + this.x = this.assetData.Point.x; + this.y = this.assetData.Point.y; + this.scale.set(this.assetData.Scale); this.shapeMap = shapeMap; + this.createPoint(); this.refresh(); + this.sortableChildren = true; + this.pen.zIndex = -1; } // 添加数据 - public addItem(item:Legend) { + public addItem(item: Legend) { if (this.shapeMap.has(item.Name)) { this.shapeMap.get(item.Name).Count++; } else { @@ -43,35 +60,35 @@ export class AxLegend extends AxShape { refresh() { this.removeChildren(); let index = 1; - let offset = 25; + const offset = 25; let number = this.assetData.PropertyInfos[0].PropertyValue; - 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('图例',{ + const width = 300; + const height = 50; + for (let i = 0; i < number; i++) { + if (i >= this.shapeMap.size) { break; } + const x = width * i; + const textImage = new Text('图例', { fontSize: 20, - fill: ['#0000ff'], + fill: ['#0000ff'], }); - textImage.anchor.set(0.5) + textImage.anchor.set(0.5); textImage.x = x; textImage.y = 0; this.addChild(textImage); - var textName = new Text("名称"+' 【数量】',{ + const textName = new Text('名称' + ' 【数量】', { fontSize: 20, - fill: ['#0000ff'], + fill: ['#0000ff'], }); - textName.anchor.set(0,0.5); + 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); + for (const item of this.shapeMap.values()) { + const x = index % number === 0 ? (number - 1) * width : (index % number - 1) * width; + const y = Math.ceil(index / number) * height; + const image: Sprite = Sprite.from(item.ImageUrl); image.width = 32; image.height = 32; image.anchor.set(0.5); @@ -79,40 +96,364 @@ export class AxLegend extends AxShape { image.y = y; this.addChild(image); - var textName = new Text(item.Name+' 【'+item.Count.toString()+'】',{ + const textName = new Text(item.Name + ' 【' + item.Count.toString() + '】', { fontSize: 20, }); - textName.anchor.set(0,0.5); - textName.x = x + image.width/2 + offset; + 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(); + const rect = this.getLocalBounds(); this.pen.clear(); - this.pen.beginFill(0xffffff,0.01); + this.pen.beginFill(0xffffff, 1); 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); + 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); + // 添加border + this.addChild(this.border); + // 添加控制点 + this.addChild(this.upLeft); + this.addChild(this.upRight); + this.addChild(this.downLeft); + this.addChild(this.downRight); + + this.angle = -this.workingArea.backgroundImage.angle; + this.drawBorder(1 / this.workingArea.backgroundImage.scale.x); + } + public createPoint() { + // this.addChild(this.upLeft); + this.upLeft.anchor.set(0.5); + this.upLeft.interactive = true; + this.upLeft.visible = false; + this.upLeft + .on('pointerdown', event => { + event.stopPropagation(); + event.currentTarget.data = event.data; + event.currentTarget.alpha = 0.5; + event.currentTarget.dragging = true; + + event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); + + const pointStart = this.position; + const pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.downRight.position)); + + const delX = pointEnd.x - pointStart.x; + const delY = pointEnd.y - pointStart.y; + + this.pivot.set(this.downRight.x, this.downRight.y); + + this.position.x += delX; + this.position.y += delY; + + this.assetData.PivotX = this.pivot.x; + this.assetData.PivotY = this.pivot.y; + this.assetData.Point = new Point(this.x, this.y); + }) + .on('pointerup', event => { + if (event.currentTarget.dragging) { + event.currentTarget.alpha = 1; + event.currentTarget.dragging = false; + event.currentTarget.data = null; + } + }) + .on('pointerupoutside', event => { + if (event.currentTarget.dragging) { + event.currentTarget.alpha = 1; + event.currentTarget.dragging = false; + event.currentTarget.data = null; + } + }) + .on('pointermove', event => { + if (event.currentTarget.dragging) { + const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); + const startPos = this.position; + const endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition)); + const width = (endPos.x - startPos.x); + const height = (endPos.y - startPos.y); + const scaleX = width / (this.width / this.scale.x); + const scaleY = height / (this.width / this.scale.x); + const angle = Math.abs(this.angle); + console.log(angle); + if (angle === 0) { + this.scale.set(-scaleX); + } else if (angle === 90) { + this.scale.set(scaleY); + } else if (angle === 180) { + this.scale.set(scaleX); + } else if (angle === 270) { + this.scale.set(-scaleY); + } + this.assetData.Scale = this.scale.x; + } + }) + .on('rightclick', event => { + this.border.visible = false; + }); + // this.addChild(this.upRight); + this.upRight.anchor.set(0.5); + this.upRight.interactive = true; + this.upRight.visible = false; + this.upRight + .on('pointerdown', event => { + event.stopPropagation(); + event.currentTarget.data = event.data; + event.currentTarget.alpha = 0.5; + event.currentTarget.dragging = true; + + event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); + + const pointStart = this.position; + const pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.downLeft.position)); + + const delX = pointEnd.x - pointStart.x; + const delY = pointEnd.y - pointStart.y; + + this.pivot.set(this.downLeft.x, this.downLeft.y); + + this.position.x += delX; + this.position.y += delY; + + this.assetData.PivotX = this.pivot.x; + this.assetData.PivotY = this.pivot.y; + this.assetData.Point = new Point(this.x, this.y); + }) + .on('pointerup', event => { + if (event.currentTarget.dragging) { + event.currentTarget.alpha = 1; + event.currentTarget.dragging = false; + event.currentTarget.data = null; + } + }) + .on('pointerupoutside', event => { + if (event.currentTarget.dragging) { + event.currentTarget.alpha = 1; + event.currentTarget.dragging = false; + event.currentTarget.data = null; + } + }) + .on('pointermove', event => { + if (event.currentTarget.dragging) { + const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); + const startPos = this.position; + const endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition)); + const width = (endPos.x - startPos.x); + const height = (endPos.y - startPos.y); + const scaleX = width / (this.width / this.scale.x); + const scaleY = height / (this.width / this.scale.x); + const angle = Math.abs(this.angle); + console.log(angle); + if (angle === 0) { + this.scale.set(scaleX); + } else if (angle === 90) { + this.scale.set(-scaleY); + } else if (angle === 180) { + this.scale.set(-scaleX); + } else if (angle === 270) { + this.scale.set(scaleY); + } + this.assetData.Scale = this.scale.x; + } + }) + .on('rightclick', event => { + this.border.visible = false; + }); + // this.addChild(this.downLeft); + this.downLeft.anchor.set(0.5); + this.downLeft.interactive = true; + this.downLeft.visible = false; + this.downLeft + .on('pointerdown', event => { + event.stopPropagation(); + event.currentTarget.data = event.data; + event.currentTarget.alpha = 0.5; + event.currentTarget.dragging = true; + + event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); + + const pointStart = this.position; + const pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.upRight.position)); + + const delX = pointEnd.x - pointStart.x; + const delY = pointEnd.y - pointStart.y; + + this.pivot.set(this.upRight.x, this.upRight.y); + + this.position.x += delX; + this.position.y += delY; + + this.assetData.PivotX = this.pivot.x; + this.assetData.PivotY = this.pivot.y; + this.assetData.Point = new Point(this.x, this.y); + }) + .on('pointerup', event => { + if (event.currentTarget.dragging) { + event.currentTarget.alpha = 1; + event.currentTarget.dragging = false; + event.currentTarget.data = null; + } + }) + .on('pointerupoutside', event => { + if (event.currentTarget.dragging) { + event.currentTarget.alpha = 1; + event.currentTarget.dragging = false; + event.currentTarget.data = null; + } + }) + .on('pointermove', event => { + if (event.currentTarget.dragging) { + const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); + const startPos = this.position; + const endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition)); + const width = (endPos.x - startPos.x); + const height = (endPos.y - startPos.y); + const scaleX = width / (this.width / this.scale.x); + const scaleY = height / (this.width / this.scale.x); + const angle = Math.abs(this.angle); + console.log(angle); + if (angle === 0) { + this.scale.set(-scaleX); + } else if (angle === 90) { + this.scale.set(scaleY); + } else if (angle === 180) { + this.scale.set(scaleX); + } else if (angle === 270) { + this.scale.set(-scaleY); + } + this.assetData.Scale = this.scale.x; + } + }) + .on('rightclick', event => { + this.border.visible = false; + }); + // this.addChild(this.downRight); + this.downRight.anchor.set(0.5); + this.downRight.interactive = true; + this.downRight.visible = false; + this.downRight + .on('pointerdown', event => { + event.stopPropagation(); + event.currentTarget.data = event.data; + event.currentTarget.alpha = 0.5; + event.currentTarget.dragging = true; + + event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); + + const pointStart = this.position; + const pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.upLeft.position)); + + const delX = pointEnd.x - pointStart.x; + const delY = pointEnd.y - pointStart.y; + + this.pivot.set(this.upLeft.x, this.upLeft.y); + + this.position.x += delX; + this.position.y += delY; + + this.assetData.PivotX = this.pivot.x; + this.assetData.PivotY = this.pivot.y; + this.assetData.Point = new Point(this.x, this.y); + }) + .on('pointerup', event => { + if (event.currentTarget.dragging) { + event.currentTarget.alpha = 1; + event.currentTarget.dragging = false; + event.currentTarget.data = null; + } + }) + .on('pointerupoutside', event => { + if (event.currentTarget.dragging) { + event.currentTarget.alpha = 1; + event.currentTarget.dragging = false; + event.currentTarget.data = null; + } + }) + .on('pointermove', event => { + if (event.currentTarget.dragging) { + const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); + const startPos = this.position; + const endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition)); + const width = (endPos.x - startPos.x); + const height = (endPos.y - startPos.y); + const scaleX = width / (this.width / this.scale.x); + const scaleY = height / (this.width / this.scale.x); + const angle = Math.abs(this.angle); + console.log(angle); + if (angle === 0) { + this.scale.set(scaleX); + } else if (angle === 90) { + this.scale.set(-scaleY); + } else if (angle === 180) { + this.scale.set(-scaleX); + } else if (angle === 270) { + this.scale.set(scaleY); + } + this.assetData.Scale = this.scale.x; + } + }) + .on('rightclick', event => { + this.border.visible = false; + }); + } + /** + * 设置点显示状态 + * @param value 显示状态 + */ + public setPointVisiable(value: boolean) { + const rect = this.getLocalBounds(); + this.upLeft.x = rect.left; + this.upLeft.y = rect.top; + this.upRight.x = rect.right; + this.upRight.y = rect.top; + this.downLeft.x = rect.left; + this.downLeft.y = rect.bottom; + this.downRight.x = rect.right; + this.downRight.y = rect.bottom; + this.upLeft.visible = value; + this.upRight.visible = value; + this.downLeft.visible = value; + this.downRight.visible = value; + } + /** + * + * @param scale 绘制边框 + */ + public drawBorder(scale: number) { + const visible = this.upLeft.visible; + console.log(visible); + this.setPointVisiable(false); + + super.drawBorder(scale); + const rect = this.getLocalBounds(); + this.upLeft.x = rect.left; + this.upLeft.y = rect.top; + this.upRight.x = rect.right; + this.upRight.y = rect.top; + this.downLeft.x = rect.left; + this.downLeft.y = rect.bottom; + this.downRight.x = rect.right; + this.downRight.y = rect.bottom; + this.setPointVisiable(visible); } } -export class Legend{ +export class Legend { public Name: string; public ImageUrl: string; public Count: number; /** * */ - constructor(name:string,imageUrl:string,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/axRectangleShape.ts b/src/app/working-area/model/axRectangleShape.ts new file mode 100644 index 0000000..297ffdb --- /dev/null +++ b/src/app/working-area/model/axRectangleShape.ts @@ -0,0 +1,21 @@ +import { Sprite } from "pixi.js"; +import { Graphics } from "pixi.js"; +import { WorkingAreaComponent } from "../working-area.component"; +import { AxShape } from "./axShape"; + +export class AxRectangleShape extends AxShape{ + /** + * + */ + constructor(x:number,y:number,width:number,height:number,assetData: any, workingArea: WorkingAreaComponent) { + super(assetData,workingArea); + this.beginFill(0x0000ff,1); + this.lineStyle(1, 0xff0000,1); + this.drawRect(x, y, width, height); + this.endFill(); + + + } + + +} diff --git a/src/app/working-area/model/axShape.ts b/src/app/working-area/model/axShape.ts index 7e784b3..27c1773 100644 --- a/src/app/working-area/model/axShape.ts +++ b/src/app/working-area/model/axShape.ts @@ -6,7 +6,7 @@ import { WorkingAreaComponent } from '../working-area.component'; /** * 安信形状 */ -export class AxShape extends Container { +export class AxShape extends Graphics { assetData: any; pointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png') workingArea: WorkingAreaComponent; @@ -83,12 +83,6 @@ export class AxShape extends Container { }) .on('rightclick', event => { this.border.visible = false; - }) - .on('pointerover', event => { - event.stopPropagation(); - }) - .on('pointerout', event => { - event.stopPropagation(); }); } redraw(): void { @@ -101,23 +95,14 @@ export class AxShape extends Container { public setItemScale(scale: number) { } - /** - * 显示边框 - */ + 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; } /** @@ -151,13 +136,13 @@ export class AxShape extends Container { 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.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(); + // this.border.endFill(); } // 画虚线 drawDash(target, x1, y1, x2, y2,dashLength = 5, spaceLength = 1) { diff --git a/src/app/working-area/model/messageSystem.ts b/src/app/working-area/model/messageSystem.ts new file mode 100644 index 0000000..322eef4 --- /dev/null +++ b/src/app/working-area/model/messageSystem.ts @@ -0,0 +1,37 @@ +class MyEvent extends CustomEvent { + public static readonly CMD: string = "EVENT_NAME"; + public constructor($type: string , $data: T ) { + super( $type , { detail: $data, bubbles: true, cancelable: true, composed: true }); + } +} + +class MyDispatch extends EventTarget { + private static _instance: MyDispatch; + public static get Instance(): MyDispatch { + if (!MyDispatch._instance) MyDispatch._instance = new MyDispatch(); + return MyDispatch._instance; + } + public send($data: T, $type: string = MyEvent.CMD): void { + const $event: CustomEvent = new MyEvent($type, $data); + this.dispatchEvent($event); + } +} + +class Test { + + public constructor() { + MyDispatch.Instance.addEventListener(MyEvent.CMD, this.onEvent as EventListener); + } + private onEvent($e: MyEvent): void { + console.log(`target ${$e.target}`); + console.log(`name: ${$e.detail._name} , occupation: ${$e.detail._occupation}`); + } +} + +interface ITest { + _name: string; + _occupation: string; +} + +let $test: Test = new Test(); +MyDispatch.Instance.send({ _name: `Aonaufly`, _occupation: `it` }); diff --git a/src/app/working-area/model/multipointIcon.ts b/src/app/working-area/model/multipointIcon.ts index 395afd1..55ac71a 100644 --- a/src/app/working-area/model/multipointIcon.ts +++ b/src/app/working-area/model/multipointIcon.ts @@ -48,6 +48,8 @@ export class MultipointIcon extends AxShape { this.text.visible = this.showName; this.text.angle = -this.workingArea.backgroundImage.angle; this.addChild(this.text); + this.assetData.Thickness = this.assetData.Thickness === 0 ? 32: this.assetData.Thickness; + var tileScale = this.assetData.Thickness/64; // 画线图标 for (let i = 0, count = this.pointsData.length - 1; i < count; i++) { const pointA = this.pointsData[i]; @@ -58,15 +60,17 @@ export class MultipointIcon extends AxShape { const b = pointB.y - pointA.y; const distance = Math.sqrt(a * a + b * b); - const icon = new PIXI.TilingSprite(PIXI.Texture.from(this.assetData.ImageUrl), distance, 64); + const icon = new PIXI.TilingSprite(PIXI.Texture.from(this.assetData.ImageUrl), distance, this.assetData.Thickness); + icon.tileScale.set(tileScale); icon.anchor.set(0, 0.5); icon.x = pointA.x; icon.y = pointA.y; icon.angle = angle; - // icon.height = this.assetData.Thickness === 0 ? 32 : this.assetData.Thickness; this.iconsTilingSprite.push(icon); this.addChild(icon); this.text.position = this.getLineCenter(this.pointsData[0], this.pointsData[1]); + // 等距等分 + this.tileDistanceEqual(icon); } this.sortableChildren = true; this.text.zIndex = this.pointsData.length; @@ -128,6 +132,8 @@ export class MultipointIcon extends AxShape { const distance = Math.sqrt(a * a + b * b); this.iconsTilingSprite[index].angle = angle; this.iconsTilingSprite[index].width = distance; + + this.tileDistanceEqual(this.iconsTilingSprite[index]); } else if (index < array.length - 1) {// 不是第一个点，也不是最后一个点 this.iconsTilingSprite[index].x = newPosition.x; this.iconsTilingSprite[index].y = newPosition.y; @@ -143,12 +149,16 @@ export class MultipointIcon extends AxShape { this.iconsTilingSprite[index].angle = angle; this.iconsTilingSprite[index].width = distance; + this.tileDistanceEqual(this.iconsTilingSprite[index]); + const angleC = Math.atan2((pointA.y - pointC.y), (pointA.x - pointC.x)) * (180 / Math.PI); const aC = pointA.x - pointC.x; const bC = pointA.y - pointC.y; const distanceC = Math.sqrt(aC * aC + bC * bC); this.iconsTilingSprite[index - 1].angle = angleC; this.iconsTilingSprite[index - 1].width = distanceC; + + this.tileDistanceEqual(this.iconsTilingSprite[index - 1]); } else if (index === array.length - 1) { // 最后一个点 const pointA = array[index]; // 当前点 const pointC = array[index - 1]; // 前一个点 @@ -159,6 +169,8 @@ export class MultipointIcon extends AxShape { const distanceC = Math.sqrt(aC * aC + bC * bC); this.iconsTilingSprite[index - 1].angle = angleC; this.iconsTilingSprite[index - 1].width = distanceC; + + this.tileDistanceEqual(this.iconsTilingSprite[index - 1]); } this.drawBorder(1 / this.workingArea.backgroundImage.scale.x); this.text.position = this.getLineCenter(this.pointsData[0], this.pointsData[1]); @@ -177,6 +189,16 @@ export class MultipointIcon extends AxShape { item.visible = value; }); } + /** + * + * @param scale 绘制边框 + */ + public drawBorder(scale: number) { + let visible = this.pointsGraphics[0].visible; + this.setPointVisiable(false); + super.drawBorder(scale); + this.setPointVisiable(visible); + } // 设置名称 public setNameVisible(value: boolean, mode: GameMode) { if (this.assetData.GameMode === mode) { @@ -192,13 +214,28 @@ export class MultipointIcon extends AxShape { } // 刷新数据 public refresh() { - // console.log(this.assetData); - // this.iconsTilingSprite.forEach(element => { - // element.height = this.assetData.Thickness === 0 ? 32 : this.assetData.Thickness; - // }); + this.assetData.Thickness = this.assetData.Thickness === 0 ? 32: this.assetData.Thickness; + this.iconsTilingSprite.forEach(item => { + // 厚度优化 + this.tileDistanceEqual(item); + }); this.text.text = this.assetData.Name + '\r\n' + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue; this.text.angle = -this.workingArea.backgroundImage.angle; } + + // 等距等分 + public tileDistanceEqual(icon: PIXI.TilingSprite) { + icon.height = this.assetData.Thickness; + var tileScale = this.assetData.Thickness / 64; + icon.tileScale.set(tileScale); + console.log(tileScale); + var tileWidth = tileScale * 64; + var tileCount = Math.ceil(icon.width / tileWidth); + tileWidth = icon.width / tileCount; + tileScale = tileWidth / 64; + console.log(tileScale); + icon.tileScale.set(tileScale); + } } diff --git a/src/app/working-area/model/polygonIcon.ts b/src/app/working-area/model/polygonIcon.ts index 2494748..0186a11 100644 --- a/src/app/working-area/model/polygonIcon.ts +++ b/src/app/working-area/model/polygonIcon.ts @@ -155,6 +155,16 @@ export class PolygonIcon extends AxShape { item.visible = value; }); } + /** + * + * @param scale 绘制边框 + */ + public drawBorder(scale: number) { + let visible = this.pointsGraphics[0].visible; + this.setPointVisiable(false); + super.drawBorder(scale); + this.setPointVisiable(visible); + } // 设置缩放 public setItemScale(scale: number) { // this.text.scale.set(scale); diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index 3e4d492..98755ea 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -17,6 +17,8 @@ import { AxPreviewImageShape } from './model/axPreviewImageShape'; import { AxArrowConnector } from './model/axArrowConnector'; import { AxLegend, Legend } from './model/axLegend'; import { NullTemplateVisitor } from '@angular/compiler'; +import { AxRectangleShape } from './model/axRectangleShape'; +import { AxGrid } from './model/axGrid'; @Component({ @@ -107,6 +109,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 确认绘制按钮 */ private enterPaintEndButton = PIXI.Sprite.from('assets/images/enterPaintButton.png'); + + /** + * 编辑点图片 + */ + editorPointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png'); /** * 框选工具图形 */ @@ -130,23 +137,23 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV public animation; public animationIcon; public animationTime; - // 车辆作业面 - public carAreas: PolygonIcon[]; - // 车辆数据 - 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.4.20210109_beta'; + /** + * 网格 + */ + public grid: AxGrid = null; + /** + * 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta + * Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。 + * Beta版: 该版本相对于α版已有了很大的改进，消除了严重的错误，但还是存在着一些缺陷，需要经过多次测试来进一步消除，此版本主要的修改对像是软件的UI。 + * RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。 + * Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。 + */ + public VERSION = '1.0.9.20210118_beta'; /** * 数据初始化 */ ngOnInit(): void { - PIXI.utils.skipHello() + PIXI.utils.skipHello(); this.sayHello(); this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => { if (event.keyCode === 17) { @@ -175,28 +182,27 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.selection.deselectAll(); } /** - * + * * @param obj 删除一个形状 */ public deleteShape(shape) { if (this.allowEdit && this.canvasData.gameMode === shape.assetData.GameMode) { - this.emit('deleteIcon',shape); + this.emit('deleteIcon', shape); } } /** * 打招呼 */ sayHello() { - var _a; + let _a; if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - "\n %c 版本号 - " + this.VERSION + "\n", + const 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"); + } else if (window.console) { + window.console.log('\n %c 版本号 - ' + this.VERSION + '\n'); } } /** @@ -223,7 +229,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.resizeItem(1/this.backgroundImage.scale.x) + this.resizeItem(1 / this.backgroundImage.scale.x); return; } this.backgroundImage.pivot.set(pivot.x, pivot.y); @@ -237,7 +243,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.resizeItem(1/this.backgroundImage.scale.x) + this.resizeItem(1 / this.backgroundImage.scale.x); return; } this.backgroundImage.pivot.set(pivot.x, pivot.y); @@ -248,10 +254,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.backgroundImage.position.x += delX; this.backgroundImage.position.y += delY; } - this.resizeItem(1/this.backgroundImage.scale.x) + this.resizeItem(1 / this.backgroundImage.scale.x); } // 重置图形缩放 - public resizeItem(size:number) { + public resizeItem(size: number) { this.backgroundImage.children.forEach(item => { if (item instanceof AxShape) { item.setItemScale(size); @@ -294,11 +300,24 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV antialias: true, transparent: false, resolution: 1, - backgroundColor: 0xE9FAFF + backgroundColor: 0xE9EAEA }); this.content.nativeElement.appendChild(this.app.view); this.app.view.style.border = '1px dashed blue'; this.animator = new Charm(PIXI); + // 创建网格 + this.grid = new AxGrid(this.app.view.width, null, { color: 0xffffff }, true, true); + // this.grid.x = (this.app.view.width / 2) - (this.grid.gridWidth / 2); + // this.grid.y = (this.app.view.height / 2) - (this.grid.gridWidth / 2); + // this.grid.pivot.set(0.5); + this.grid.x = this.app.stage.x; + this.grid.y = this.app.stage.y; + this.app.stage.addChild(this.grid); + this.grid.drawGrid(); + this.grid.onMousemove = (evt, gridCoord) => { + console.log(gridCoord); + }; + this.createBackgroundImage(); this.app.ticker.add((delta) => { this.animator.update(); @@ -339,14 +358,22 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV /** * 选中事件 */ - this.on('select', (axShape:AxShape)=> { - axShape.showBorder(); - axShape.setPointVisiable(this.allowEdit); + this.on('select', (axShape: AxShape) => { + // if (axShape instanceof AxRectangleShape) { + // let upLeft: PIXI.Sprite= new PIXI.Sprite(this.editorPointTexture); + // let upRight: PIXI.Sprite= new PIXI.Sprite(this.editorPointTexture); + // let downLeft: PIXI.Sprite= new PIXI.Sprite(this.editorPointTexture); + // let downRight: PIXI.Sprite = new PIXI.Sprite(this.editorPointTexture); + // } else { + axShape.showBorder(); + axShape.drawBorder(1 / this.backgroundImage.scale.x); + axShape.setPointVisiable(this.allowEdit); + // } }); /** * 取消选中事件 */ - this.on('deselect', (axShape:AxShape)=> { + this.on('deselect', (axShape: AxShape) => { axShape.hideBorder(); axShape.setPointVisiable(false); }); @@ -354,10 +381,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 创建图标事件（数据处理） */ this.on('createIcon', (axShape: AxShape) => { - console.log("新增图标："+axShape.assetData.Name); + 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) { // 处置预案 @@ -367,7 +395,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV } this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id] = axShape.assetData; } - else if (axShape.assetData.GameMode === GameMode.Examinee) { // 考生考试 + else if (axShape.assetData.GameMode === GameMode.Examinee) { // 考生考试 if (axShape.assetData.Tag === 1) { this.canvasData.examOriginaleveryStoreyData.data[axShape.assetData.Id] = axShape.assetData; } else { @@ -378,10 +406,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id] = axShape.assetData; } } - var temp = this.backgroundImage.getChildByName("图例") as AxLegend; + const temp = this.backgroundImage.getChildByName('图例') as AxLegend; if ( temp !== undefined - && temp !== null) { - var itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1); + && temp !== null + && axShape.assetData.Name !== '图例') { + const itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1); temp.addItem(itemLegend); } this.emit('canvasDataChanged'); @@ -390,12 +419,13 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV /** * 删除图标事件(数据处理) */ - this.on('deleteIcon', (axShape:AxShape)=>{ + this.on('deleteIcon', (axShape: AxShape) => { // 删除图例对象 - var temp = this.backgroundImage.getChildByName("图例") as AxLegend; + const temp = this.backgroundImage.getChildByName('图例') as AxLegend; if ( temp !== undefined - && temp !== null) { - var itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1); + && temp !== null + && axShape.assetData.Name !== '图例') { + const itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1); temp.deleteItem(itemLegend); } @@ -410,7 +440,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV 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) { // 考生考试 + else if (axShape.assetData.GameMode === GameMode.Examinee) { // 考生考试 if (axShape.assetData.Tag === 1) { // 删除楼层数据 delete this.canvasData.examOriginaleveryStoreyData.data[axShape.assetData.Id]; @@ -502,7 +532,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 创建楼层图形 */ public createFloorShape(floorData: any) { - if (floorData === undefined || floorData === null) return; + if (floorData === undefined || floorData === null) { return; } Object.keys(floorData).forEach((key) => { switch (floorData[key].InteractiveMode) { case 0: @@ -518,9 +548,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV case 3: if (floorData[key].Name === '水带') { const distance = new AxArrowConnector(floorData[key], this, false, true); - } else if(floorData[key].Name === '距离'){ + } else if (floorData[key].Name === '距离') { const distance = new AxArrowConnector(floorData[key], this, true, true); - }else if(floorData[key].Name === '普通墙' || floorData[key].Name === '承重墙'){ + } else if (floorData[key].Name === '普通墙' || floorData[key].Name === '承重墙') { const wall = new AxArrowConnector(floorData[key], this, false, false); } break; @@ -534,7 +564,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV public createNodeShape(nodeData: any) { if (nodeData !== undefined && nodeData !== null) { Object.keys(nodeData).forEach((key) => { - if (nodeData[key] === undefined || nodeData[key] === null) { return;} + if (nodeData[key] === undefined || nodeData[key] === null) { return; } Object.keys(nodeData[key]).forEach((tempKey) => { switch (nodeData[key][tempKey].InteractiveMode) { case 0: @@ -548,7 +578,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV const polygonIcon = new PolygonIcon(nodeData[key][tempKey], this); break; case 3: - const pipeline = new AxArrowConnector(nodeData[key][tempKey], this,false,true); + const pipeline = new AxArrowConnector(nodeData[key][tempKey], this, false, true); break; } }); @@ -578,8 +608,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV /** * 创建背景图 */ - public createBackgroundImage(){ - this.backgroundImage = PIXI.Sprite.from('assets/images/noImg.png') + 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; @@ -601,7 +631,8 @@ 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.data.button !== 0) { return; } + console.log(this.backgroundImage.toLocal(this.mousePosition)); if (!event.currentTarget.dragging && this.selection.isMultiselection === false) { this.selection.deselectAll(); event.currentTarget.data = event.data; @@ -735,14 +766,14 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV // this.paintingIcon = new PolygonIcon(this.paintPoints, this); break; case PaintMode.Pipeline: - if (this.canvasData.selectTemplateData.name === '水带') { - if (this.paintingShape !== null) { - this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); - this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); - this.paintingShape.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints)); - this.paintingShape.refresh(); - } - } else { + // if (this.canvasData.selectTemplateData.name === '水带-------') { + // if (this.paintingShape !== null) { + // this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + // this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); + // this.paintingShape.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints)); + // this.paintingShape.refresh(); + // } + // } else { this.previewLineSegment.visible = true; this.enterPaintEndButton.position = this.circleShadow.position; this.enterPaintEndButton.visible = true; @@ -785,17 +816,19 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV Tag: this.canvasData.selectTemplateData.tag }; if (this.canvasData.selectTemplateData.name === '距离') { - this.paintingShape = new AxArrowConnector(assetData2, this,true,true); + this.paintingShape = new AxArrowConnector(assetData2, this, true, true); } else if (this.canvasData.selectTemplateData.name === '普通墙' || this.canvasData.selectTemplateData.name === '承重墙') { - this.paintingShape = new AxArrowConnector(assetData2, this,false,false); + this.paintingShape = new AxArrowConnector(assetData2, this, false, false); + } else if (this.canvasData.selectTemplateData.name === '水带' ) { + this.paintingShape = new AxArrowConnector(assetData2, this, false, true); } } else { this.paintingShape.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints)); this.paintingShape.redraw(); } - } + // } // this.emit('backgroundScale', this.backgroundImage.scale.x); - break; + break; } } else if (!event.currentTarget.dragging && this.selection.isMultiselection === true) { this.rectToolGraphics.visible = true; @@ -819,7 +852,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV const rect1 = this.rectToolGraphics.getBounds(); const rect2 = item.getBounds(); if (this.isOverlap(rect1, rect2)) { - this.selection.select(item); + this.selection.select(item); } } }); @@ -869,25 +902,25 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.backgroundImage.addChild(this.paintingLine); } - 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 } - const l2 = { x: rect2.x, y: rect2.y } - const r2 = { x: rect2.x + rect2.width, y: rect2.y + rect2.height } + 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 }; + const l2 = { x: rect2.x, y: rect2.y }; + const r2 = { x: rect2.x + rect2.width, y: rect2.y + rect2.height }; if ( l1.x > r2.x || l2.x > r1.x || l1.y > r2.y || l2.y > r1.y - ) return false - return true + ) { return false; } + return true; } /** * 刷新背景图 */ - public async refreshBackgroundImage(imageUrl:string = this.canvasData.selectStorey.imageUrl,imageAngle:number = this.canvasData.selectStorey.imageAngle): Promise { - if (imageUrl === undefined || imageUrl === null || imageUrl === "") { + public async refreshBackgroundImage(imageUrl: string = this.canvasData.selectStorey.imageUrl, imageAngle: number = this.canvasData.selectStorey.imageAngle): Promise { + if (imageUrl === undefined || imageUrl === null || imageUrl === '') { this.backgroundImage.visible = false; } else { this.backgroundImage.visible = false; @@ -898,13 +931,13 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV 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; + 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.visible = true; @@ -912,32 +945,32 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV if (item instanceof AxShape) { item.refresh(); } - }) + }); } } /** * 刷新 - * @param imageUrl - * @param imageAngle + * @param imageUrl + * @param imageAngle */ public async refresh(imageUrl: string = this.canvasData.selectStorey.imageUrl, imageAngle: number = this.canvasData.selectStorey.imageAngle): Promise { await this.refreshBackgroundImage(); // 清空所有图形 this.selection.deselectAll(); - let itemList = []; - this.backgroundImage.children.forEach(item => { - if (item instanceof AxShape && item instanceof AxPreviewImageShape===false) { - itemList.push(item.name); + const itemList = []; + this.backgroundImage.children.forEach(item => { + if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) { + itemList.push(item.name); } }); - itemList.forEach(item => { + 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); @@ -948,8 +981,27 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV */ public createAxLegend() { const tempAssetData = { - Id: "图例",//ObjectID.default.generate() - Color: "#066EED80", + Id: '图例', + Name: '图例', + Color: '#066EED80', + TemplateId: null, + FloorId: this.canvasData.selectStorey.id, + Angle: 0, + Enabled: null, + FillMode: null, + FireElementId: null, + FixedSize: null, + Height: 32, + Width: 32, + ImageUrl: null, + InteractiveMode: null, + MultiPoint: null, + Point: new PIXI.Point(0, 0), + Border: null, + DrawMode: null, + Thickness: null, + IsFromBuilding: null, + GameMode: this.canvasData.gameMode, PropertyInfos: [ { Tag : '', @@ -957,33 +1009,46 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV Enabled : true, Visible : true, Required : false, - RuleName : "", - RuleValue : "", - PhysicalUnit : "", - PropertyName : "列", + RuleName : '', + RuleValue : '', + PhysicalUnit : '', + PropertyName : '列', PropertyType : 2, PropertyValue : 2, }, - ] + ], + Scale: 1, + PivotX: 0, + PivotY: 0, }; - let shapeMap: Map = new Map(); - - for (let item in this.canvasData.originaleveryStoreyData.data) { + const shapeMap: Map = new Map(); + let data = null; + for (const 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( + if (item !== '图例') { + shapeMap.set(this.canvasData.originaleveryStoreyData.data[item].Name, new Legend( this.canvasData.originaleveryStoreyData.data[item].Name, this.canvasData.originaleveryStoreyData.data[item].ImageUrl, 1 )); + } else { + data = this.canvasData.originaleveryStoreyData.data[item]; + } } } - 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; + if (data === null) { + const axLegend = new AxLegend(tempAssetData, this, shapeMap); + const rect = this.backgroundImage.getLocalBounds(); + const itemRect = axLegend.getLocalBounds(); + axLegend.x = rect.right - itemRect.right; + axLegend.y = rect.bottom - itemRect.bottom; + axLegend.assetData.Point = new PIXI.Point(axLegend.x, axLegend.y); + this.emit('createIcon', axLegend); + } else { + const axLegend = new AxLegend(data, this, shapeMap); + } } // /** // * 清空画布 @@ -1011,15 +1076,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 创建预览单点图标 */ private createPreviewImage(): void { - // if (this.previewSinglePointIcon === null) { - // this.previewSinglePointIcon = PIXI.Sprite.from(this.canvasData.selectTemplateData.imageUrl); - // this.previewSinglePointIcon.width = this.canvasData.selectTemplateData.width; - // this.previewSinglePointIcon.height = this.canvasData.selectTemplateData.height; - // this.previewSinglePointIcon.anchor.set(0.5); - // this.previewSinglePointIcon.interactive = false; - // this.backgroundImage.addChild(this.previewSinglePointIcon); - // this.previewSinglePointIcon.scale.set(1 / this.backgroundImage.scale.x); - // } this.previewImage = new AxPreviewImageShape(this); this.previewImage.visible = false; } @@ -1041,7 +1097,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV */ private refreshPreviewLineSegment(pointA: PIXI.Point, pointB: PIXI.Point) { this.previewLineSegment.clear(); - this.previewLineSegment.lineStyle(1/this.backgroundImage.scale.x, 0x00ff00, 1); + this.previewLineSegment.lineStyle(1 / this.backgroundImage.scale.x, 0x00ff00, 1); this.previewLineSegment.moveTo(pointA.x, pointA.y); this.previewLineSegment.lineTo(pointB.x, pointB.y ); } @@ -1050,9 +1106,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * @param x 半径 */ private createCircleShadow(): void { - // this.circleShadow.beginFill(0xFFCC5A); - // this.circleShadow.drawCircle(0, 0, 10); - // this.circleShadow.endFill(); this.circleShadow.visible = false; this.backgroundImage.addChild(this.circleShadow); } @@ -1062,18 +1115,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV private refreshPreviewPoint() { this.circleShadow.clear(); this.circleShadow.beginFill(0x00ff00); - this.circleShadow.drawCircle(0, 0, 5/this.backgroundImage.scale.x); + this.circleShadow.drawCircle(0, 0, 5 / this.backgroundImage.scale.x); this.circleShadow.endFill(); } - showConnectionPoint(b: boolean) { - this.backgroundImage?.children.forEach(item => { - if (item instanceof AxImageShape) { - if (item.assetData.CanConnect) { - item.showConnectionPoint(b); - } - } - }); - } /** * 开始绘制 */ @@ -1126,14 +1170,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.circleShadow.visible = true; break; case PaintMode.Pipeline: - if (this.canvasData.selectTemplateData.name==='水带') { - this.showConnectionPoint(true); - } else { - - } + break; case PaintMode.endPaint: - this.showConnectionPoint(false); if (this.previewImage !== null) { this.previewImage.visible = false; } @@ -1142,11 +1181,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV && this.paintingIcon !== null) { this.backgroundImage.removeChild(this.paintingIcon); } - - // if (this.paintingShape !== undefined - // && this.paintingShape !== null) { - // this.backgroundImage.removeChild(this.paintingShape); - // } if (this.paintingShape !== null) { this.backgroundImage.removeChild(this.paintingShape); this.paintingShape = null; @@ -1228,14 +1262,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV } break; case PaintMode.Pipeline: - if (this.canvasData.selectTemplateData.name !== '水带') { this.emit('createIcon', this.paintingShape); this.paintingShape = null; - } - break; + break; } this.paintPoints.splice(0, this.paintPoints.length); - // this.emit('backgroundScale', this.backgroundImage.scale.x); } /** * 复制 @@ -1259,34 +1290,33 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV newData.BuildingId = buildingId; newData.FloorId = floorId; newData.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5); - // if (newData.IsFromBuilding) { - // this.canvasData.originalcompanyBuildingData.data[newData.Id] = newData; - // } else { - this.canvasData.originaleveryStoreyData.data[newData.Id] = newData; - // } switch (item.InteractiveMode) { case PaintMode.singlePointIcon: const singleIcon = new AxImageShape(newData, this); + this.emit('createIcon', singleIcon); break; case PaintMode.lineIcon: const lineIcon = new MultipointIcon(newData, this); + this.emit('createIcon', lineIcon); break; case PaintMode.polygonIcon: const polygonIcon = new PolygonIcon(newData, this); + this.emit('createIcon', polygonIcon); break; case PaintMode.Pipeline: if (item.Name === '距离') { - const wall = new AxArrowConnector(newData, this,true,true); + const wall = new AxArrowConnector(newData, this, true, true); + this.emit('createIcon', wall); } else if (item.Name === '普通墙' || item.Name === '承重墙') { - const wall = new AxArrowConnector(newData, this,false,false); + const wall = new AxArrowConnector(newData, this, false, false); + this.emit('createIcon', wall); } break; } this.selection.select(this.backgroundImage.getChildByName(newData.Id)); }); - // this.emit('backgroundScale', this.backgroundImage.scale.x); } - ////////////////////////////////////////////////////////////////////////通用///////////////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////////// 通用///////////////////////////////////////////////////////////////////////////// /** * * @param id 图标ID @@ -1297,11 +1327,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.backgroundImage.getChildByName(item).visible = b; }); } - ////////////////////////////////////////////////////////////////////////采集平台加载逻辑/////////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////////// 采集平台加载逻辑/////////////////////////////////////////////////////////////////////// - ////////////////////////////////////////////////////////////////////////编制平台加载逻辑/////////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////////// 编制平台加载逻辑/////////////////////////////////////////////////////////////////////// - ////////////////////////////////////////////////////////////////////////考试系统加载逻辑/////////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////////// 考试系统加载逻辑/////////////////////////////////////////////////////////////////////// /** * 考生点击楼层 */ @@ -1330,7 +1360,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV } /** - * 考官点击楼层 + * 考官点击楼层-阅卷 */ public async onExaminerClickFloor() { await this.refreshBackgroundImage(); @@ -1355,6 +1385,30 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV // 隐藏图标 this.setIconVisible(this.canvasData.hiddenBasicInfoFacilities, false); } + /** + * 考官点击楼层-创建试卷 + */ + public async onExaminerClickFloor_CreateTestpaper() { + await this.refreshBackgroundImage(); + // 清空所有图形 + 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.originaleveryStoreyData.data); + // 创建处置预案图形 + this.createNodeShape(this.canvasData.selectPanelPoint.Data); + // 隐藏图标 + this.setNameVisible(false, 0); + } } /**