html - 使用 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

我已经为您创建了一个代码笔并相应地更新了 CSS。现在你可以看到标记显示在第 6 个窗口上，即使你放大标记仍然停留在那里。

因此两个图像相互重叠。我希望我帮助解决了你的问题。

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

img {
position: relative;
}

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