From c7894b4ab87fffff7b335726058e5f4b9751370d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E6=8C=AF=E5=8D=87?= <359059686@qq.com> Date: Thu, 25 Feb 2021 16:46:32 +0800 Subject: [PATCH] =?UTF-8?q?1.3.0=20=E6=96=B0=E5=A2=9E=20=E5=A4=9A=E7=82=B9?= =?UTF-8?q?=E8=BF=9E=E7=BA=BF=E3=80=81=E5=A4=9A=E8=BE=B9=E5=BD=A2=E7=AD=89?= =?UTF-8?q?=E6=8C=89=E4=BD=8Fshift=E7=BB=98=E5=88=B6=E5=9E=82=E7=9B=B4?= =?UTF-8?q?=E7=BA=BF=E6=AE=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../working-area/working-area.component.ts | 128 ++++++++++++++++-- 1 file changed, 114 insertions(+), 14 deletions(-) diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index fae03ae..12e5771 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -90,7 +90,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV */ public selection: AxSelection = new AxSelection(); /** - * 当前鼠标的点 + * 当前鼠标点击的点 */ public currentClickPoint: PIXI.Graphics = new PIXI.Graphics(); /** @@ -151,6 +151,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 +164,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 重大调整-主版本号增加 * 日期变更-日期版本号增加 */ - public VERSION = '1.2.2.20210220_beta'; + // todo shift绘制垂直线段 + public VERSION = '1.3.0.20210220_beta'; /** * 数据初始化 */ @@ -171,12 +174,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; } }); } @@ -774,8 +796,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 +873,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 +929,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 +1288,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); } /** * 创建半径图标影子