shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

1.3.0 新增 多点连线、多边形等按住shift绘制垂直线段

zhuzhou
徐振升 4 years ago
parent
764c32e0c7
commit
5721d29ef2
2 changed files with 114 additions and 14 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 128
      src/app/working-area/working-area.component.ts
  2. BIN
      src/assets/images/enterPaintButton.png

128
src/app/working-area/working-area.component.ts
Unescape View File

@ -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);
}
/**
* 创建半径图标影子

BIN
src/assets/images/enterPaintButton.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 939 B

Write Preview
Loading…
Cancel
Save