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

Posted 2023-02-23

【中文标题】根据该图像坐标将图像放置在另一个图像上

【英文标题】：Place images over another based on that image coordinates

【发布时间】：2019-12-09 22:10:55

【问题描述】：

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

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

对于项目要求，我不能使用 AngularMaterial。

【参考方案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" >
    
  <!-- Chair image -->
  <img src="https://www.ikea.com/us/en/images/products/ekedalen-chair-brown__0516603_PE640439_S4.JPG"  class="chair">
</div>

【讨论】：

谢谢，这让我很开心。即使我在这之前尝试过，这看起来对我来说很清楚，并且可能修复了我的错误。遗憾的是，由于某种原因，我无法通过 ngStyle 指令执行此操作。我不得不单独拆分样式（我不太喜欢代码冗余）。这仍然是正确的方法。