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％になっていることを確認してください。」ViewBoxdivにstyle="width：100％; height：100％"を入れてみてください。そして、キャンバスの高さと幅を削除します。

于 2012-09-12T15:00:45.190 に答える