Question

所以我想创建一个在其顶部具有矩形可单击区域的图像。我还需要这些区域具有颜色，以便它们可以指示状态。它们还应该是透明的，以便您可以看到其背后图像的内容。一切都很好，但现在我也想使其具有响应性。

问题是，如果我使图像可缩放，则代表区域的自定义div会保留在原位，并且不会更改大小。

<div class="map-container">
    <img class="image1" src="SOME_IMAGE" >

    <div class="visibleItem" *ngFor="let item of items"
        /*The default positions for 100% scaling are saved in a document*/
        [ngStyle]="{
        'left': item.posX + 'px',
        'top': item.posY + 'px',
        'width': item.width + 'px',
        'height': item.height + 'px'
        }"
        /*The code below basically changes the background color of the partly transparent item*/
        [class.served]="item.served === true" 

        (click)="doSomething()"
        >
        {{item.name}}
    </div>
</div>

我希望能够根据windowsize调整图像和项目的大小。

Answer 1

您正在使用px值定位div，因此它没有响应：

因此，假设您的img的宽度为200px，而div的宽度为left:40px，一切都很好。
但是当您调整img的大小并且宽度为120px时，您的div仍位于left:40px处，这使其无响应。

您可以通过使用百分比值（这些值与地图容器的宽度和高度相关，因此需要在此设置所需的百分比）来定位它来解决此问题。

由于目前尚不了解您如何设置组件样式或调整大小，我无法为您提供更深入的答案，但这应该可以使您朝正确的方向前进

调整窗口大小后，在图片上方重新定位可点击项并调整其大小

1 个答案: