KineticJS – Scaling stage to viewport

Je travaille pour une résolution par défaut de 1366×756.

Je voudrais augmenter cette échelle en fonction de la fenêtre. Similaire à l'exemple illustré ici: http://blogs.msdn.com/b/davrous/archive/2012/04/06/modernizing-your-html5canvas-games-with-offline-apis-file-apis-css3 -amp-hardware-scaling.aspx

Je suis un peu confus de savoir comment je travaillerais dans KineticJS car il résume les éléments de toile utilisés.


Ce que j'aimerais réaliser est essentiellement:

window.addEventListener("resize", OnResizeCalled, false); function OnResizeCalled() { canvas.style.width = window.innerWidth + 'px'; canvas.style.height = window.innerHeight + 'px'; } 

Je sais que ce n'est pas la solution parfaite, car cela étendrait la toile et ne garderait pas le rapport d'aspect.


J'utilise actuellement ce qui suit:

 stage.setWidth(window.innerWidth); stage.setHeight(window.innerHeight); stage.setScale(window.innerWidth / 1366) 

C'est plus ou moins ce que je recherche, mais:

  • Les actions souris / toucher ne sont pas adaptées aux nouvelles proportions.

  • Pas la mise à l'échelle native qui utilise le GPU pour haut de gamme l'objet canvas.


Des idées? Merci 🙂

Sur un problème distinct, j'essayais d'aider à résoudre, l'utilisateur lui-même (user848039) a trouvé une solution qui portait sur la position de la souris et la mise à l'échelle de KineticJS.

C'était la question: kineticjs stage.getAbsoluteMousePosition ()? .

Les crédits vont à lui, mais voici sa formule que j'ai modifiée pour répondre à une configuration plus courante de KineticJS:

 var mousePos = stage.getMousePosition(); mousePos.x = mousePos.x/stage.getScale().x-stage.getAbsolutePosition().x/stage.getScale().x+stage.getOffset().x; mousePos.y = mousePos.y/stage.getScale().y-stage.getAbsolutePosition().y/stage.getScale().y+stage.getOffset().y; 

Peut-être que jsFiddle n'est pas le meilleur exemple pour cela, car vous voulez que la scène soit à l'intérieur et à l'intérieur. Ces mesures semblent jouer un peu bizarre dans le cadre jsFiddle, mais si vous regardez le code, vous verrez que j'ai réglé la scène exactement comme vous l'avez mentionné ci-dessus. Avec les nouveaux calculs pour mousePos mousePos.x et mousePos.y les coordonnées appropriées pour votre échelle.