使用Angular动态使用XY坐标将图像放置在另一个图像上

Question

我是Angular图像处理的新手。我有一个图像，我想使用clientX和clientY向其动态添加标记。到目前为止，我完成的代码是：

<div id="img-container">
<img data-wheel-zoom src="../assets/dist/custom/img/ThirdFloor.png" alt="" (click)="imageClick($event)" />
<img class = "imgA1" [style.width.px]="50" [style.top.px]="coordY" [style.left.px]="coordX" src="https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/128/Map-Marker-Marker-Outside-Chartreuse.png" id="marker" />
</div>

imageClick（事件）

imageClick(event) {
this.coordX = event.clientX;
this.coordY = event.clientY;
}

我的CSS如下：

img {
position: relative;
}

.imgA1 {
position: absolute; 
}

问题： 放置了标记并可以正常工作，但是当我放大时，图片会放大并且标记保持在同一位置，即使我放大图片，我也希望它“固定”到图片中相同的位置/像素

请帮助。非常感谢。附带放大前（左）和放大后（右）的图片

比较放大前（左）和放大后（右）

Answer 1

我为您创建了一个Codepen，并相应地更新了CSS。现在，您可以看到标记显示在第6个窗口中，即使您放大标记，标记也仍然停留在缩放状态。

因此，这两个图像相互重叠。我希望我能帮助您解决问题。

https://codepen.io/tejasp/pen/JqErGb

img {
position: relative;
}

.imgA1 {
position: absolute; 
top: 80px;
left: 170px;
width: 40px;
}