删除多边形内的矩形时出现问题

Question

＆＃13;

＆＃13;

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { MountingTypeComponent } from './mounting-type/mounting-type.component';
import 'fabric';
declare let fabric;
@Component({
  selector: "app-custom-report",
  templateUrl: "./custom-report.component.html",
  styleUrls: ["./custom-report.component.scss"]
})
export class CustomReportComponent implements OnInit {
  private canvas;
  private boundbox;
  private shapes = [];
  private shapeNoModuleZone;
  private shape2;
  private shapex;
  animal: string;
  constructor(public dialog: MatDialog) {
    this.shape2 = new fabric.Rect({
      width: 50,
      height: 100,
      fill: "green",
      left: 335,
      top: 305,
      lockRotation: true,
      hasControls: false,
      perPixelTargetFind: true
    });
    this.shapes.push(this.shape2);
  }
  openDialog(): void {
    let dialogRef = this.dialog.open(MountingTypeComponent, {
     height: '300px',
  width: '235px',
      data: { animal: this.animal }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log("The dialog was closed");
      this.animal = result;
    });
  }
  deleteModule() {
    const activeObject = this.canvas.getActiveObject();
   // console.log(this.canvas.getActiveObject().left);
    if (this.canvas.getActiveObject()) {
      for (let i = 0; i < this.shapes.length; i++) {
        console.log(this.shapes[i].left, this.canvas.getActiveObject().left);
        if (
          this.canvas.getActiveObject().left ===
          this.shapes[i].left
        ) {

          console.log("both are equal");
          this.canvas.remove(this.canvas.getActiveObject());
         this.shapes.splice(i, 1);
         break;
        }
      }
    }
    console.log(this.shapes);
  }


  addModule() {
    this.shapex = new fabric.Rect({
      width: 50,
      height: 100,
      fill: "green",
      left: 335,
      top: 305,
      lockRotation: true,
      hasControls: false,
      perPixelTargetFind: true
    });
    this.shapes.push(this.shapex);
    console.log(this.shapes);
    for (let i = 0; i < this.shapes.length; i++) {
      this.canvas.add(this.shapes[i]);
    }
  }

  ngOnInit() {
    this.canvas = new fabric.Canvas("canvas", {});
    console.log(this.canvas);
    this.boundbox = new fabric.Polygon(
      [
        { x: 0, y: -150 },
        { x: 250, y: -150 },
        { x: 250, y: 250 },
        { x: -150, y: 250 },
        { x: -150, y: 50 },
        { x: 0, y: 50 }
      ],
      {
        left: 0,
        top: 0,
        angle: 0,
        fill: "lightgrey",
        selectable: false
      }
    );

    const text = new fabric.Text("No module zone", {
      fontSize: 30,
      fill: "white",
      left: 338,
      top: 115,
      selectable: false
    });

    this.shapeNoModuleZone = new fabric.Rect({
      label: "no module zone",
      width: 200,
      height: 100,
      fill: "red",
      text: "No module zone",
      left: 338,
      top: 95,
      selectable: false
    });

    let group = new fabric.Group([this.shapeNoModuleZone, text], {
      selectable: false
    });

    this.canvas.add(this.boundbox);
    for (let i = 0; i < this.shapes.length; i++) {
      console.log(this.shapes[i]);
      this.canvas.add(this.shapes[i]);
    }
    //   this.canvas.add(this.shapeNoModuleZone);
    this.canvas.add(group);
    this.canvas.centerObject(this.boundbox);
  }
}

＆＃13;

       <div class="button-row">
<button mat-raised-button (click)="addModule()">Add Module</button>  
<button mat-raised-button color="warn" (click)="deleteModule()">Delete 
 Module</button>
<button mat-raised-button (click)="openDialog()">Type of mounting</button>
<button mat-raised-button color="primary">Panel Tilt</button>
<button mat-raised-button>Inter row distance</button>
<button mat-raised-button color="accent">Landscape vs Portrait</button>
<button mat-raised-button>Module Rating</button>
            </div>
<canvas id="myCanvas" width="500" height="430" style="border:1px solid #000000;">
</canvas>

＆＃13;

＆＃13;

＆＃13;

点击添加模块按钮，我在多边形内添加一个新的绿色矩形，可以在任何位置拖放，选择一个特殊的rctangle后，我点击删除模块按钮，然后删除所选的矩形。 但是，有时它可以工作，有时它不工作，当它不工作时，我收到这样的错误。

编辑：在休息之后，我摆脱了那个错误，但是它仍然表现得相同，即有时它会删除矩形，而有时却没有。在这个截图中，它没有删除矩形，而是比较了左边的值并找到了相同的值。

1：

Answer 1

deleteModule() {
  const activeObject = this.canvas.getActiveObject();
  // console.log(this.canvas.getActiveObject().left);
  if (this.canvas.getActiveObject()) {
    for (let i = 0; i < this.shapes.length; i++) {
      console.log(this.shapes[i].left, this.canvas.getActiveObject().left);
      if (this.canvas.getActiveObject().left ===this.shapes[i].left) 
      {

        console.log("both are equal");
        this.canvas.remove(this.canvas.getActiveObject());
        break;
        //  this.shapes.splice(i, 1);
      }
    }
  }
  console.log(this.shapes);
}

在从画布break;中删除对象后，在此函数中循环。出现错误是因为删除this.canvas.getActiveObject()后会返回null;

addModule() {
  this.shapex = new fabric.Rect({
    width: 50,
    height: 100,
    fill: "green",
    left: 335,
    top: 305,
    lockRotation: true,
    hasControls: false,
    perPixelTargetFind: true
  });
  this.shapes.push(this.shapex);
  console.log(this.shapes);
  //for (let i = 0; i < this.shapes.length; i++) {
  //  this.canvas.add(this.shapes[i]);
  //}
  this.canvas.add(this.shapex);
}

添加dont循环遍历您存储的所有形状以在画布中再次添加它时，只需在this.canvas.add(this.shapex);内添加新创建的对象ngOnInit()