javascript - CSS定位问题

Question

我正在使用 melonJS 创建游戏。我想在 NPC 上动态定位对话框。

在全屏下，它看起来不错。

当我缩小视口时，定位保持绝对，因此看起来很糟糕。但是如果我不定位绝对，我将无法将它相对于 NPC 的坐标放置：

$("#dialogBox").css({top: game.data.currentNPC_y+50, left: game.data.currentNPC_x-50, position:'absolute'});

有什么办法吗？

---

编辑：

当我使用以下代码时，代码不会像上面提到的那样缩放，但至少它仍然在 NPC 附近和画布上：

        $("#dialogBox").css({
            top: game.data.currNPC_y+50, 
            left: game.data.currNPC_x-50, 
            position:'absolute'
        }); 

当我使用您建议的代码时，它出现在画布之外：

        $("#dialogBox").css({
            position : "absolute",
            left     : (game.data.currentNPC_x - 50) * me.sys.scale.x,
            top      : (game.data.currentNPC_y - 500) * me.sys.scale.y
        });

Answer 1

将 DOM 绝对左侧me.sys.scale.x和绝对顶部缩放me.sys.scale.y：

$("#dialogBox").css({
    "position" : "absolute",
    "left"     : (game.data.currentNPC_x - 50) * me.sys.scale.x,
    "top"      : (game.data.currentNPC_y + 50) * me.sys.scale.y
});

您还可以缩放元素的宽度和高度以更好地集成。

最后，您应该监听WINDOW_ONRESIZE事件以在用户更改窗口大小或移动设备方向等时动态地重新缩放元素。