All geek questions in one place

Drag and Drop Using Raphael js

I am trying to create a javascript puzzle game using raphael to take care of drag and drop pieces.

The problem I am facing: when I rotate the image, its coordinate system also rotates, and the drag and drop no longer works as expected.

Edit2: Here is a simple test case. Drag an ellipse, rotate it and try again to drag: http://www.tiagoserafim.com/tests/dragdrop.html

Edit: To clarify, whenever I move 1 pixel with the mouse to the right (x ++), the image also moves 1 pixel at the x-coordinate, but in its own coordinate system, which can rotate, as shown below.

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

As explained in SVG Essentials , this is the expected behavior.

My question is: is there an elegant way to do what I want, or will I have to manually calculate the correct coordinates using the rotation matrix?

Other JS libraries or suggestions would be very welcome, even if they mean losing IE support.

+4
source share
1 answer

As also noted in this article, the order of transformations is important.

  • Move the object so that the center point (or any other point you want to rotate) is at 0,0
  • Rotate
  • Translate previous position

Also note that there is a rotate overload that already does this.

<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>
+3
source

Source: https://habr.com/ru/post/1314762/

More articles:


All Articles