HTML5 Canvas objet en mouvement de la souris cliquez sur la position
Fondamentalement, je veux déplacer un objet d'Un point a ( 10x,10y ) à une position sur la toile où la souris a été cliqué ( 255x,34y ).
Je suis actuellement à l'aide d'une méthode, mais il va de ++X ++puis Y pour coordonnées; en haut puis à droite.
Je veux aller directement à la position, aime une animation sur un chemin. Le ralentissement d'aller d'Un point a à un Point B.
OriginalL'auteur Brian | 2013-05-26
Vous devez vous connecter pour publier un commentaire.
Lorsque vous “déplacer” un objet, ce que vous avez vraiment besoin de faire est d'effacer l'objet et de redessiner il
Premier code d'une fonction qui va redessiner le rect à un certain x,y
Puis de gérer les événements mousedown et d'appeler la fonction draw
Cet exemple utilise jquery pour la compatibilité inter-navigateur, mais vous pouvez toujours recode à l'aide de javascript natif.
Voici le code et un Violon: http://jsfiddle.net/m1erickson/GHSG4/
Ok, donc modifier la fonction draw utiliser requestAnimationFrame progressivement déplacer l'objet vers la destination. Vous aurez besoin d'interpoler des points sur une ligne à partir de votre départ à la destination. Ici est une référence à requestAnimationFrame: cookbooks.adobe.com/... et ici est une référence à l'interpolation des points sur une ligne: snipplr.com/view/47206
La part d'abobe site semble chargement bizarre. Mais Si c'est pas trop demander, pourriez-vous possible de mettre cela dans une pièce de théâtre? Je suis nouveau sur ce genre de choses. En regardant Interpoler des Points sur une Ligne, qui semble être ce que je suis en train de regarder. Adobe la partie animation est quelque chose que j'ai déjà compris. J'ai le script sur un setintervaul. Comme je l'ai dit, j'ai des objets en mouvement, mais ils se déplacent sur une première X puis Y base. J'ai besoin de X & Y exécuter en même temps. Comme une ligne droite d'un point a à Un point B. Pas de haut, puis à droite vers la destination.
Voici un violon montrant l'objet en cours d'animation: jsfiddle.net/m1erickson/GHSG4
OriginalL'auteur markE