Heartcode CanvasLoader YUI Library

CanvasLoader  0.9.0

Heartcode CanvasLoader YUI Library > CanvasLoader > CanvasLoader
Search:
 
Filters

Class CanvasLoader

CanvasLoader is a JavaScript UI library that draws and animates circular preloaders using the Canvas HTML object.

A CanvasLoader instance creates two canvas elements which are placed into a placeholder div (the id of the div has to be passed in the constructor). The second canvas is invisible and used for caching purposes only.

If no id is passed in the constructor, the canvas objects are paced in the document directly.

Constructor

CanvasLoader ( id , opt )
Parameters:
id <String> The id of the placeholder div
opt <Object> Optional parameters

Possible values of optional parameters:
  • id (String): The id of the CanvasLoader instance
  • safeVML (Boolean): If set to true, the amount of CanvasLoader shapes are limited in VML mode. It prevents CPU overkilling when rendering loaders with high density. The default value is true.

Properties

activeId - protected Number

The active shape id for rendering

can - protected Object

The div we draw the shapes into

cCan - protected Object

The canvas we use for caching

cCon - protected Object

The context of the cache canvas

color - protected String

The color of the loader shapes in HEX
Default Value: "#000000"

con - protected Object

The canvas context

cont - protected Object

The div we place the canvas object into

cRGB - protected Object

The color of the loader shapes in RGB

density - protected Number

The number of shapes drawn on the loader canvas
Default Value: 40

diameter - protected Number

The diameter of the loader
Default Value: 40

fps - protected Number

The FPS value of the loader animation rendering

range - protected Number

The amount of the modified shapes in percent.

ready - protected Boolean

Tells if the canvas and its context is ready

shape - protected String

The type of the loader shapes
Default Value: "oval"

speed - protected Number

The speed of the loader animation

timer - protected Boolean

Adds a timer for the rendering

Methods

addEl

protected Object addEl ( tag , par , opt )
Creates a new element with the tag and applies the passed properties on it
Parameters:
tag <String> The tag to be created
par <String> The DOM element the new element will be appended to
opt <Object> Additional properties passed to the new DOM element
Returns: Object
The DOM element

clean

protected void clean ( )
Cleans the canvas

draw

protected void draw ( )
Draw the shapes on the canvas

getColor

String getColor ( )
Returns the loader color in a hexadecimal form

getDensity

Number getDensity ( )
Returns the number of shapes drawn on the loader canvas

getDiameter

Number getDiameter ( )
Returns the diameter of the loader.

getFPS

Number getFPS ( )
Returns the fps of the loader

getRange

Number getRange ( )
Returns the modified shape range in percent

getRGB

protected void getRGB ( color )
Return the RGB values of the passed color
Parameters:
color <String> The HEX color value to be converted to RGB

getShape

String getShape ( )
Returns the type of the loader shapes

getSpeed

Number getSpeed ( )
Returns the speed of the loader animation

hide

void hide ( )
Stops the rendering of the loader animation and hides the loader

init

protected void init ( id , opt )
Initialization method
Parameters:
id <String> The id of the placeholder div, where the loader will be nested into
opt <Object> Optional parameters

Possible values of optional parameters:
  • id (String): The id of the CanvasLoader instance
  • safeVML (Boolean): If set to true, the amount of CanvasLoader shapes are limited in VML mode. It prevents CPU overkilling when rendering loaders with high density. The default value is true.

kill

void kill ( )
Removes the CanvasLoader instance and all its references

redraw

protected void redraw ( )
Redraws the canvas

reset

protected void reset ( )
Resets the timer

setAttr

protected Object setAttr ( el , opt )
Sets the attributes on the element
Parameters:
el <Object> The DOM element to add the attributes to
opt <Object> The attributes
Returns: Object
The DOM element

setColor

void setColor ( color )
Sets hexadecimal color of the loader
Parameters:
color <String> The default value is '#000000'

setCSS

protected Object setCSS ( el , opt )
Sets the css properties on the element
Parameters:
el <Object> The DOM element to be styled
opt <Object> The style properties
Returns: Object
The DOM element

setDensity

void setDensity ( density )
Sets the number of shapes drawn on the loader canvas
Parameters:
density <Number> The default value is 40

setDiameter

void setDiameter ( diameter )
Sets the diameter of the loader
Parameters:
diameter <Number> The default value is 40

setFPS

void setFPS ( fps )
Sets the rendering frequency.
This value tells the loader how many times to refresh and modify the canvas in 1 second.
Using the right combination of the setSpeed and the setFPS methods allows the users to optimize the CPU usage of the loader whilst keeping the animation on a visually pleasing level.
Parameters:
fps <Number> The default value is 24

setRange

void setRange ( range )
Sets the amount of the modified shapes in percent.
With this value the user can set what range of the shapes should be scaled and/or faded. The shapes that are out of this range will be scaled and/or faded with a minimum amount only.
This minimum amount is 0.1 which means every shape which is out of the range is scaled and/or faded to 10% of the original values.
The visually acceptable range value should be between 0.4 and 1.5.
Parameters:
range <Number> The default value is 1.3

setShape

void setShape ( shape )
Sets the type of the loader shapes.

The acceptable values are:
  • 'oval'
  • 'spiral'
  • 'square'
  • 'rect'
  • 'roundRect'
Parameters:
shape <String> The default value is 'oval'

setSpeed

void setSpeed ( speed )
Sets the speed of the loader animation.
This value tells the loader how many shapes to skip by each tick.
Using the right combination of the setFPS and the setSpeed methods allows the users to optimize the CPU usage of the loader whilst keeping the animation on a visually pleasing level.
Parameters:
speed <Number> The default value is 2

show

void show ( )
Shows the rendering of the loader animation

tick

protected void tick ( )
Renders the loader animation

transCon

protected void transCon ( x , y , r )
Transforms the cache canvas before drawing
Parameters:
x <Object> The canvas context to be transformed
x <Number> x translation
y <Number> y translation
r <Number> Rotation radians


Copyright © 2011 RĂ³bert Pataki. The Heartcode CanvasLoader is released under the MIT licence. For more information and other open source stuff please visit the Heartcode blog, check out my GitHub profile and follow the Heartcode tweets.