根据该图像坐标将图像放在另一个图像上

Question

我需要创建一个 Angular 8 组件，它包含用作地图的大图像，并根据该图像坐标在前者上动态放置较小的图像。例如：我在背景中有一个房间图像。从服务器我知道我的椅子图像是 20x20 像素，它应该相对于房间图像以 120x 300y 的中心放置。

我怎样才能做到这一点？我尝试使用一些 css 技巧，比如将较大的包裹在相对定位的 div 中，而较小的包裹绝对 divs 设置与 NgStyle 他们的风格，但它只是将它放在 0.0

项目要求我不能用AngularMaterial。

Answer 1

如果我正确理解了你的问题，只需将你的椅子图像相对于背景图像放置就足够了。我会将您的背景包裹在一个容器中，该容器将成为任何其他绝对内部元素的相对容器。

类似的东西：

.room-container {
  position: relative;
}

.chair {
  position: absolute;
  
  top: 400px;
  left: 400px;
}

<div class="room-container">
  <!-- BG Image-->
  <img src="https://upload.wikimedia.org/wikipedia/commons/0/07/Hotel-suite-living-room.jpg" alt="">
    
  <!-- Chair image -->
  <img src="https://www.ikea.com/us/en/images/products/ekedalen-chair-brown__0516603_PE640439_S4.JPG" alt="" class="chair">
</div>

根据该图像坐标将图像放在另一个图像上

Place images over another based on that image coordinates

css

components

image

overlap

angular8