1. 在Angular中使用ngx-avatar组件来显示图片和标注。该组件提供了添加标注和点击标注的功能。

2. 创建一个Marker类型的对象来存储标注的信息，并添加到标注的列表中。

export class Marker {
  x: number;
  y: number;
  label: string;
}

markers: Marker[] = [
  { x: 30, y: 60, label: "Label 1" },
  { x: 70, y: 40, label: "Label 2" }
];

3. 为点击标注时触发的事件编写onMarkerClick()函数。

onMarkerClick(marker: Marker) {
  console.log("Clicked marker:", marker);
}

4. 添加新的标注使用addMarker()函数，该函数获取鼠标点击的位置并将其转换为相对于图像的坐标。

addMarker(event: MouseEvent): void {
  const x = event.offsetX / event.target.clientWidth * 100;
  const y = event.offsetY / event.target.clientHeight * 100;
  const label = "Label " + this.markers.length;
  this.markers.push({ x, y, label });
}

5. 添加标注的按钮和事件侦听器。

Add Marker