API that draws to the canvas in the image is offered.
JavaScript
Switch branches/tags
Nothing to show
Latest commit 1ed01f1 Oct 14, 2010 @holyshared current version 1.1.0.1
Signed-off-by: Noritaka Horio <holy.shared.design@gmail.com>
Permalink
Failed to load latest commit information.
Demos
Docs
Source
Tests
CHANGELOG.md
README.md
package.yml

README.md

ImageDrawer

This plug-in draws in the image by using various animations. It is assumed to build it in the slide show and the image gallery, etc. and is developed.

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

ImageDrawer.Grid

How to Use

Please see the following about use.

ImageDrawer.Grid

Step.1 HTML

First of all, the canvas element is described. The content is as follows.

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

Step.2 Javascript

The following describe javascript. The canvas is specified with setCanvas(). And, the image where it draws with setImage() is specified.

Please use the read image.

#JS
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);

	//drawing a image
	drawer.drawLeft();
}

or

#JS
var myImage = new Image();
myImage.src = "images/draw-image.jpg";
myImage.onload  = function() {

	var myCanvas = document.id("myCanvas");
	var drawer = new ImageDrawer.Grid({
		'canvas': myCanvas, 
		'source': myImage, 
		'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");
		}
	});
	//drawing a image
	drawer.drawLeft();
}

Options

All options have default values assigned, hence are optional.

  • canvas: (element) Canvas element where it draws.
  • source: (element/string) Image where it draws.
  • gridHeight: (int) Height of divided panel.
  • gridWidth: (int) Width of divided panel.
  • interval: (int) Interval when image is switched.
  • transition: (string) Transition of animation. Default is expo:in:out.
  • duration: (int) duration of animation.
  • onDrawStart: When drawing begins, this event is generated.
  • onDrawComplete: When drawing is completed, this event is generated.

ImageDrawer.Expand

Step.1 HTML

First of all, the canvas element is described. The content is as follows.

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

Step.2 Javascript

The following describe javascript. The canvas is specified with setCanvas(). And, the image where it draws with setImage() is specified.

Please use the read image.

#JS
var myImage = new Image();
myImage.src = "images/draw-image.jpg";
myImage.onload  = function() {

	var myCanvas = document.id("myCanvas");
	var drawer = new ImageDrawer.Expand({
		'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);

	//drawing a image
	drawer.drawLeft();
}

or

#JS
var myImage = new Image();
myImage.src = "images/draw-image.jpg";
myImage.onload  = function() {

	var myCanvas = document.id("myCanvas");
	var drawer = new ImageDrawer.Expand({
		'canvas': myCanvas, 
		'source': myImage, 
		'width': 65,
		'transition': 'expo:in:out',
		'onDrawStart': function() {
			//image drawing start
			log.set("html", "Start");
		},
		'onDrawComplete': function() {
			//image drawing complete
			log.set("html", "Complete");
		}
	});
	//drawing a image
	drawer.drawLeft();
}

Options

All options have default values assigned, hence are optional.

  • canvas: (element) Canvas element where it draws.
  • source: (element/string) Image where it draws.
  • slideWidth: (int) Width of slide.
  • transition: (string) Transition of animation. Default is expo:in.
  • interval: (int) Interval when image is switched.
  • duration: (int) duration of animation.
  • onDrawStart: When drawing begins, this event is generated.
  • onDrawComplete: When drawing is completed, this event is generated.

Screenshots

ImageDrawer.Expand Top ImageDrawer.Expand Right ImageDrawer.Expand Bottom

License

The MIT License http://www.opensource.org/licenses/mit-license.php