как узнать, какая метка была нажата, если щелкнуть метку на графике холста

Question

Я пытаюсь щелкнуть по углу многоугольника и затем записать метку, на которой щелкнул. Я прикрепляю прослушиватель событий на холст, на который нажали, и затем записываю координаты, но они не совпадают с теми, что были при рисовании, поэтому как получить точку пересечения (то есть метку) при щелчке.

Мой код пока что

export class AppComponent implements AfterViewInit {

  coordinates = [
    {
      x:10,
      y:10,
      label:'A'
    },
        {
      x:10,
      y:250,
      label:'B'
    },
        {
      x:250,
      y:250,
      label:'C'
    },
        {
      x:250,
      y:150,
      label:'D'
    },

        {
      x:400,
      y:150,
      label:'E'
    },

        {
      x:400,
      y:10,
      label:'F'
    }

  ]
  /** Template reference to the canvas element */
  @ViewChild('canvasEl') canvasRef: ElementRef;

  /** Canvas 2d context */
  private context: CanvasRenderingContext2D;

  constructor() {}

  ngAfterViewInit() {

  this.setDummyRoofLayout();
  }

   setDummyRoofLayout() {
    let ctx: CanvasRenderingContext2D = this.canvasRef.nativeElement.getContext(
      '2d'
    );
    let ctx2: CanvasRenderingContext2D = this.canvasRef.nativeElement.getContext(
      '2d'
    );
    let label: CanvasRenderingContext2D = this.canvasRef.nativeElement.getContext(
      '2d'
    );

    ctx.strokeStyle = '#EE9723';
    ctx.lineWidth = 2;
    ctx.beginPath();

    ctx2.beginPath();
    ctx2.fillStyle = '#EE9723';
    ctx2.arc(10, 10, 10, 0, 2 * Math.PI);
    ctx2.fill();

    ctx2.beginPath();
    ctx2.arc(10, 250, 10, 0, 2 * Math.PI);
    ctx2.fill();

    ctx2.beginPath();
    ctx2.arc(250, 250, 10, 0, 2 * Math.PI);
    ctx2.fill();

    ctx2.beginPath();
    ctx2.arc(250, 150, 10, 0, 2 * Math.PI);
    ctx2.fill();

    ctx2.beginPath();
    ctx2.arc(400, 150, 10, 0, 2 * Math.PI);
    ctx2.fill();

    ctx2.beginPath();
    ctx2.arc(400, 10, 10, 0, 2 * Math.PI);
    ctx2.fill();

    ctx.moveTo(10, 10);

    ctx.lineTo(10, 250);

    ctx.lineTo(250, 250);

    ctx.lineTo(250, 150);

    ctx.lineTo(400, 150);

    ctx.lineTo(400, 10);

    ctx.lineTo(10, 10);

    ctx.stroke();

    label.beginPath();
    label.moveTo(10, 10);
    label.fillStyle = 'white';
    label.textAlign = 'center';
    label.textBaseline = 'middle';
    label.font = '.75rem Arial';
    label.fillText('A', 10, 10);
    label.fillText('B', 10, 250);
    label.fillText('C', 250, 250);
    label.fillText('D', 250, 150);
    label.fillText('E', 400, 150);
    label.fillText('F', 400, 10);

    label.stroke();

    ctx.canvas.addEventListener(
      'click',
      this.onclick.bind(this)
    );
  }

  onclick(e){
    console.log(e);
      let xAxis = e.layerX ;
    let yAxis = e.layerY;

    this.coordinates.forEach(element=>{
      if(element.x+4 <xAxis && element.y+4>yAxis){
        alert('label A clicked');

      }
    })

  }




}][1]][1]

ссылка онлайн-редактора

Answer 1

Вы можете сделать это с небольшим количеством математики:

intersect(point, coord) {
     return Math.sqrt((point.x-coord.x) ** 2 + (point.y - coord.y) ** 2) < 10; //where 10 = your circle radius
}

onclick(e: MouseEvent){
    const pos = {
      x: e.layerX,
      y: e.layerY
    };

    this.coordinates.forEach(coord => {
      if (this.intersect(pos, coord)) {
        alert('clicked: ' + coord.label);
      }
    })
  }

Демонстрация стека Blitz