ImageDrawer 1.1.0.1

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



Details

Author
Noritaka Horio
Current version
1.1.0.1
GitHub
holyshared/ImageDrawer
Downloads
7144
Category
Media
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_:
    • Core/Core
    • Core/Array
    • Core/String
    • Core/Number
    • Core/Function
    • Core/Object
    • Core/Event
    • Core/Browser
    • Core/Class
    • Core/Class.Extras
    • Core/Element
    • Core/Element.Style
    • Core/Element.Event
    • Core/Element.Dimensions
    • Core/Fx
    • Core/Fx.Transitions
    • ImageDrawer/ImageDrawer

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.


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.

blog comments powered by Disqus