Echelle KineticJS toile avec CocoonJS idtkscale

Question

J'ai réussi à faire fonctionner mon jeu KineticJS à l'intérieur de CocoonJS assez bien, sauf pour le redimensionnement du canvas. J'ai un canvas de 1024x768, ce qui est parfait pour l'iPad 2. Mais pour l'iPad 4, en raison de l'écran Retina, le jeu ne prend que 1/4 de l'écran.

CocoonJS dit ceci à propos du redimensionnement:

CocoonJS redimensionne automatiquement votre canvas principal pour remplir tout l'écran tout en continuant à travailler sur les coordonnées de votre application. Il existe 3 façons différentes de spécifier comment le redimensionnement doit être fait:

idtkScale
 'ScaleToFill' // Par défaut
 'ScaleAspectFit'
 'ScaleAspectFill'

 canvas.style.cssText="idtkscale:SCALE_TYPE;"; // Le SCALE_TYPE peut être l'un des 
 ceux listés ci-dessus.

J'ai essayé d'ajouter ceci:

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

Mais cela ne fonctionne pas. Avez-vous une idée de la manière de faire redimensionner les Canvases créés avec KineticJS dans CocoonJS?

Answer 1

Lorsqu'il s'agit de rendre un objet canvas plein écran sur mobile. Dans CocoonJS, cette fonctionnalité est prête à l'emploi. Nous avons donc corrigé le code pour définir

document.body.style.width

et

document.body.style.height

Ceux-ci sont liés au DOM et ne sont pas supportés (ni nécessaires en mode plein écran). De plus, le code lié au style et à la position du canvas a été corrigé, car il n'est pas nécessaire.

Dorénavant, la bonne manière d'obtenir la taille de l'écran est

window.innerWidth

et

window.innerHeight

Pour mettre vos objets Canvas en plein écran, définissez

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

Une chose que vous devez savoir à propos de CocoonJS est que vous n'avez pas besoin de changer la taille de votre canvas pour le faire fonctionner en plein écran. CocoonJS redimensionnera votre canvas et enverra les coordonnées tactiles correctes. Vous pouvez choisir comment vous voulez que votre canvas soit redimensionné, en conservant ou non le ratio d'aspect, et aussi si vous ne voulez pas appliquer de filtre de flou à l'opération de redimensionnement, ce qui est pratique pour les jeux basés sur de l'art pixelisé. Consultez les pages Wiki officielles de CocoonJS pour savoir comment contrôler les opérations de redimensionnement.

RÉFÉRENCE

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

Answer 2

D'accord, j'ai trouvé une réponse à cette question moi-même et comme il y a tellement de votes positifs, je veux partager la solution.

La solution était de commenter une partie du code dans KineticJS et ensuite d'ajouter l'adaptation CocoonJS à la création du canvas.

1. Commentez ces lignes (pas toutes au même endroit) :

à l'intérieur de _resizeDOM :

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

à l'intérieur de setWidth de Canvas :

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

à l'intérieur de setHeight de Canvas :

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

1. Ajoutez ceci à l'intérieur de l'initialisation de prototype Canvas :

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

Cela fonctionne pour moi. Maintenant ce que je fais, c'est calculer le rapport d'aspect correct pour le canvas et laisser CocoonJS le mettre à l'échelle pour moi. J'espère que cela sera aussi utile pour les autres que cela l'a été pour moi!