如果单击画布图形中的标签，如何获取被单击的标签

Question

I am trying to click at the corner of the polygon and then logging the label which I have clicked. I am attaching an event listener on canvas clicked and then logging the coordinates but they are not exactly the same which they were while drawing so how to get the intersection point(that is label) on click.

My code so far

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]

online editor link

Answer 1

You can do this with a bit of Math:

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);
      }
    })
  }