Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Goya (gallery-goya)

Last Updated: 04/14/10

+ 1 -

Sergi Mansilla

Created: 04/13/10
Project: YUI 3
License: YUI BSD
YUI Version: 3.1.0
Free for use.

Goya is a module for YUI 3 that simplifies development on canvas by enabling
the user to draw on and animate independent layers, in a similar way than Flash does.

Every layer preserves most of canvas methods and behavior, and acts completely
independent of the other layers. A layer can have as many children as necessary,
that will be drawn and animated in the context of the parent.

So far, Goya works great on Webkit-based browsers and has some small problems (only noticeable when using mouse events) on Firefox because of the infamous isPointInPath bug.

There is a lot of work in progress and some new features coming very soon, including:

Integrated YUI Drag and Drop
Width/Height handlers
More animation handlers
Proper key bindings
Speed improvements
More flexibility when swapping a layer on a given event
Documentation and lots of more examples

Goya was inspired and contains parts of mojombo's primer project.

This code shows several examples of Goya Layers drawing and animation. The most important thing to notice is that every layer acts as an independent canvas and can have events attached to it.

So far, the following attributes of a layer can be animated:

x
y
angle

A layer can react to the following mouse events:

click
mouseover
mouseout

(And of course any custom event)

More attributes and events will be added very soon.

Code Sample

YUI().use('gallery-goya', function(Y) {
 
    // Create Goya parent object and pass a node to hook it on
    // along with the desired canvas size
    var G = new Y.Goya("#container", 700, 700);
 
    // Create the first layer inside the canvas
    var square = new Y.Goya.Layer();
    square.fillStyle = "#ff0000";
    square.fillRect(13, 13, 25, 25);
    G.appendChild(square);
 
    // Add YUI event listeners
    square.on("mouseover", function() {
        square.fillStyle = "#00ff00";
        square.fillRect(13, 13, 25, 25);
    });
    square.on("mouseout", function() {
        square.fillStyle = "#ff0000";
        square.fillRect(13, 13, 25, 25);
    });
    square.on("click", function() {
        alert("You clicked the red square!!");
    });
 
 
    // Create a second layer
    var roundedRect = new Y.Goya.Layer();
    roundedRect.fillStyle = "#0000ff";
    roundedRect.setXY([200, 200]);
    roundedRect.moveCenterTo(10, 10); // Set rotation center
    roundedRect.fillRoundedRect(0, 0, 90, 20, 10);
    G.appendChild(roundedRect);
 
    // ...and a text layer inside the second layer
    var text1 = new Y.Goya.Layer();
    text1.setXY([5, 5]);
    text1.font = "14px Monaco";
    text1.fillStyle = "#FFFFFF";
    text1.fillText("Click me!!", 0, 10);
    roundedRect.appendChild(text1);
 
    // Create a text layer
    var text = new Y.Goya.Layer();
    text.setXY([50, 100]);
    text.font = "14px Arial";
    text.fillStyle = "#00AA00";
    text.fillText("Hello, World!", 0, 20);
    G.appendChild(text);
 
    // Create the animation object. We can use almost every feature of YUI Anim,
    // such as easing:
    var textAnim = new Y.Anim({
        node: text,
        from: { angle: -30 },
        to: { angle: 30 },
        duration: 1,
        easing: Y.Easing.easeOut,
        iterations: 'infinite',
        direction: 'alternate'
    });
    textAnim.run();
 
    // Create an infinite animation that moves the first square back and forth 100 px
    var squareAnim = new Y.Anim({
        node: square,
        to: {
            x: 100,
            y: 50
        },
        duration: 2,
        iterations: 'infinite',
        direction: 'alternate'
    });
    squareAnim.run();
 
    // Create an eased animation that follows a random curved path
    // when the rounded rectangle is clicked
    var roundedRectAnim = new Y.Anim({
            node: roundedRect,
            duration: 3,
            easing: Y.Easing.elasticOut
    });
 
    roundedRect.on("click", function(e) {
        roundedRectAnim.set('to', {
            curve: randomCurve([230, 150]), // Make it follow a random path
            angle: parseInt(Math.random()*360) // We want to end up with the layer rotated to a random angle
        });
        roundedRectAnim.run();
    });
 
    var randomCurve = function(end) {
        var points = [],
            n = 3,
            winWidth = 100,
            winHeight = 100;
 
        for (var i = 0; i < n; ++i) {
            points.push([
                Math.floor(Math.random() * winWidth),
                Math.floor(Math.random() * winHeight)
            ]);
        }
 
        if (end) { points.push(end); }
        return points;
    };
 
});

