One thing I struggled with was applying multiple transformations to an element. When rotating an object the coordinate plane rotates with it which means dragging no longer works as one might expect (e.g. right becomes up). Raphaël’s creator Dmitri Baranovskiy indicated this is the correct behavior.

I worked out a solution and released it as a plugin. It supports snap-to-grid dragging, scaling and rotating and handles sets. Like Raphaël itself, the plugin is licensed under the MIT license.

Source code

Raphaël.FreeTransform on GitHub

Demo

elbertf.com/raphael/free_transform/

See also…

These are a couple of other plugins I created recently.

Raphaël.JSON

Serialize Raphaël elements and back.

Raphaël.Export

Cross-browser solution to export Raphaël elements to SVG, works in Internet Explorer 6, 7 and 8. Can be used to convert Raphaël drawings to PNG or PDF server-side using ImageMagick or Batik.

1
2
3
4
5
6
7
8
9
10
11
12
13

<ul>
	<li id="item-1">Item 1</li>
	<li id="item-2">Item 2</li>
	<li id="item-3">Item 3</li>
</ul>
 
<script type="text/javascript">
	for ( var i = 1; i <= 3; i ++ ) {
		$('#item-' + i).click(function() {
			alert('You clicked item ' + i);
		});
	}
</script>

Against my intuition, clicking any of the three li elements would return return “You clicked item 4”. I then realized that i was being read after the for-loop had finished. To solve this, wrap the function in another anonymous function passing i as an argument:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<ul>
	<li id="item-1">Item 1</li>
	<li id="item-2">Item 2</li>
	<li id="item-3">Item 3</li>
</ul>
 
<script type="text/javascript">
	for ( var i = 1; i <= 3; i ++ ) {
		(function(i) {
			$('#item-' + i).click(function() {
				alert('You clicked item ' + i);
			});
		}(i));
	}
</script>

This way the second i lives in the same scope as the alert() function which will now return the correct value.

I released it under GPL, feel free to grab the code from the source and do whatever you like with it.

Play the game at elbertf.com/tetris