|
|
|
|
@ -81,6 +81,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
* 拷贝素材数据 |
|
|
|
|
*/ |
|
|
|
|
public copyData: any[] = []; |
|
|
|
|
|
|
|
|
|
private enterPaintEndButton = PIXI.Sprite.from('assets/images/enterPaintButton.jpg'); |
|
|
|
|
// 根据ID 找到图标
|
|
|
|
|
|
|
|
|
|
// 根据ID 找到数据
|
|
|
|
|
@ -178,7 +180,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
antialias: true, |
|
|
|
|
transparent: false, |
|
|
|
|
resolution: 1, |
|
|
|
|
backgroundColor: 0x1099bb// 0xffffff
|
|
|
|
|
backgroundColor: 0x00ff00// 0xffffff
|
|
|
|
|
}); |
|
|
|
|
this.content.nativeElement.appendChild(this.app.view); |
|
|
|
|
|
|
|
|
|
@ -359,23 +361,30 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
* 创建确认绘制结束按钮 |
|
|
|
|
*/ |
|
|
|
|
private createEnterPaintEndButton() { |
|
|
|
|
const enterPaintEndButton = PIXI.Sprite.from('assets/images/enterPaintButton.jpg'); |
|
|
|
|
enterPaintEndButton.width = 60; |
|
|
|
|
enterPaintEndButton.height = 60; |
|
|
|
|
enterPaintEndButton.anchor.set(0.5); |
|
|
|
|
enterPaintEndButton.position = this.circleShadow.position; |
|
|
|
|
enterPaintEndButton.interactive = true; |
|
|
|
|
enterPaintEndButton.buttonMode = true; |
|
|
|
|
enterPaintEndButton |
|
|
|
|
this.enterPaintEndButton.width = 60; |
|
|
|
|
this.enterPaintEndButton.height = 60; |
|
|
|
|
this.enterPaintEndButton.anchor.set(0.5); |
|
|
|
|
this.enterPaintEndButton.position = new PIXI.Point(0, 0); |
|
|
|
|
this.enterPaintEndButton.interactive = true; |
|
|
|
|
this.enterPaintEndButton.buttonMode = true; |
|
|
|
|
this.enterPaintEndButton |
|
|
|
|
.on('mousedown', event => { |
|
|
|
|
event.stopPropagation(); |
|
|
|
|
this.emit('createIcon'); |
|
|
|
|
this.backgroundImage.removeChild(event.currentTarget); |
|
|
|
|
this.enterPaintEndButton.visible = false; |
|
|
|
|
this.enterPaint(); |
|
|
|
|
}); |
|
|
|
|
this.backgroundImage.addChild(enterPaintEndButton); |
|
|
|
|
enterPaintEndButton.zIndex = this.backgroundImage.children.length; |
|
|
|
|
this.backgroundImage.addChild(this.enterPaintEndButton); |
|
|
|
|
this.enterPaintEndButton.zIndex = this.backgroundImage.children.length; |
|
|
|
|
this.enterPaintEndButton.visible = false; |
|
|
|
|
} |
|
|
|
|
// /**
|
|
|
|
|
// * 刷新确认按钮
|
|
|
|
|
// */
|
|
|
|
|
// private refreshEnterPaintEndButton() {
|
|
|
|
|
// this.enterPaintEndButton.position = this.circleShadow.position;
|
|
|
|
|
// this.enterPaintEndButton.visible = true;
|
|
|
|
|
// }
|
|
|
|
|
/** |
|
|
|
|
* 创建背景图 |
|
|
|
|
*/ |
|
|
|
|
@ -451,8 +460,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); |
|
|
|
|
this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); |
|
|
|
|
|
|
|
|
|
if (this.paintPoints.length === 2) { |
|
|
|
|
this.createEnterPaintEndButton(); |
|
|
|
|
if (this.paintPoints.length >= 2) { |
|
|
|
|
this.enterPaintEndButton.position = this.circleShadow.position; |
|
|
|
|
this.enterPaintEndButton.visible = true; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (this.paintingIcon !== null) { |
|
|
|
|
@ -504,9 +514,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
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)); |
|
|
|
|
|
|
|
|
|
if (this.paintPoints.length === 3) { |
|
|
|
|
this.createEnterPaintEndButton(); |
|
|
|
|
if (this.paintPoints.length === 1) { |
|
|
|
|
this.enterPaintEndButton.position = this.circleShadow.position; |
|
|
|
|
} else if (this.paintPoints.length >= 3) { |
|
|
|
|
this.enterPaintEndButton.visible = true; |
|
|
|
|
} |
|
|
|
|
this.paintPoints.forEach((value, index, array) => { |
|
|
|
|
if (index === 0) { |
|
|
|
|
@ -560,6 +571,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
this.createPreviewSinglePointIcon(); |
|
|
|
|
this.createPreviewLineSegment(); |
|
|
|
|
this.createCircleShadow(); |
|
|
|
|
this.createEnterPaintEndButton(); |
|
|
|
|
this.backgroundImage.addChild(this.paintingLine); |
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
@ -641,7 +653,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
*/ |
|
|
|
|
private createCircleShadow(): void { |
|
|
|
|
this.circleShadow.beginFill(0xFFCC5A); |
|
|
|
|
this.circleShadow.drawCircle(0, 0, 5); |
|
|
|
|
this.circleShadow.drawCircle(0, 0, 10); |
|
|
|
|
this.circleShadow.endFill(); |
|
|
|
|
this.circleShadow.visible = false; |
|
|
|
|
this.backgroundImage.addChild(this.circleShadow); |
|
|
|
|
@ -690,7 +702,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
/** |
|
|
|
|
* 取消绘画 |
|
|
|
|
*/ |
|
|
|
|
private cancelPaint(): void { |
|
|
|
|
public cancelPaint(): void { |
|
|
|
|
switch (this.paintMode) { |
|
|
|
|
case PaintMode.singlePointIcon: |
|
|
|
|
this.previewSinglePointIcon.visible = false; |
|
|
|
|
@ -841,7 +853,7 @@ export class SinglePointIcon extends PIXI.Container {
|
|
|
|
|
fontStyle: 'normal', |
|
|
|
|
fontWeight: 'bold', |
|
|
|
|
fill: ['#000000'], |
|
|
|
|
stroke: '#00ff99', |
|
|
|
|
stroke: '#ffffff', |
|
|
|
|
strokeThickness: 3, |
|
|
|
|
dropShadow: true, |
|
|
|
|
dropShadowColor: '#000000', |
|
|
|
|
@ -909,12 +921,14 @@ export class SinglePointIcon extends PIXI.Container {
|
|
|
|
|
}) |
|
|
|
|
.on('rightclick', event => { |
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
.on('mouseover', event => { |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
this.workingArea.on('backgroundScale', data => { |
|
|
|
|
if (this.assetData.FixedSize) { |
|
|
|
|
const scale = 1 / data; |
|
|
|
|
console.log(scale); |
|
|
|
|
this.scale.set(scale); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
@ -957,7 +971,7 @@ export class MultipointIcon extends PIXI.Container {
|
|
|
|
|
fontStyle: 'normal', |
|
|
|
|
fontWeight: 'bold', |
|
|
|
|
fill: ['#000000'], |
|
|
|
|
stroke: '#00ff99', |
|
|
|
|
stroke: '#ffffff', |
|
|
|
|
strokeThickness: 3, |
|
|
|
|
dropShadow: true, |
|
|
|
|
dropShadowColor: '#000000', |
|
|
|
|
@ -1101,6 +1115,9 @@ export class MultipointIcon extends PIXI.Container {
|
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.on('rightclick', event => { |
|
|
|
|
}) |
|
|
|
|
.on('mouseover', event => { |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
// 添加选中事件
|
|
|
|
|
@ -1180,7 +1197,7 @@ export class PolygonIcon extends PIXI.Container {
|
|
|
|
|
fontStyle: 'normal', |
|
|
|
|
fontWeight: 'bold', |
|
|
|
|
fill: ['#000000'], |
|
|
|
|
stroke: '#00ff99', |
|
|
|
|
stroke: '#ffffff', |
|
|
|
|
strokeThickness: 3, |
|
|
|
|
dropShadow: true, |
|
|
|
|
dropShadowColor: '#000000', |
|
|
|
|
|