YUI().use('gallery-goya', function(Y) {

// Create Goya parent object and pass a node to hook it on
    // along with the desired canvas size
    var G = new Y.Goya("#container", 700, 700);

// Create the first layer inside the canvas
    var square = new Y.Goya.Layer();
    square.fillStyle = "#ff0000";
    square.fillRect(13, 13, 25, 25);
    G.appendChild(square);

// Add YUI event listeners
    square.on("mouseover", function() {
        square.fillStyle = "#00ff00";
        square.fillRect(13, 13, 25, 25);
    });
    square.on("mouseout", function() {
        square.fillStyle = "#ff0000";
        square.fillRect(13, 13, 25, 25);
    });
    square.on("click", function() {
        alert("You clicked the red square!!");
    });

// Create a second layer
    var roundedRect = new Y.Goya.Layer();
    roundedRect.fillStyle = "#0000ff";
    roundedRect.setXY([200, 200]);
    roundedRect.moveCenterTo(10, 10); // Set rotation center
    roundedRect.fillRoundedRect(0, 0, 90, 20, 10);
    G.appendChild(roundedRect);

// ...and a text layer inside the second layer
    var text1 = new Y.Goya.Layer();
    text1.setXY([5, 5]);
    text1.font = "14px Monaco";
    text1.fillStyle = "#FFFFFF";
    text1.fillText("Click me!!", 0, 10);
    roundedRect.appendChild(text1);

// Create a text layer
    var text = new Y.Goya.Layer();
    text.setXY([50, 100]);
    text.font = "14px Arial";
    text.fillStyle = "#00AA00";
    text.fillText("Hello, World!", 0, 20);
    G.appendChild(text);

// Create the animation object. We can use almost every feature of YUI Anim,
    // such as easing:
    var textAnim = new Y.Anim({
        node: text,
        from: { angle: -30 },
        to: { angle: 30 },
        duration: 1,
        easing: Y.Easing.easeOut,
        iterations: 'infinite',
        direction: 'alternate'
    });
    textAnim.run();

// Create an infinite animation that moves the first square back and forth 100 px
    var squareAnim = new Y.Anim({
        node: square,
        to: {
            x: 100,
            y: 50
        },
        duration: 2,
        iterations: 'infinite',
        direction: 'alternate'
    });
    squareAnim.run();

// Create an eased animation that follows a random curved path
    // when the rounded rectangle is clicked
    var roundedRectAnim = new Y.Anim({
            node: roundedRect,
            duration: 3,
            easing: Y.Easing.elasticOut
    });

roundedRect.on("click", function(e) {
        roundedRectAnim.set('to', {
            curve: randomCurve([230, 150]), // Make it follow a random path
            angle: parseInt(Math.random()*360) // We want to end up with the layer rotated to a random angle
        });
        roundedRectAnim.run();
    });

var randomCurve = function(end) {
        var points = [],
            n = 3,
            winWidth = 100,
            winHeight = 100;

for (var i = 0; i < n; ++i) {
            points.push([
                Math.floor(Math.random() * winWidth),
                Math.floor(Math.random() * winHeight)
            ]);
        }

if (end) { points.push(end); }
        return points;
    };

});

Forum Posts

No forum posts for this module.