CreateJS - mise à l'échelle du canevas n'échelonne pas les coordonnées de la souris

Question

Je travaille sur un gros projet dans lequel les exercices dans Canvas sont créés via JSON-data et CreateJS. Le but de l'avoir en HTML 5 est de ne pas avoir à utiliser une application séparée pour votre téléphone, vous pouvez toujours utiliser le site Web. Tout fonctionne correctement, mais dans le mobile, le canevas est remis à l'échelle en mode plein écran. Cela se fait par la vérification de la taille de l'écran, et si elle est assez petit pour être mobile la toile est mise à l'échelle par ce code:

// browser viewport size 
var w = window.innerWidth; 
var h = window.innerHeight; 

// stage dimensions 
var ow = canvasWidth; 
var oh = canvasHeight; 

// keep aspect ratio 
var scale = Math.min(w/ow, h/oh); 
stage.scaleX = scale; 
stage.scaleY = scale; 

// adjust canvas size 
stage.canvas.width = ow * scale; 
stage.canvas.height = oh * scale; 

Cela fonctionne très bien pour la plupart des exercices, comme des jeux-questionnaires et autres, où tout ce que vous avez faire est de cliquer sur un bouton. Cependant, nous avons aussi quelques exercices de glisser-déposer, et un exercice où vous pouvez colorier un dessin. Ceux-ci comptent bien sûr sur les coordonnées de la souris pour fonctionner correctement. Le problème est que lorsque le canevas est mis à l'échelle, les coordonnées de la souris sont et non. Ainsi, lorsque vous faites glisser un élément ou essayez de dessiner, il se produit un décalage. Ainsi, votre dessin apparaît à gauche de votre clic, et lorsque vous prenez un objet déplaçable, il ne suit pas tout à fait votre clic. Si j'avais fait le code depuis le début, je suis à peu près sûr de la façon dont j'aurais recalculé les coordonnées, mais comme elles sont calculées par CreateJS, je ne sais pas vraiment comment procéder.

Cela a été rapporté comme un problème par quelqu'un d'environ un an il y a here, où cette solution a été proposée:

j'ai pu contourner ce problème en ajoutant un conteneur de niveau supérieur et attacher mes bitmaps à cette et la mise à l'échelle.

Tout l'exercice est à l'intérieur d'un conteneur que j'ai essayé de mettre à l'échelle mais en vain. J'ai également essayé d'envoyer l'échelle en paramètre aux parties de l'exercice créées (par exemple le menu, les images de fond et autres) et de ne pas tout mettre à l'échelle, et cela semble fonctionner puisque je peux exclure la couche de dessin. Mais comme il s'agit d'un grand projet et de nombreux exercices et parties à mettre à l'échelle, il faudra un certain temps pour le mettre en œuvre, et je ne suis pas sûr que ce soit une solution viable.

Existe-t-il un moyen simple et efficace de redimensionner les coordonnées de la souris avec la taille du canevas dans CreateJS? J'ai trouvé des exemples Javascript purs ici sur SO, mais rien pour CreateJS en particulier.

Answer 1

Poursuite de la recherche et finalement tombé sur ceci, que je n'avais pas vu auparavant: EaselJS - dragging children of scaled parent. C'était exactement ce que je cherchais. Je avais besoin de changer les coordonnées que je tirais avec ceci:

var coords = e.target.globalToLocal(e.stageX, e.stageY); 

alors je pourrais utiliser le coords.x et coords.y au lieu d'utiliser directement e.stageX et e.stageY comme avant.