MooTools

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.

<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.

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

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.

<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.

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

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.

License

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

Screenshots

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.