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
- Include the library JS files.
- Add a canvas element to your DOM.
- Setup your scene :
eg:
var scene = new Scene("canvasId");
scene.setBackgroundColor("#cecece");
scene.setBackgroundImage("img.jpg");
- 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);
.... - Draw the elements into the scene:
eg:
setTimeout(function(){
scene.invalidate();
}, 500);
- 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
});
- Set an element as draggable:
eg:
var draggable = new Draggable();
draggable.setDraggable(circle);
draggable.setDraggable(line);
....