Δ.js

Easy working with objects

Object-oriented API

// getting the context
var ctx = Delta.query('#example1');

// making two circles
var first = ctx.circle(100, 70, 50, '#0af');
var second = ctx.circle(300, 80, 70, '#a0f');

// adding a stroke to the 1st circle
first.attr('stroke', '2px black');

Yes, it's that easy!

Transforms

Add and rotate rect

// making a rect
var rect = ctx.rect(200, 50, 50, 50, 'red');

// rotate it on 45 degree
rect.attr('rotate', 45);

Rotate on 1 degree each 10 ms

var rect = ctx.rect(200, 50, 50, 50, 'red');

var i = 0;
setInterval(function(){
    rect.attr('rotate', i++);
}, 10);

Mouse events

An object changing its color on hover.

// making a triangle as a path
var triangle = ctx.path([
    [100, 10],
    [10, 90],
    [190, 90]
], 'red');

// adding event listeners
triangle.on('mouseover', function(){
    this.attr('fill', 'blue');
}).on('mouseout', function(){
    this.attr('fill', 'red');
});

ctx.text('Mouseover me!', 50, 100, 'Arial 14px', 'black');

Animation

Add and animate rect

// making a rect
var rect = ctx.rect(10, 10, 50, 50, 'red');

// animate
rect.animate({
    x: 300,
    width: 80,
    height: 80,
    fill: 'blue'
}, 10000);