diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index 2cb1668..bb6ca24 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -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',