[完善] 完善背景图替换访问

src/app/working-area/working-area.component.html

@@ -1,14 +1 @@
-<div #content style="width:100%;height:100%;" (mousewheel)='mouseWheelHandel($event)'>
-    <!-- <div align="center">
-        <button
-            (click)="this.changeBackgroundImage('https://qntemp3.bejson.com/upload/72681686638249940.jpg?imageView2/0/w/0/h/0/format/webp')">替换背景图</button>
-        <button
-            (click)="this.beginPaintSinglePointIcon('https://qntemp3.bejson.com/upload/72681686638249940.jpg?imageView2/0/w/100/h/100/format/webp')">创建图标</button>
-        <button
-            (click)="this.changeBackgroundImage('https://qntemp3.bejson.com/upload/72681686638249940.jpg?imageView2/0/w/0/h/0/format/webp')">创建多边形</button>
-        <button
-            (click)="this.changeBackgroundImage('https://qntemp3.bejson.com/upload/72681686638249940.jpg?imageView2/0/w/0/h/0/format/webp')">创建多点连线</button>
-        <button (click)="this.cancelPaint()">取消创建</button>
-    </div> -->
-
-</div>
+<div #content style="width:100%;height:100%;" (mousewheel)='this.mouseWheelHandel($event)'></div>

src/app/working-area/working-area.component.ts

@@ -44,7 +44,7 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
   /// <summary>
   /// 初始化
   /// <summary>
-  init() {
+  private init() {
     this.createCanvas();
     this.createBackgroundImage();
     this.createSingleShadowIcon();
@@ -52,7 +52,7 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
   /// <summary>
   /// 鼠标滑动事件
   /// <summary>
-  mouseWheelHandel(event) {
+  protected mouseWheelHandel(event) {
     const delX = this.mousePosition.x - this.backgroundImage.position.x;
     const delY = this.mousePosition.y - this.backgroundImage.position.y;
     const pivot = this.backgroundImage.toLocal(this.mousePosition);
@@ -87,7 +87,7 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
   /// <summary>
   /// 创建画布
   /// <summary>
-  createCanvas(): void {
+  private createCanvas(): void {
     this.app = new PIXI.Application({
       width: this.content.nativeElement.clientWidth,
       height: this.content.nativeElement.clientHeight,
@@ -108,7 +108,7 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
   /// <summary>
   /// 创建单点图标
   /// <summary>
-  createSinglePointIcon(source: PIXI.Texture, x: number, y: number, width: number, height: number, alpha: number): PIXI.Sprite {
+  private createSinglePointIcon(source: PIXI.Texture, x: number, y: number, width: number, height: number, alpha: number): PIXI.Sprite {
     const sprite = new PIXI.Sprite(source);
     sprite.x = x;
     sprite.y = y;
@@ -149,23 +149,9 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
     return sprite;
   }
   /// <summary>
-  /// 画圆
-  /// <summary>
-  paintShadowCircle(x: number): void {
-    this.circleShadow.beginFill(0xFFCC5A);
-    this.circleShadow.drawCircle(0, 0, x);
-    this.app.stage.addChild(this.circleShadow);
-  }
-  /// <summary>
-  /// 取消画圆
-  /// <summary>
-  cancelPaintShadowCircle(): void {
-    this.app.stage.removeChild(this.circleShadow);
-  }
-  /// <summary>
   /// 创建背景图
   /// <summary>
-  createBackgroundImage(): void {
+  private createBackgroundImage(): void {
     this.backgroundImage = PIXI.Sprite.from('assets/images/noImg.png');
     this.backgroundImage.anchor.set(0.5);
     this.backgroundImage.x = this.app.view.width / 2;
@@ -235,15 +221,16 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
   }
   /// <summary>
   /// 替换背景图
+  /// 参数{source：string} 可以是一个url地址,也可以是本地assets下的一个图片路径
   /// <summary>
-  changeBackgroundImage(source: string): void {
+  public changeBackgroundImage(source: string): void {
     this.backgroundImage.texture = PIXI.Texture.from(source);
     this.backgroundImage.visible = true;
   }
   /// <summary>
   /// 创建单点影子图标
   /// <summary>
-  createSingleShadowIcon(): void {
+  private createSingleShadowIcon(): void {
     this.singlePointIconShadow = PIXI.Sprite.from('assets/images/noImg.png');
     this.singlePointIconShadow.width = 32;
     this.singlePointIconShadow.height = 32;
@@ -255,25 +242,28 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
   /// <summary>
   /// 改变单点影子图标
   /// <summary>
-  changeSingleShadowIcon(source: string): void {
+  private changeSingleShadowIcon(source: string): void {
     this.singlePointIconShadow.texture = PIXI.Texture.from(source);
     this.singlePointIconShadow.visible = true;
   }
   /// <summary>
   /// 开始绘画单点图标
   /// <summary>
-  beginPaintSinglePointIcon(source: string): void {
+  public beginPaintSinglePointIcon(source: string): void {
     this.cancelPaint();
     this.paintMode = PaintMode.SinglePointIcon;
     this.changeSingleShadowIcon(source);
   }
-  beginPaintPolygonIcon(source: string): void {
+  // 开始绘画多边形
+  public beginPaintPolygonIcon(source: string): void {
+    this.cancelPaint();
+    this.paintMode = PaintMode.PolygonIcon;
 
   }
   /// <summary>
   /// 取消绘画
   /// <summary>
-  cancelPaint(): void {
+  private cancelPaint(): void {
     switch (this.paintMode) {
       case PaintMode.None:
         break;
@@ -289,6 +279,20 @@ export class WorkingAreaComponent implements OnInit, AfterViewInit {
         break;
     }
   }
+  /// <summary>
+  /// 画圆
+  /// <summary>
+  paintShadowCircle(x: number): void {
+    this.circleShadow.beginFill(0xFFCC5A);
+    this.circleShadow.drawCircle(0, 0, x);
+    this.app.stage.addChild(this.circleShadow);
+  }
+  /// <summary>
+  /// 取消画圆
+  /// <summary>
+  cancelPaintShadowCircle(): void {
+    this.app.stage.removeChild(this.circleShadow);
+  }
 }
 /// <summary>
 /// 绘制模式