Transitions

var element = $('#target_div');

// Attach a dual canvas associated with the element as a child of the element

// configured with width 400 and height 400.

var config = {

            width: 400,

            height: 400,

        };

element.dual_canvas_helper(config);

​

​

var small_radius = 10;

var big_radius = 20;

var offset = 50;

var selected_color = "magenta";

var normal_color = "cyan";

var selected_text = "yellow";

var normal_text = "blue";

var duration = 3;

var text_duration = 5;

var n_circles = 10;

var theta = 2 * Math.PI / n_circles;

​

var texts = {};

var circles = {};

​

// Draw a circle of numbered circles

var draw = function() {

    for (var i=0; i<n_circles; i++) {

        var name = ""+i;

        var cx = offset * Math.cos(theta * i);

        var cy = offset * Math.sin(theta * i);

        circles[name] = element.circle({name: true, 

            x:cx, y:cy, r:small_radius, color:normal_color,

            normal_position: [cx, cy]});

        texts[name] = element.text({name: true, text: name, degrees: 0,

            x: cx, y: cy, color:normal_text, align:"center", valign:"center"});

        // cover the circle and the text with an invisible circle to receive events

        var invisible_circle = element.circle({name: name, x:cx, y:cy, r:small_radius, 

            color: "rgba(0,0,0,0)",         // invisible

            });

        // Bind an event to invisible circle

        invisible_circle.on("mouseover", do_transition);

    }

}

​

var selected_name = null;

var selected_position = null;

​

var do_transition = function (event) {

    var name = event.canvas_name;

    if ((name) && (name != selected_name)) {

        // transition the visible object under the event

        circles[name].transition({color:selected_color, r:big_radius, x:0, y:0}, duration);

        texts[name].transition({color:selected_text, x:0, y:0, degrees:720}, text_duration);

        // undo transition for previously selected objects

        if (selected_name) {

            circles[selected_name].transition(

                {color:normal_color, r:small_radius, x:selected_position[0], y:selected_position[1]}, 

                duration);

            texts[selected_name].transition(

                {color:normal_text, x:selected_position[0], y:selected_position[1], degrees:0},

                text_duration);

        }

    }

    selected_name = name;

    selected_position = [event.object_info.x, event.object_info.y];

};

​

// attach event handler

draw()

​

// Fit the figure into the available space

element.fit(null, 20);