Free transform plugin for Raphaël JS

Posted on December 04, 2011

After doing some research for work involving client-side image manipulation I decided to dive into Raphaël, a JavaScript library that simplifies working with vector graphics on the web.

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.

Scroll to top

Resolve scoping issues in jQuery with anonymous functions

Posted on May 21, 2011

I had a bit of a head-scratching moment recently when I was using jQuery to bind event handlers to elements in a loop. Usually I would just use jQuery’s .each() method but in this specific case that wasn’t an option. Consider the following (simplified) code:

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.

Scroll to top

JavaScript Tetris

Posted on June 12, 2009

Because I have nothing better to do with my time I wrote a Tetris game in JavaScript. I know there are plenty out there already but it was fun to make and it brought back some memories (I wrote my first Tetris game in DOS when I was 14). Coincidentally, Tetris just turned 25.

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

Scroll to top

Fork me on GitHub