javascript - CSS定位问题

Question

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

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

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

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

有什么办法解决这个问题吗？

---

编辑:

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

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

当我使用您建议的代码时，它出现在 Canvas 之外:

        $("#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

按 me.sys.scale.x 缩放 DOM 绝对左侧，按 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当用户更改窗口大小或移动设备方向等时动态重新缩放元素的事件。