Scene Actions
Force redraw
Reset to initial
Clear all
Drag-Drop
Yellow image
Green rectangle
Text shape
Stress test
Animations
Yellow image
Shape Manipulation
Resize small rectangle
Code samples

Available functionalities

Setup the scene
  • Set background image or color.

Draw elements
  • Behaviour : elements can overlap - property zIndex is provided.
  • Behaviour : elements have move and resize functions.
  • Appearance : elements have strokeColor, strokeWidth and fillColor attributes. Of course these have no effect on image elements.
  • Elements: Line, ArrowedLine, Rectangle, Circle, CanvasImage .

Behaviour functionalities
  • Animation - move (with speed or total animation time) - provides progress with percent parameter, and finished callbacks.
  • Draggable - elements can be set draggable.

How to use

Setup

  1. Include the library JS files.
  2. Add a canvas element to your DOM.
  3. Setup your scene :
    eg:

    var scene = new Scene("canvasId");
    scene.setBackgroundColor("#cecece");
    scene.setBackgroundImage("img.jpg");
  4. Add elemnents to your scene:
    eg:

    var rect = new Rectangle(200,80,30,30);
    rect.zIndex = 4;
    scene.add(rect);

    var img = new CanvasImage(100,100, 50,50,"./res/img1.png");
    img.zIndex = 333;
    scene.add(img);

    var circle = new Circle(300,300,50);
    circle.zIndex = 11;
    scene.add(circle);
    ....
  5. Draw the elements into the scene:
    eg:

    setTimeout(function(){
       scene.invalidate();
    }, 500);
  6. Animate an element:
    eg:

    var anim = new Animation(circle, {mode:"speed"});
    anim.animateMove(300,100,0.5,function(percent){
          // animation progress callback
       }, function(){
          // animation finished callback
       });
  7. Set an element as draggable:
    eg:

    var draggable = new Draggable();
    draggable.setDraggable(circle);
    draggable.setDraggable(line);
    ....