angular图片上创建的有红点坐标点击切换图片如何清除上次红点坐标添加新图片的

红点坐标？

可以在切换图片时，将上次的红点坐标清除，然后在添加新图片时，根据需要添加新的红点坐标。

以下是一个示例代码，可以供参考：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-image',
  templateUrl: './image.component.html',
  styleUrls: ['./image.component.css']
})
export class ImageComponent implements OnInit {

  imageUrl: string = '';
  redDotCoordinates: number[] = [];

  constructor() { }

  ngOnInit() {
  }

  onImageChange(event: any) {
    // 清除上次的红点坐标
    this.redDotCoordinates = [];

    // 获取新图片的URL，并显示图片
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      this.imageUrl = reader.result as string;
    };
  }

  onAddRedDot(event: any) {
    // 获取红点坐标，并添加到数组中
    const x = event.offsetX;
    const y = event.offsetY;
    this.redDotCoordinates.push(x, y);
  }

}

在模板中，可以使用<img>元素来显示图片，并使用<div>元素来添加红点：

<input type="file" (change)="onImageChange($event)">
<img [src]="imageUrl" (click)="redDotCoordinates=[]">
<div *ngFor="let coordinate of redDotCoordinates" 
     class="red-dot" 
     [style.left.px]="coordinate[0]" 
     [style.top.px]="coordinate[1]" 
     (click)="redDotCoordinates.splice(redDotCoordinates.indexOf(coordinate), 1)">
</div>

在上面的代码中，<img>元素绑定了imageUrl属性，它会在onImageChange()方法中被更新。<div>元素使用*ngFor指令来循环显示红点，它们的位置由[style.left.px]和[style.top.px]属性决定。<div>元素还绑定了click事件，用于在用户点击红点时，从数组中删除该坐标。