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); } /** * 创建半径图标影子 diff --git a/src/assets/images/enterPaintButton.png b/src/assets/images/enterPaintButton.png index e6b99b7..e5abb92 100644 Binary files a/src/assets/images/enterPaintButton.png and b/src/assets/images/enterPaintButton.png differ