Dragable, image évolutive dans HTML5 Canvas

Question

Je travaille avec un petit projet que je prévois d'utiliser HTML5. Jusqu'à présent, j'ai réussi à mettre en place une petite démo avec quelques petites fonctionnalités, mais il manque encore toutes les fonctionnalités nécessaires. J'espère que quelqu'un ici pourrait avoir du temps à perdre pour un débutant.

Quoi qu'il en soit, voici ma démo: http://persturesson.com/demo/

En ce moment, comme vous pouvez le voir, l'image (yup, c'est une image et non un objet dessiné, l'image changera pour la version finale, donc ne pas mettre beaucoup d'intot que) est traînable. Mais je voudrais pouvoir redimensionner l'image à la volée comme ceci: http://simonsarris.com/project/canvasdemo/demo2.html

Quelqu'un qui a une idée comment incorporer la fonctionnalité de cette démo dans le mien?

Toutes les entrées sont appréciées, merci.

Answer 1

j'ai écrit la démo que vous regardiez

Ainsi, la drawImage pertinente ressemble à ceci:

context . drawImage(image, dx, dy, dw, dh)

C'est la destination x, y, largeur et hauteur. Cela signifie que, quelle que soit la taille de l'image originale, vous pouvez la dessiner plus grande ou plus petite sur la toile. Dans mon exemple de boîte, vous modifiez la largeur et la hauteur de fillRect, à la place, ici, vous devriez simplement changer les valeurs dw et dh de drawImage.

Ainsi, sur la ligne 32 de votre fichier transform.js, au lieu de 150,150 pour les dw,dh valeurs, il devrait y avoir l'équivalent d'une largeur et une hauteur enregistrée (et modifié), tout comme dans ma démo.

Tout le reste (faire fonctionner les poignées, etc.) devrait être à peu près le même.

S'il y a encore des questions, faites le moi savoir!