Question

我刚将游戏移植到Win8JS。令人惊讶的是相当简单。但我在考虑固定分辨率的情况下制作了游戏。我已经在所有画布元素上明确设置了800 x 500像素的分辨率，但我希望它们能够自动缩放到模拟器上的所有分辨率 - 我该如何实现？

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

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

上

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

我如何继续这个？如果我删除宽度和高度，则画布将不可见。这一切都相当新 - 会很感激帮助。

谢谢！

Answer 1

如果您为控件提供固定大小，则不会调整大小。如果您需要明确的布局，那么您的链接建议使用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;
}

Answer 2

关键似乎是这个 - ＆＃34;确保ViewBox控件的大小为100％宽度和高度。＆＃34;尝试设置样式=＆＃34;宽度：100％;高度：100％＆＃34;对于ViewBox div。并删除画布的高度和宽度。

Canvas不会在WinJS中自动调整大小

2 个答案: