Drag and dropping using Raphael js
I'm trying to build a puzzle game in javascript, using raphael to take care of the drag and drop and rotation of the pieces.
The problem I'm facing is: Whenever I rotate an image, its coordinate system is rotated as well and the drag and drop doesn't work anymore as expected.
Edit2: Here is a simple test case. Drag around the ellipse, rotate it, and then try to drag again: 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 on the x-coord, but on its 开发者_Go百科own coordinate system, that maybe rotate, as the image below shows.
As explained on SVG Essentials, this is the expected behavior.
My question is: Is there an elegant way to do what I want, or I'll be forced to manually calculate the correct coords by using rotation matrix?
Other JS libraries or suggestions will be very welcome, even if they mean losing the IE support.
As also noted in that article, the order of transformations is important.
- Translate object so the center point (Or whatever other point you want to rotate around) is at 0,0
- Rotate
- Translate back to previous position
Also note that there is an overload of rotate 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>
加载中,请稍侯......
精彩评论