私が作成したMootoolsのスライドショープラグインでGraduallyというものがあるのですが、画像の描画部分を自由に変更できなくて非常に汎用性がなくて困っていました。

なのでGraduallyの新バージョン開発のために、純粋に画像の描画部分だけを抽出しようと思いました。

それが、今回のImageDrawerになります。
単体で使用してもいいですし、自作の画像ギャラリープラグインにも組み込めます。

使用方法

まずはじめに、mootoolsを読み込みます。
その後にImageDrawer.js、ImageDrawer.Grid.js、ImageDrawer.Expand.jsを読み込みます。

<script type="text/javascript" src="js/libraries/mootools-1.2.4-core.js"></script>
<script type="text/javascript" src="js/ImageDrawer.js"></script>
<script type="text/javascript" src="js/ImageDrawer.Grid.js"></script>
<script type="text/javascript" src="js/ImageDrawer.Expand.js"></script>

次にcanvas要素を記述します。

<canvas id="myCanvas"></canvas>

そして最後にjavascriptコードを記述します。

var myImage = new Image();
myImage.src = "images/draw-image.jpg";
myImage.onload = function() {
	var myCanvas = document.id("myCanvas");
	var drawer = new ImageDrawer.Grid({
		'height': 55,
		'width': 65,
		'transition': 'expo:in:out',
		'onDrawStart': function() {
			//image drawing start
			log.set("html", "Start");
		},
		'onDrawComplete': function() {
			//image drawing complete
			log.set("html", "Complete");
		}
	});

	drawer.setCanvas(myCanvas)
	drawer.setImage(myImage);
	drawer.drawLeft();
}

オプションのtransitionを変えることで、描画処理時のアニメーションを変更できるようになっています。
詳しくはデモページをご確認ください。

Demo

http://holyshared.github.com/ImageDrawer/

最後にダウンロードはMootools Forgeか下記のダウンロードリンクより可能です。

Mootools Forge

http://www.mootools.net/forge/p/imagedrawer

ダウンロード

http://www.mootools.net/forge/download/imagedrawer/1.0