Размер холста не изменяется автоматически в WinJS

Я только что портировал свою игру на Win8JS. Это было довольно просто на удивление. Но я сделал игру с фиксированным разрешением. Я явно установил разрешение 800 x 500 пикселей для всех элементов холста, но я хочу, чтобы они автоматически масштабировались до всех разрешений в симуляторе — как мне этого добиться?

Вот как сейчас выглядит моя игра http://i.msdn.microsoft.com/dynimg/IC571329.png :(

По той же ссылке http://msdn.microsoft.com/en-us/library/windows/apps/hh780612.aspx

он говорит, что «холст автоматически заполняет пустое пространство», но в моем случае это не так, вероятно, потому что у меня есть заранее определенные фиксированные высота и ширина?

Как мне быть с этим? Если я удалю ширину и высоту, холст не будет виден. Довольно новичок во всем этом - был бы признателен за помощь.

Спасибо!


windows-runtime winjs windows-8
person Rahul Mathur    schedule 12.09.2012    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Если вы дадите элементу управления фиксированный размер, он не будет изменяться. Если вам нужен явный макет, ваша ссылка рекомендует использовать 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;
}
person N_A    schedule 12.09.2012
comment
Я пытался, но на самом деле ничего не произошло. Должен ли я изменить css класса div внутри тега viewbox, чтобы он работал? Могу ли я добавить все свои элементы холста внутрь (если да, то это не работает для меня..). - person Rahul Mathur; 12.09.2012
comment
‹div data-win-control=WinJS.UI.ViewBox› ‹div class=ScaleClass› ‹canvas id=canvas width=800 height=500 ›‹/canvas› ‹/div› ‹/div› - person Rahul Mathur; 12.09.2012
comment
См. пример здесь: codefoster.com/post /2012/06/29/ - person N_A; 12.09.2012
comment
Вторая ссылка интересная. Что я должен поместить в атрибут высоты и ширины .fixedlayout? - person Rahul Mathur; 12.09.2012
comment
Я должен был бы попробовать это сам. У меня может быть время позже, чтобы исследовать, но сейчас я на Win 7. - person N_A; 12.09.2012
comment
Было бы здорово, если бы вы могли попробовать - вы бы мне очень помогли. Спасибо :) - person Rahul Mathur; 12.09.2012
comment
Чтобы проверить это, я создал приложение с фиксированным макетом. Это создает файл с именем default.html, который начинается с <div data-win-control="WinJS.UI.ViewBox"> <div class="fixedlayout"> <p>Content goes here</p> </div> </div> в качестве тела. Я изменил <p>Content goes here</p> на <img src="images/logo.png" />, и он масштабируется как исключение. Можете ли вы попробовать опубликовать больше вашего кода? - person N_A; 13.09.2012
comment
Мне нужно изменить размер холста, а не изображения. Вы пробовали это с холстом? - person Rahul Mathur; 13.09.2012
comment
Я думаю, ваша проблема в том, что вы устанавливаете высоту и ширину холста. Смотрите мою правку. - person N_A; 13.09.2012
comment
Привет! Я думаю, что он начал масштабироваться, но он застрял на одном разрешении, которое показывает только часть фона :( есть идеи, что происходит не так? редактировать: он заполняет экран с указанным разрешением, но это не совсем правильно, поскольку это показывает только часть холста. - person Rahul Mathur; 13.09.2012
comment
Если вы разместите свой код, я могу взглянуть. Это очень сложно, не зная, как ты это делаешь. - person N_A; 13.09.2012
comment
Это то же самое. Я думаю, что я собираюсь возиться больше, но большое спасибо за всю помощь. Пометка как ответ. Добрый день! :) - person Rahul Mathur; 13.09.2012
comment
Ну, я имел в виду ваш js, но если этого достаточно, то удачи! - person N_A; 13.09.2012

arrow_upward
0
arrow_downward

Ключ, кажется, таков: «Убедитесь, что размер элемента управления ViewBox равен 100% по ширине и высоте». Попробуйте указать стиль = "ширина: 100%; высота: 100%" для div ViewBox. И удалите высоту и ширину холста.

person sanatgersappa    schedule 12.09.2012
comment
Пытался. Он просто показывает фрагмент холста :( Вы имеете в виду это, верно? ‹div data-win-control=WinJS.UI.ViewBox style=width:100%;height:100%› - person Rahul Mathur; 12.09.2012
comment
сделает последний выстрел в этом. Удалите элементы div и стилизуйте холст напрямую, используя width:100%;height:100%; К сожалению, у меня нет установленной win8, чтобы проверить это, но это работает для простого HTML. - person sanatgersappa; 12.09.2012