javascript - Belirli alanlarda resimde x ve y'yi seç ve üzerine bir sınır oluştur

Resmi seçmeye dayalı bir sorun yaşıyorum. BE'den gelen bir nesne dizim var ve her nesnenin kendi koordinatları var, bu koordinatlar resmin X ve Y değerlerine bağlı. Resimde bazı çizimler var ve bazı sayıları içeriyor. Bu nedenle Obj üzerindeki itemNumber özelliği, resimde gösterilecek olan sayıyla aynı. Örneğin, itemNumber 1 ise, koordinatlar sonucunda 1 sayısı resimde çerçevelenecek.

Şimdiye kadar bir şey başardım ama doğru X ve Y'yi her seferinde seçemiyorum, başka bir yere gidiyor sınırın ötesine.

Bir Stackblitz oluşturdum

Stackblitz'te 2 resim bulabilirsiniz. İkincisinde nasıl olması gerektiğini göreceksiniz. Birçok şey denedim ama başarılı olamadım

İşte benim Obj json'um.

[
 {
        "itemNumber": "1",
        "partNumber": "4400535240",
        "coordinates": [
            {
                "itemCounter": 0,
                "xposition": 970,
                "yposition": 375
            }
        ]
    },
    {
        "itemNumber": "2",
        "partNumber": "4400541680",
        "coordinates": [
            {
                "itemCounter": 0,
                "xposition": 1282,
                "yposition": 522
            }
        ]
    },
    {
        "itemNumber": "4",
        "partNumber": "4400541390",
        "coordinates": [
            {
                "itemCounter": 0,
                "xposition": 445,
                "yposition": 307
            }
        ]
    },
 ]`

İşte benim TS Kodum.

showCorner(event: ResponseList) {
console.log(event.coordinates)

const xClientHeight = document.getElementById('imgPath')?.clientHeight as number;
const xClientWidth = document.getElementById('imgPath')?.clientWidth as number;

console.log(xClientHeight);
console.log(xClientWidth);


this.coordinateX =  xClientWidth - event.coordinates[0].yposition;
this.coordinateY = xClientHeight - event.coordinates[0].xposition;



(document.getElementById('rec1') as HTMLInputElement).innerHTML = "<img src='../../../assets/rec.gif'  style='width:25px; height:25px;'></img>";

}


showImage(imagePath: string) {
return this.environment.endpoints.backendBaseUrl + imagePath; // 
imagePath
}

Benim HTML Kodum

<table>
        <thead>
            <tr>
                <th scope="col">Name</th>
               
            </tr>
        </thead>
        <tbody>
          <tr *ngFor="let row of jsonData">
                <td (click)="showCorner(row)">{{ row.name }}</td>
               
            </tr>         
        </tbody>
    </table>

<div class="flex-1 relative">
  <div class="relative">
    <img id="imgPath" (click.double)="addBorder($event)"  style="width: 832px; max-width: fit-content;" [src]="showImage(partListImage.imagePath)">
    <div id="rec1" class="absolute" [style]="{'left': coordinateX+ 'px', 'top': coordinateY+ 'px'}">
    </div>
  </div>
</div>

Görüntülerde görebileceğiniz gibi sayılar var. Ve tabloya tıkladığınızda her sayı seçilecektir.