glisser-déposer à l'aide Raphael js

Je suis en train de construire un jeu de puzzle en javascript, en utilisant raphael pour prendre soin de glisser-déposer et la rotation des pièces.glisser-déposer à l'aide Raphael js

Le problème que je suis face est: Chaque fois que je tourne une image, son système de coordonnées est tourné aussi bien et le glisser-déposer ne fonctionne plus comme prévu.

Edit2: Voici un cas de test simple. Faites glisser autour de l'ellipse, faites-le pivoter et essayez de faire glisser à nouveau: http://www.tiagoserafim.com/tests/dragdrop.html

Edit: Pour clarifier, chaque fois que je passe 1 pixel avec la souris vers la droite (x ++), l'image se déplace également 1 pixel sur la x -coord, mais sur son propre système de coordonnées, qui peut-être tourner, comme le montre l'image ci-dessous.

alt text http://commons.oreilly.com/wiki/images/f/fa/SVG_Essentials_I_5_tt93.png

Comme expliqué SVG Essentials, c'est le comportement attendu.

Ma question est: Y at-il une façon élégante de faire ce que je veux, ou je vais être obligé de calculer manuellement les coords correctes en utilisant la matrice de rotation?

Autres bibliothèques JS ou suggestions seront bienvenues, même s'ils veulent dire perdre le soutien IE.

Source

2010-07-05 Tiago

Comme il est également noté dans cet article, l'ordre des transformations est important.

Traduire objet de sorte que le point central (ou tout autre point que vous voulez tourner autour) est à 0,0
Rotation
retraduire à la position précédente

Notez également que est une surcharge de rotate qui le fait déjà.

<html> 
    <head> 
     <script type="text/javascript" src="http://github.com/DmitryBaranovskiy/raphael/blob/master/raphael-min.js?raw=true"></script> 
     <script type="text/javascript"> 
      function Draw() 
      { 
       var x = 150, y = 150; 
       var rotation = 0; 
       var paper = Raphael(0, 0, 800, 800); 
       var e = paper.ellipse(x, y, 30, 10); 
       paper.path("M150 150L800 150"); 
       window.setInterval(function() 
       { 
        x += 10; 
        rotation += 10; 
        e.translate(10, 0); 
        e.rotate(rotation, x, y); 
       }, 500); 
      } 
     </script> 
    </head> 
    <body onload="Draw()"> 
    </body> 
</html>

Source

2010-07-05 19:02:52

Salut! Oui, c'est exactement ce que je fais. Le problème est par la suite, lorsque j'essaie de faire glisser et que l'image se déplace sur son propre x-coord, au lieu du x-coord horizontal par défaut, par exemple. – Tiago

Salut à nouveau! Merci pour votre temps de travail sur ce code. Je l'ai essayé ici et si vous traduisez par 10 pixels au lieu de 1, vous pouvez voir mon problème se produire: l'image ne suit pas une ligne droite horizontale. – Tiago

J'ai ajouté une ligne horizontale droite et augmenté à la fois la distance déplacée et l'angle de rotation. Il suit toujours une ligne droite. Utilisez-vous une ancienne version de Raphael, peut-être? J'utilise une nouvelle copie. –

glisser-déposer à l'aide Raphael js

Répondre

Questions connexes