0

我刚刚将我的游戏移植到 Win8JS。出乎意料地相当简单。但我在制作游戏时考虑了一个固定的分辨率。我已在所有画布元素上明确设置了 800 x 500 像素的分辨率，但我希望它们自动缩放到模拟器上的所有分辨率 - 我该如何实现？

这就是我的游戏现在的样子http://i.msdn.microsoft.com/dynimg/IC571329.png :(

在同一链接http://msdn.microsoft.com/en-us/library/windows/apps/hh780612.aspx

它说“画布自动填充空白空间”但在我的情况下它没有可能是因为我已经预先定义了固定的高度和宽度？

我该怎么做呢？如果我删除宽度和高度，那么画布将不可见。这一切都相当新 - 将不胜感激。

谢谢！

4

2 回答 2

3

如果你给一个控件一个固定的大小，它就不会调整大小。如果您需要明确的布局，那么您的链接建议使用ViewBox。

缩放单个子元素以填充可用空间而不调整其大小。此控件对容器大小的变化以及子元素大小的变化做出反应。例如，媒体查询可能会导致纵横比发生变化。

将您的画布放在一个视图框中，它应该适合您。

<body>
    <div data-win-control="WinJS.UI.ViewBox">
        <div class="fixedlayout">
            <p>Content goes here</p>
        </div>
    </div>
</body>


 //.css file
.fixedlayout {
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
    display: -ms-grid;
    height: 768px;
    width: 1024px;
}

编辑：

我对此进行了测试并且有效：

<body>
    <div data-win-control="WinJS.UI.ViewBox">
        <div class="fixedlayout">
            <canvas id="canvas"/>
        </div>
    </div>
</body>

window.onload = draw;
function draw() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.fillStyle = "rgb(255, 215, 0)";
    context.fillRect(15, 15, 55, 50);
    context.fillStyle = "rgba(0, 0, 200, 0.5)";
    context.fillRect(40, 40, 45, 40);
}

.fixedlayout {
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
    display: -ms-grid;
    height: 768px;
    width: 1024px;
}
于 2012-09-12T14:13:51.207 回答
0

关键似乎是这个——“确保 ViewBox 控件的大小设置为 100% 的宽度和高度。” 尝试为 ViewBox div 放置一个 style="width:100%;height:100%" 。并删除画布的高度和宽度。

于 2012-09-12T15:00:45.190 回答