From c117574835e521d4213104d3dcb8bf3b1cf5b352 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E6=8C=AF=E5=8D=87?= <359059686@qq.com> Date: Tue, 2 Mar 2021 11:02:47 +0800 Subject: [PATCH] 1.4.0 --- src/app/canvas-share-data.service.ts | 2 + src/app/working-area/model/axImageShape.ts | 268 ++++++++++++------ src/app/working-area/model/axMessageSystem.ts | 36 +-- src/app/working-area/model/axShape.ts | 66 ++--- src/app/working-area/model/configuration.ts | 9 +- src/app/working-area/model/events.ts | 2 + src/app/working-area/model/grid2D.ts | 16 +- .../working-area/working-area.component.ts | 145 ++++++++-- 8 files changed, 368 insertions(+), 176 deletions(-) diff --git a/src/app/canvas-share-data.service.ts b/src/app/canvas-share-data.service.ts index dbc257c..1d74555 100644 --- a/src/app/canvas-share-data.service.ts +++ b/src/app/canvas-share-data.service.ts @@ -57,6 +57,8 @@ export class CanvasShareDataService { ['水泵接合器（地上）', '水泵接合器'], ['水泵接合器（地下）', '水泵接合器'], ['水泵接合器（墙壁）', '水泵接合器'], + ['水泵接合器（喷淋）', '水泵接合器'], + ['水泵接合器（消防）', '水泵接合器'], ['消防水泵房', '消防水泵房'], ['箱式消火栓', '箱式消火栓'], ['固定水炮', '消防水炮'], diff --git a/src/app/working-area/model/axImageShape.ts b/src/app/working-area/model/axImageShape.ts index 2a91bd1..44a1729 100644 --- a/src/app/working-area/model/axImageShape.ts +++ b/src/app/working-area/model/axImageShape.ts @@ -5,8 +5,10 @@ import { PaintMode } from './paintModel'; import * as PIXI from 'pixi.js'; import { PropertyInfo } from './PropertyInfo'; import { AxShape } from './axShape'; -import { Sprite } from 'pixi.js'; +import { Sprite, Point, Rectangle } from 'pixi.js'; import { AxArrowConnector } from './axArrowConnector'; +import { AxMessageSystem } from './axMessageSystem'; +import { EVENT_IMAGE_RESIZE } from './events'; /** * 安信图片形状 @@ -31,6 +33,7 @@ export class AxImageShape extends AxShape { wordWrapWidth: 100, }); + text = new PIXI.Text(this.assetData.Name + '\r\n' + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style); @@ -71,56 +74,177 @@ export class AxImageShape extends AxShape { this.addChild(this.image); this.addChild(this.selectionBox); - //// + // 是否拖动 + var pointerDrag = false; // up-left this.upLeft = new PIXI.Sprite(this.pointTexture); + this.upLeft.cursor = 'nwse-resize'; this.upLeft.anchor.set(0.5); this.addChild(this.upLeft); this.upLeft.interactive = true; + this.upLeft.on('pointerdown', event => { + pointerDrag = true; + this.image.anchor.set(1); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + event.stopPropagation(); + }); + this.upLeft.on('pointermove', event => { + // 移动时调整形状大小，然后重绘边框 + // 检查右下角距离鼠标的位置， + if (pointerDrag) { + var pos = this.toLocal(event.data.global); + var dX = Math.abs(pos.x - this.image.x); + var dY = Math.abs(pos.y - this.image.y); + var result = dX > dY ? dX : dY; + this.assetData.Width = Math.abs(result); + this.assetData.Height = Math.abs(result); + this.refresh(); + AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); + } + + }); + this.upLeft.on('pointerup', event => { + if (pointerDrag) { + pointerDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + } + }); + this.upLeft.on('pointerupoutside', event => { + if (pointerDrag) { + pointerDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + } + }); this.upLeft.visible = false; // up-right this.upRight = new PIXI.Sprite(this.pointTexture); + this.upRight.cursor = 'nesw-resize'; this.upRight.anchor.set(0.5); this.addChild(this.upRight); this.upRight.interactive = true; + this.upRight.on('pointerdown', event => { + pointerDrag = true; + this.image.anchor.set(0, 1); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + event.stopPropagation(); + }); + this.upRight.on('pointermove', event => { + // 移动时调整形状大小，然后重绘边框 + // 检查右下角距离鼠标的位置， + if (pointerDrag) { + var pos = this.toLocal(event.data.global); + var dX = Math.abs(pos.x - this.image.x); + var dY = Math.abs(pos.y - this.image.y); + var result = dX > dY ? dX : dY; + this.assetData.Width = Math.abs(result); + this.assetData.Height = Math.abs(result); + this.refresh(); + AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); + } + + }); + this.upRight.on('pointerup', event => { + if (pointerDrag) { + pointerDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + } + }); + this.upRight.on('pointerupoutside', event => { + if (pointerDrag) { + pointerDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + } + }); this.upRight.visible = false; // down-left this.downLeft = new PIXI.Sprite(this.pointTexture); + this.downLeft.cursor = 'nesw-resize'; this.downLeft.anchor.set(0.5); this.addChild(this.downLeft); this.downLeft.interactive = true; + this.downLeft.on('pointerdown', event => { + pointerDrag = true; + this.image.anchor.set(1, 0); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + event.stopPropagation(); + }); + this.downLeft.on('pointermove', event => { + // 移动时调整形状大小，然后重绘边框 + // 检查右下角距离鼠标的位置， + if (pointerDrag) { + var pos = this.toLocal(event.data.global); + var dX = Math.abs(pos.x - this.image.x); + var dY = Math.abs(pos.y - this.image.y); + var result = dX > dY ? dX : dY; + this.assetData.Width = Math.abs(result); + this.assetData.Height = Math.abs(result); + this.refresh(); + AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); + } + + }); + this.downLeft.on('pointerup', event => { + if (pointerDrag) { + pointerDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + } + }); + this.downLeft.on('pointerupoutside', event => { + if (pointerDrag) { + pointerDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + } + }); this.downLeft.visible = false; // down-right this.downRight = new PIXI.Sprite(this.pointTexture); + this.downRight.cursor = 'nwse-resize'; this.downRight.anchor.set(0.5); this.addChild(this.downRight); this.downRight.interactive = true; + this.downRight.on('pointerdown', event => { + pointerDrag = true; + this.image.anchor.set(0, 0); + this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + event.stopPropagation(); + }); + this.downRight.on('pointermove', event => { + // 移动时调整形状大小，然后重绘边框 + // 检查右下角距离鼠标的位置， + if (pointerDrag) { + var pos = this.toLocal(event.data.global); + var dX = Math.abs(pos.x - this.image.x); + var dY = Math.abs(pos.y - this.image.y); + var result = dX > dY ? dX : dY; + this.assetData.Width = Math.abs(result); + this.assetData.Height = Math.abs(result); + this.refresh(); + AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); + } + + }); + this.downRight.on('pointerup', event => { + if (pointerDrag) { + pointerDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + } + }); + this.downRight.on('pointerupoutside', event => { + if (pointerDrag) { + pointerDrag = false; + this.image.anchor.set(0.5); + this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + } + }); this.downRight.visible = 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); } // // 设置选择框 @@ -193,79 +317,41 @@ 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(); - // } - // } - // } - // } // 刷新 public refresh() { - if (this.assetData.CanConnect) { - - } this.image.width = this.assetData.Width; this.image.height = this.assetData.Height; this.image.angle = this.assetData.Angle; this.text.text = this.assetData.Name + '\r\n' + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue; - this.text.x = this.image.x; - this.text.y = this.image.y - this.image.height / 2; + + if (this.image.anchor.x == 0) { + if (this.image.anchor.y == 0) { + this.text.x = this.image.x + this.image.width / 2; + this.text.y = this.image.y; + } else if (this.image.anchor.y == 0.5) { + + } else if (this.image.anchor.y == 1) { + this.text.x = this.image.x + this.image.width / 2; + this.text.y = this.image.y - this.image.height; + } + + } else if (this.image.anchor.x == 0.5) { + this.text.x = this.image.x; + this.text.y = this.image.y - this.image.height / 2; + } else if (this.image.anchor.x == 1) { + if (this.image.anchor.y == 0) { + this.text.x = this.image.x - this.image.width / 2; + this.text.y = this.image.y; + } else if (this.image.anchor.y == 0.5) { + + } else if (this.image.anchor.y == 1) { + this.text.x = this.image.x - this.image.width / 2; + this.text.y = this.image.y - this.image.height; + } + } this.angle = -this.workingArea.backgroundImage.angle; + this.drawBorder(1 / this.workingArea.backgroundImage.scale.x); } } diff --git a/src/app/working-area/model/axMessageSystem.ts b/src/app/working-area/model/axMessageSystem.ts index 1451f9c..fac6c6b 100644 --- a/src/app/working-area/model/axMessageSystem.ts +++ b/src/app/working-area/model/axMessageSystem.ts @@ -5,14 +5,14 @@ export class AxMessageSystem { /** 监听数组 */ private static listeners = {}; - /** + /** * 注册事件 * @param name 事件名称 * @param callback 回调函数 * @param context 上下文 */ - public static addListener(name: string, callback: () => void, context: any) { - const observers: Observer[] = AxMessageSystem.listeners[name]; + public static addListener(name: string, callback: Function, context: any) { + let observers: Observer[] = AxMessageSystem.listeners[name]; if (!observers) { AxMessageSystem.listeners[name] = []; } @@ -25,18 +25,18 @@ export class AxMessageSystem { * @param callback 回调函数 * @param context 上下文 */ - public static removeListener(name: string, callback: () => void, context: any) { - const observers: Observer[] = AxMessageSystem.listeners[name]; - if (!observers) { return; } - const length = observers.length; + public static removeListener(name: string, callback: Function, context: any) { + let observers: Observer[] = AxMessageSystem.listeners[name]; + if (!observers) return; + let length = observers.length; for (let i = 0; i < length; i++) { - const observer = observers[i]; + let observer = observers[i]; if (observer.compar(context)) { observers.splice(i, 1); break; } } - if (observers.length === 0) { + if (observers.length == 0) { delete AxMessageSystem.listeners[name]; } } @@ -46,11 +46,11 @@ export class AxMessageSystem { * @param name 事件名称 */ public static send(name: string, ...args: any[]) { - const observers: Observer[] = AxMessageSystem.listeners[name]; - if (!observers) { return; } - const length = observers.length; + let observers: Observer[] = AxMessageSystem.listeners[name]; + if (!observers) return; + let length = observers.length; for (let i = 0; i < length; i++) { - const observer = observers[i]; + let observer = observers[i]; observer.notify(name, ...args); } } @@ -61,12 +61,12 @@ export class AxMessageSystem { */ class Observer { /** 回调函数 */ - private callback: () => void; + private callback: Function = null; /** 上下文 */ private context: any = null; - constructor(callback: () => void, context: any) { - const self = this; + constructor(callback: Function, context: any) { + let self = this; self.callback = callback; self.context = context; } @@ -76,7 +76,7 @@ class Observer { * @param args 不定参数 */ notify(...args: any[]): void { - const self = this; + let self = this; self.callback.call(self.context, ...args); } @@ -85,6 +85,6 @@ class Observer { * @param context 上下文 */ compar(context: any): boolean { - return context === this.context; + return context == this.context; } } diff --git a/src/app/working-area/model/axShape.ts b/src/app/working-area/model/axShape.ts index 5c6ce51..85ab02c 100644 --- a/src/app/working-area/model/axShape.ts +++ b/src/app/working-area/model/axShape.ts @@ -32,7 +32,7 @@ export class AxShape extends Graphics { this.workingArea.backgroundImage.addChild(this); this.zIndex = 200; this.interactive = true; - this.buttonMode = true; + // this.buttonMode = true; this .on('pointerdown', event => { event.stopPropagation(); @@ -88,10 +88,10 @@ export class AxShape extends Graphics { public hideBorder() { this.border.visible = false; } - /** - * 设置点显示状态 - * @param value 显示状态 - */ + /** + * 设置点显示状态 + * @param value 显示状态 + */ public setPointVisiable(value: boolean) { } @@ -112,7 +112,7 @@ export class AxShape extends Graphics { const spaceLength = scale * 1; const lineLenght = rect.width + 0.5 + 0.5; - const dashLength = scale * ( lineLenght + spaceLength - Math.floor((rect.width + rect.height) / 2 / 4.1)) / Math.floor((rect.width + rect.height) / 2 / 4.1); + const dashLength = scale * (lineLenght + spaceLength - Math.floor((rect.width + rect.height) / 2 / 4.1)) / Math.floor((rect.width + rect.height) / 2 / 4.1); this.drawDash(this.border, p1.x - 0.5 * scale, p1.y, p2.x + 0.5 * scale, p2.y, dashLength, spaceLength); this.drawDash(this.border, p2.x, p2.y - 0.5 * scale, p3.x, p3.y + 0.5 * scale, dashLength, spaceLength); this.drawDash(this.border, p3.x + 0.5 * scale, p3.y, p4.x - 0.5 * scale, p4.y, dashLength, spaceLength); @@ -126,36 +126,36 @@ export class AxShape extends Graphics { this.border.lineTo(p4.x, p4.y); this.border.closePath(); // this.border.endFill(); - } - // 画虚线 - drawDash(target, x1, y1, x2, y2, dashLength = 5, spaceLength = 1) { - const x = x2 - x1; - const y = y2 - y1; - let hyp = Math.sqrt((x) * (x) + (y) * (y)); - const units = hyp / (dashLength + spaceLength); - const dashSpaceRatio = dashLength / (dashLength + spaceLength); - const dashX = (x / units) * dashSpaceRatio; - const spaceX = (x / units) - dashX; - const dashY = (y / units) * dashSpaceRatio; - const spaceY = (y / units) - dashY; + } + // 画虚线 + drawDash(target, x1, y1, x2, y2, dashLength = 5, spaceLength = 1) { + const x = x2 - x1; + const y = y2 - y1; + let hyp = Math.sqrt((x) * (x) + (y) * (y)); + const units = hyp / (dashLength + spaceLength); + const dashSpaceRatio = dashLength / (dashLength + spaceLength); + const dashX = (x / units) * dashSpaceRatio; + const spaceX = (x / units) - dashX; + const dashY = (y / units) * dashSpaceRatio; + const spaceY = (y / units) - dashY; - target.moveTo(x1, y1); + target.moveTo(x1, y1); - while (hyp > 0) { - x1 += dashX; - y1 += dashY; - hyp -= dashLength; - if (hyp < 0) { - x1 = x2; - y1 = y2; + while (hyp > 0) { + x1 += dashX; + y1 += dashY; + hyp -= dashLength; + if (hyp < 0) { + x1 = x2; + y1 = y2; + } + target.lineTo(x1, y1); + x1 += spaceX; + y1 += spaceY; + target.moveTo(x1, y1); + hyp -= spaceLength; } - target.lineTo(x1, y1); - x1 += spaceX; - y1 += spaceY; - target.moveTo(x1, y1); - hyp -= spaceLength; - } - target.moveTo(x2, y2); + target.moveTo(x2, y2); } // 计算多边形重心 public calculatePolygonGravityCenter(points: PIXI.Point[]) { diff --git a/src/app/working-area/model/configuration.ts b/src/app/working-area/model/configuration.ts index bf0507a..f26898b 100644 --- a/src/app/working-area/model/configuration.ts +++ b/src/app/working-area/model/configuration.ts @@ -45,7 +45,7 @@ export const VIEW_RIGHT = 'rightview'; export const VIEW_LEFT = 'leftview'; export const VIEW_ISOMETRY = 'isometryview'; -export enum WallTypes{ +export enum WallTypes { STRAIGHT, CURVED } @@ -77,7 +77,8 @@ export var config = { directionalDrag: true, boundsX: 500, boundsY: 500, - viewBounds: 20000 }; + viewBounds: 60000 +}; export var wallInformation = { exterior: false, interior: false, midline: true, labels: true, exteriorlabel: 'e:', interiorlabel: 'i:', midlinelabel: 'm:' }; @@ -99,7 +100,7 @@ export class Configuration extends EventDispatcher { static getInstance() { if (this.instance === undefined - || this.instance === null) { + || this.instance === null) { this.instance = new Configuration(); } return this.instance; @@ -115,7 +116,7 @@ export class Configuration extends EventDispatcher { // this.data[key] = value; config[key] = value; // if(key !== viewBounds){ - Configuration.getInstance().dispatchEvent({ type: EVENT_CHANGED, item: Configuration.getInstance(), 'key': key, 'value': value }); + Configuration.getInstance().dispatchEvent({ type: EVENT_CHANGED, item: Configuration.getInstance(), 'key': key, 'value': value }); // } } diff --git a/src/app/working-area/model/events.ts b/src/app/working-area/model/events.ts index d7da978..d06de6a 100644 --- a/src/app/working-area/model/events.ts +++ b/src/app/working-area/model/events.ts @@ -67,3 +67,5 @@ export const EVENT_MODIFY_TEXTURE_ATTRIBUTE = 'MODIFY_TEXTURE_ATTRIBUTE_EVENT'; export const EVENT_PARAMETRIC_GEOMETRY_UPATED = 'PARAMETRIC_GEOMETRY_UPATED_EVENT'; export const EVENT_SELECTION_CHANGED = 'selectionChanged'; + +export const EVENT_IMAGE_RESIZE = 'imageResize'; diff --git a/src/app/working-area/model/grid2D.ts b/src/app/working-area/model/grid2D.ts index 9683a49..7a5c17c 100644 --- a/src/app/working-area/model/grid2D.ts +++ b/src/app/working-area/model/grid2D.ts @@ -33,8 +33,8 @@ export class Grid2D extends Graphics { let spacing = Dimensioning.cmToPixel(spacingCMS); let totalLines = gridSize / spacing; let halfSize = gridSize * 0.5; - let linewidth = Math.max(1.0 / this.gridScale, 1.0) * 1/this.canvas.scale.x;// 增加缩放系数 - let highlightLineWidth = Math.max(1 / this.gridScale, 1.0) * 1/this.canvas.scale.x;// 增加缩放系数 + let linewidth = Math.max(1.0 / this.gridScale, 1.0) * 1 / this.canvas.scale.x;// 增加缩放系数 + let highlightLineWidth = Math.max(1 / this.gridScale, 1.0) * 1 / this.canvas.scale.x;// 增加缩放系数 let normalColor = 0xE0E0E0; let highlightColor = 0xD0D0D0; const cellSize = 5; @@ -52,10 +52,10 @@ export class Grid2D extends Graphics { this.endFill(); this.beginFill(0xFF0000, 1.0); - this.drawCircle(-halfSize, -halfSize,5); - this.drawCircle(halfSize, -halfSize,5); - this.drawCircle(halfSize, halfSize,5); - this.drawCircle(-halfSize, halfSize,5); + this.drawCircle(-halfSize, -halfSize, 5); + this.drawCircle(halfSize, -halfSize, 5); + this.drawCircle(halfSize, halfSize, 5); + this.drawCircle(-halfSize, halfSize, 5); this.drawCircle(0, 0, 5); this.endFill(); } @@ -80,8 +80,8 @@ export class Grid2D extends Graphics { let spacing = Dimensioning.cmToPixel(spacingCMS); let halfSize = gridSize * 0.5; return { - x: Math.floor((x - -halfSize) / spacing), - y: Math.floor((y - -halfSize) / spacing), + x: Math.floor((x - -halfSize) / spacing), + y: Math.floor((y - -halfSize) / spacing), }; } } diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index fae03ae..f3b4165 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -21,7 +21,9 @@ import { AxSelection } from './model/axSelection'; import { AxMessageSystem } from './model/axMessageSystem'; import { Grid2D } from './model/grid2D'; import { Viewport } from 'pixi-viewport'; -import { EVENT_SELECTION_CHANGED } from './model/events'; +import { EVENT_IMAGE_RESIZE, EVENT_SELECTION_CHANGED } from './model/events'; +import { Dimensioning } from './model/dimensioning'; +import { Configuration, viewBounds } from './model/configuration'; @Component({ @@ -90,7 +92,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV */ public selection: AxSelection = new AxSelection(); /** - * 当前鼠标的点 + * 当前鼠标点击的点 */ public currentClickPoint: PIXI.Graphics = new PIXI.Graphics(); /** @@ -151,6 +153,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV public animationTime; // 是否按下Ctrl键 isCtrlKeyClicked = false; + // 是否开启多点连线垂直绘制 + isDrawVerticalLine = false; /** * 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta * Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。 @@ -162,7 +166,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 重大调整-主版本号增加 * 日期变更-日期版本号增加 */ - public VERSION = '1.2.2.20210220_beta'; + public VERSION = '1.4.0.20210302_rc'; /** * 数据初始化 */ @@ -171,12 +175,31 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV PIXI.utils.skipHello(); this.sayHello(); this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => { - + // if (event.keyCode === 16) { + // this.isDrawVerticalLine = true; + // } + switch (event.keyCode) { + case 16: + this.isDrawVerticalLine = true; + break; + default: + break; + } }); this.eventManager.addGlobalEventListener('window', 'keyup', (event: any) => { - // 按Del键删除选中的图标 - if (event.keyCode === 46) { - this.deleteSelectedShape(); + // // 按Del键删除选中的图标 + // if (event.keyCode === 46) { + // this.deleteSelectedShape(); + // } + switch (event.keyCode) { + case 16: // shift + this.isDrawVerticalLine = false; + break; + case 46: // delete + this.deleteSelectedShape(); + break; + default: + break; } }); } @@ -186,7 +209,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.camera2D.destroy(); this.app.destroy(); } - public setMulitSelect(b: boolean) { if (b) { this.isCtrlKeyClicked = true; @@ -344,11 +366,12 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 创建2D相机 */ private createViewport(): void { + var gridSize = Dimensioning.cmToPixel(Configuration.getNumericValue(viewBounds) * 1); this.camera2D = new Viewport({ screenWidth: this.app.view.width, screenHeight: this.app.view.height, - worldWidth: 20000, - worldHeight: 20000, + worldWidth: gridSize, + worldHeight: gridSize, interaction: this.app.renderer.plugins.interaction, }); this.camera2D.pivot.set(0.5); @@ -357,10 +380,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.camera2D .clamp({ - left: -10000, - right: 10000, - top: -10000, - bottom: 10000, + left: -gridSize / 2, + right: gridSize / 2, + top: -gridSize / 2, + bottom: gridSize / 2, }) .drag() .pinch() @@ -774,8 +797,27 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV break; case PaintMode.lineIcon: this.previewLineSegment.visible = true; - this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); - this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); + + var point = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + if (this.isDrawVerticalLine && this.paintPoints.length !== 0) { + // 起点距离终点水平距离 + const dh = Math.abs(point.x - this.currentClickPoint.x); + // 起点距离终点垂直距离 + const dv = Math.abs(point.y - this.currentClickPoint.y); + if (dh >= dv) { + // 绘制水平线 + point = new PIXI.Point(this.circleShadow.x, this.currentClickPoint.y); + + } else { + // 绘制垂直线 + point = new PIXI.Point(this.currentClickPoint.x, this.circleShadow.y); + } + this.currentClickPoint.position = new PIXI.Point(point.x, point.y); + } else { + this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + } + // 添加数据 + this.paintPoints.push(point); if (this.paintPoints.length >= 2) { this.enterPaintEndButton.position = this.circleShadow.position; @@ -832,8 +874,28 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV break; case PaintMode.polygonIcon: this.previewLineSegment.visible = true; - 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.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + // this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); + var point = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + if (this.isDrawVerticalLine && this.paintPoints.length !== 0) { + // 起点距离终点水平距离 + const dh = Math.abs(point.x - this.currentClickPoint.x); + // 起点距离终点垂直距离 + const dv = Math.abs(point.y - this.currentClickPoint.y); + if (dh >= dv) { + // 绘制水平线 + point = new PIXI.Point(this.circleShadow.x, this.currentClickPoint.y); + + } else { + // 绘制垂直线 + point = new PIXI.Point(this.currentClickPoint.x, this.circleShadow.y); + } + this.currentClickPoint.position = new PIXI.Point(point.x, point.y); + } else { + this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + } + // 添加数据 + this.paintPoints.push(point); if (this.paintPoints.length === 1) { this.enterPaintEndButton.position = this.circleShadow.position; } else if (this.paintPoints.length >= 3) { @@ -868,8 +930,28 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV 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)); + // this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + // this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); + var point = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + if (this.isDrawVerticalLine && this.paintPoints.length !== 0) { + // 起点距离终点水平距离 + const dh = Math.abs(point.x - this.currentClickPoint.x); + // 起点距离终点垂直距离 + const dv = Math.abs(point.y - this.currentClickPoint.y); + if (dh >= dv) { + // 绘制水平线 + point = new PIXI.Point(this.circleShadow.x, this.currentClickPoint.y); + + } else { + // 绘制垂直线 + point = new PIXI.Point(this.currentClickPoint.x, this.circleShadow.y); + } + this.currentClickPoint.position = new PIXI.Point(point.x, point.y); + } else { + this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + } + // 添加数据 + this.paintPoints.push(point); if (this.paintPoints.length < 2) { return; } @@ -1207,10 +1289,29 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * @param pointB 点B */ private refreshPreviewLineSegment(pointA: PIXI.Point, pointB: PIXI.Point) { + const ps: PIXI.Point = pointA; + let pe: PIXI.Point = pointB; + if (this.isDrawVerticalLine) { + // 起点距离终点水平距离 + const dh = Math.abs(pointB.x - pointA.x); + // 起点距离终点垂直距离 + const dv = Math.abs(pointB.y - pointA.y); + if (dh >= dv) { + // 绘制水平线 + pe = new PIXI.Point(pointB.x, pointA.y); + + } else { + // 绘制垂直线 + pe = new PIXI.Point(pointA.x, pointB.y); + } + } + this.previewLineSegment.clear(); this.previewLineSegment.lineStyle(1 / this.backgroundImage.scale.x, 0x00ff00, 1); - this.previewLineSegment.moveTo(pointA.x, pointA.y); - this.previewLineSegment.lineTo(pointB.x, pointB.y); + // this.previewLineSegment.moveTo(pointA.y, pointA.y); + // this.previewLineSegment.lineTo(pointB.x, pointB.y); + this.previewLineSegment.moveTo(ps.x, ps.y); + this.previewLineSegment.lineTo(pe.x, pe.y); } /** * 创建半径图标影子