Raphael JS: comment déplacer / animer un objet trajectoire?
D'une certaine manière cela ne fonctionne pas...
var paper = Raphael("test", 500, 500);
var testpath = paper.path('M100 100L190 190');
var a = paper.rect(0,0,10,10);
a.attr('fill', 'silver');
a.mousedown( function() {
testpath.animate({x: 400}, 1000);
});
Je peux me déplacer rects de cette façon mais pas les chemins, pourquoi est-ce, et comment puis-je déplacer un objet chemin alors?!
source d'informationauteur Dylan
Vous devez vous connecter pour publier un commentaire.
Avec la dernière version de Raphaël, vous pouvez le faire:
Cela vous permet d'économiser de la peine d'avoir à
clone
un temp objet.Il semble un
path
objet de ne pas obtenir unx
,y
valeur - de sorte que votre animation probablement fonctionne toujours, mais ne fait rien. Essayez plutôt de l'animation de la fonction path:Il fait un peu plus compliqué à écrire l'animation, mais vous avez l'avantage de l'obtention de rotation et de mise à l'échelle libre!
BTW: je suis sûr que c'est juste un exemple, mais dans ton code ci-dessus
testpath
se trouve dans la portée globale parce que vous n'avez pas l'initialiser commevar testpath
Résolu, merci à Rudu!
Vous avez besoin pour créer un nouveau chemin à animer. Vous pouvez faire cela avec clone() et ensuite appliquer les transformations de ce clone. Semble très complexe pour un mouvement simple comme ça, mais il fonctionne...
TimDog réponse était la meilleure solution.
En outre, rappelez-vous juste, transformer la chaîne dans ce cas, signifie, qu'il va ajouter de 400 points pour chaque chemin point/ligne de coordonnée X, et 0 points pour chaque coordonnée Y de la.
Cela signifie que,
M100 100L190 190
va se transformer enM500 100L590 190
.Donc, si vous avez besoin de déplacer un élément de chemin d'accès à un autre poste, la différence entre la position actuelle et les nouvelles coordonnées de la position doit être calculé. Vous pouvez utiliser le premier élément pour le faire:
Espère que cela aidera quelqu'un.
Voici un code qui généralise la meilleure des réponses ci-dessus, et donne Raphaël chemins un simple
.attr({pathXY: [newXPos, newYPos]})
attribut similaire à.attr({x: newXPosition})
et.animate({x: newXPosition})
pour les formes.Cela vous permet de déplacer votre chemin à un fixe position absolue ou déplacer en une quantité relative dans un façon standard sans coder en dur le chemin de chaînes ou de calculs personnalisés.
Edit: Code ci-dessous fonctionne dans IE7 et IE8. Une version antérieure de cet échec dans IE8 /VML mode en raison de un Raphaël bug qui renvoie les tableaux de .attr('chemin') en SVG mode, mais les chaînes .attr('chemin') dans VML mode.
Code
Ajouter ce code (Raphaël customAttributeet la fonction d'assistance) après la définition de
paper
utilisation en tant que ci-dessous.Utilisation
Pour absolu de la traduction (déplacer à fixe position X,Y) - Vivre JSBIN démo
Fonctionne avec n'importe quel chemin d'accès ou ensemble de chemins d'accès y compris des ensembles de jeux (démo). A noter que depuis Raphaël ensembles sont des tableaux ne sont pas des groupes, il se déplace à chaque élément de l'ensemble à la position définie et non au centre de l'ensemble.
Raphaël doit gérer à la fois x et y coordonne l'ensemble dans la même customAttribute afin qu'ils puissent animer ensemble et afin qu'ils restent synchronisés les uns avec les autres.
Relative à la traduction (déplacer par +/- X,Y) - Vivre JSBIN démo
Cela fonctionne aussi avec les jeux, mais encore une fois n'oubliez pas que Raphael les sets ne sont pas comme des groupes - chaque objet se déplace à une position par rapport à la position moyenne de l'ensemble, les résultats peuvent ne pas être ce que l'on attend (exemple de démonstration).
Pour l'animation (déplacement d'un chemin d'accès à des positions relatives ou absolues)
Avant d'animer la première foisvous devez définir la pathXY valeurs, en raison d'un bug/fonctionnalités manquantes jusqu'à Raphaël 2.1.0 où tous les customAttributes besoin de donner une valeur numérique avant qu'ils sont animés (sinon, ils vont tour à chaque numéro de téléphone dans l'NaN et de ne rien faire, à défaut d'en silence, sans erreurs, ou non, de l'animation et de sauter directement à la position finale).
Avant d'utiliser
.animate({pathXY: [newX,newY]});
exécutez cette fonction d'assistance:Encore une autre façon est d'utiliser des "transformer" attribut:
déplacer le chemin à droite par 400px, par rapport à la position d'origine.
Cela devrait fonctionner pour toutes les formes, y compris les chemins et les rectangles.
Noter que:
La valeur de "transformer" l'attribut est toujours basé sur la position d'origine, pas de la position actuelle. Si vous appliquez l'animation ci-dessous après l'animation ci-dessus, il va le déplacer 800px à gauche relativement, au lieu de revenir à sa position d'origine.