Масштабирование KineticJS с CocoonJS idtkscale

У меня игра KineticJS, работающая внутри CocoonJS довольно хорошо, за исключением масштабирования холста. У меня есть холст 1024x768, который отлично подходит для iPad 2. Но для iPad 4, из-за сетчатки сетчатки, игра занимает всего 1/4 экрана.

CocoonJS говорит об этом:

CocoonJS automatically scales your main canvas to fill the whole screen while you still 
continue working on your application coordinates. There are 3 different ways to specify how
the scaling should be done:

idtkScale
 'ScaleToFill' // Default
 'ScaleAspectFit'
 'ScaleAspectFill'

 canvas.style.cssText="idtkscale:SCALE_TYPE;"; // The SCALE_TYPE can be any of 
 the ones listed above.

Я пробовал это, добавляя это:

layer.getCanvas()._canvas.style.cssText='idtkScale:ScaleAspectFit;';

Но он не работает. Любая идея, как заставить KineticJS создавать холсты для масштабирования в CocoonJS?

Ответы

Ответ 1

Хорошо, я нашел ответ на этот вопрос сам, и, поскольку есть так много голосов, я хочу поделиться этим решением.

Решение заключалось в комментировании некоторого кода в KineticJS, а затем добавлении масштабирования CocoonJS к созданию холста.

  • Прокомментируйте эти строки (не все в одном месте):

внутри _resizeDOM:

this.content.style.width = width + PX;
this.content.style.height = height + PX;

внутри setWidth of Canvas:

this._canvas.style.width = width + 'px';

внутри setHeight of Canvas:

this._canvas.style.height = height + 'px';

  • Добавьте это внутри прототипа Canvas init:

     this._canvas.style.idtkscale = "ScaleAspectFill";

Это трюк для меня. Теперь, что я делаю, я рассчитываю правильное соотношение сторон для холста и позволяю CocoonJS масштабировать его для меня. Надеюсь, это так же полезно для других, как и для меня!

Ответ 2

Когда вы занимаетесь созданием объекта canvas в полноэкранном режиме, если на мобильном устройстве. В CocoonJS эта функция недоступна. Поэтому мы установили код для установки

document.body.style.width

и

document.body.style.height

Они связаны с DOM и не поддерживаются (и не нужны в полноэкранном режиме). Также был исправлен код, связанный с стилем и положением холста, поскольку он не нужен.

В настоящее время правильный способ получения размера экрана -

window.innerWidth

и

window.innerHeight

Чтобы сделать ваши объекты Canvas в полноэкранном режиме, установите

canvas.width= window.innerWidth; canvas.height= window.innerHeight

Одна вещь, которую вы должны знать о CocoonJS, заключается в том, что вам не нужно менять размер холста, чтобы он работал в полноэкранном режиме. CocoonJS будет увеличивать/уменьшать масштаб вашего холста и получать правильные координаты касания. Вы можете выбрать, как youd нравится ваш холст, который нужно масштабировать, сохраняя пропорции или нет, а также, если вы хотите, чтобы фильтр масштабирования не применялся к операции масштабирования, что подходит для игр, основанных на пиксельном искусстве. Обратитесь к официальным страницам CocoonJS Wiki, чтобы узнать, как управлять операциями масштабирования.

ССЫЛКА

http://blog.ludei.com/cocoonjs-a-survival-guide/