[新增]增加适应缩放和重置缩放按钮

src/app/ui/collection-tools/collection-tools.component.html

@@ -22,6 +22,14 @@
     <span class="marginLeftRight">
       <mat-checkbox color="primary" [(ngModel)]="isMultiSelect" (change)='changeMultiSelect($event)'></mat-checkbox> 多选
     </span>
+    <span title="适应缩放" class="zoom" (click)="adaptZoom()">
+      <img src="/assets/images/适应缩放.png" alt="">
+      适应缩放
+    </span>
+    <span title="重置缩放" class="zoom" (click)="resetZoom()">
+      <img src="/assets/images/重置缩放.png" alt="">
+      重置缩放
+    </span>
     <span style="position: absolute;right: 60px;cursor: pointer;">
       <mat-icon title="查看/编辑模式" (click)="lookpat()" *ngIf="isEditPattern">tv</mat-icon>
       <mat-icon title="查看/编辑模式" (click)="editpat()" *ngIf="!isEditPattern">create</mat-icon>

src/app/ui/collection-tools/collection-tools.component.scss

@@ -25,6 +25,15 @@
   align-items:center;
   min-height: 40px;
   background-color: #fff;
+  .zoom{
+    display: flex;
+    align-items: center;
+    margin-left: 15px;
+    cursor: pointer;
+    img{
+      margin-right: 3px;
+    }
+  }
   .nameShow{
     cursor: pointer;
     user-select: none;

src/app/ui/collection-tools/collection-tools.component.ts

@@ -137,6 +137,14 @@ export class CollectionToolsComponent implements OnInit {
       this.isImgNumCss = false
     }
   }
+  //适应缩放
+  adaptZoom(){
+    this.canvas.zoomFit()
+  }
+  //重置缩放
+  resetZoom(){
+    this.canvas.resetCamera2D()
+  }
   //右侧div边框宽度调节
   rightDivMouseDown(e){
     document.onmousemove = (ev) => {

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

@@ -458,7 +458,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   /**
    * 重置相机
    */
-  private resetCamera2D() {
+  public resetCamera2D() {
     this.camera2D.scale.set(1);
     this.camera2D.x = (this.app.view.width - this.backgroundImage.width) / 2;
     this.camera2D.y = (this.app.view.height - this.backgroundImage.height) / 2;