javascript - Lienzo Scaling KineticJS con CocoonJS idtkscale

html5 canvas

Question

Conseguí mi juego KineticJS trabajando dentro de CocoonJS bastante bien, excepto escalar el lienzo. Tengo un lienzo de 1024x768, que es ideal para iPad 2. Pero para el iPad 4, debido a la pantalla Retina, el juego solo ocupa 1/4 de la pantalla.

CocoonJS dice esto sobre la escala:

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.

He intentado esto agregando esto:

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

Pero no está funcionando. ¿Alguna idea de cómo hacer que KineticJS cree Lienzos a escala en CocoonJS?

Answer 1

Cuando se trata de hacer un objeto de lienzo en pantalla completa si está en un dispositivo móvil. En CocoonJS esta característica está lista para usar. Así que reparamos el código para configurar

document.body.style.width

y

document.body.style.height

Estos están relacionados con el DOM y no son compatibles (ni se necesitan en el modo de pantalla completa). También se parcheó el código relacionado con el estilo y la posición del lienzo, ya que no es necesario.

Por ahora, la forma correcta de obtener el tamaño de la pantalla es

window.innerWidth

y

window.innerHeight

Para hacer que sus objetos Canvas estén a pantalla completa, configure

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

Una cosa que debes saber sobre CocoonJS es que no tienes que cambiar el tamaño de tu lienzo para que funcione en pantalla completa. CocoonJS subirá / bajará de escala su lienzo y enviará las coordenadas táctiles correctas. Puede elegir cómo desea que su lienzo sea escalado, manteniendo la relación de aspecto o no, y también si no desea aplicar ningún filtro de desenfoque a la operación de escalado, lo que resulta práctico para juegos que dependen del arte de píxeles. Consulte las páginas oficiales de CocoonJS Wiki para saber cómo controlar las operaciones de escala.

REFERENCIA

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

Answer 2

De acuerdo, encontré una respuesta a esta pregunta yo mismo y dado que hay tantos votos positivos, quiero compartir la solución.

La solución fue comentar un código dentro de KineticJS y luego agregar la escala de CocoonJS a la creación del lienzo.

1. Comenta estas líneas (no todas en un solo lugar):

inside _resizeDOM:

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

dentro de setWidth de Canvas:

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

dentro de setHeight of Canvas:

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

1. Agregue esto dentro del prototipo de Lienzo init:

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

Esto hace el truco para mí. Ahora lo que hago es calcular la relación de aspecto correcta para el lienzo y dejar que CocoonJS lo escale. Espero que esto sea tan útil para otros como lo fue para mí.