HTML5 Mobile Web Canvas animation using Phonegap + Kinetic.JS

In this tutorial, I wanted to test the use and integration of KineticJS – an HTML5 Canvas library, with
Phonegap & JQuery-mobile.

Github: https://github.com/w2davids/phonegap-kineticjs.git

Kinetic.JS: http://www.kineticjs.com/

JQuery-mobile: http://jquerymobile.com/

Phonegap: http://phonegap.com/

File: Android activity – DemoPhonegapKineticJSActivity .java

package demo.kinetic;

import com.phonegap.*;
import android.os.Bundle;

public class DemoPhonegapKineticJSActivity extends DroidGap {
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		super.loadUrl("file:///android_asset/www/index.html");
	}
}

var demo1= function() {
var stage = new Kinetic.Stage({
container : "container",
width : $(document).width() - 20,
height : $(document).height() - 100,
draggable : true
});

var flowerLayer = new Kinetic.Layer();
var lineLayer = new Kinetic.Layer();
var flower = new Kinetic.Group({
x : stage.getWidth() / 2,
y : stage.getHeight() / 2
});

// build stem
var stem = new Kinetic.Line({
strokeWidth : 10,
stroke : "green",
points : [{
x : flower.getX(),
y : flower.getY()
}, {
x : stage.getWidth() / 2,
y : stage.getHeight() + 10
}]
});

// build center
var center = new Kinetic.Circle({
x : 0,
y : 0,
radius : 20,
fill : "yellow",
stroke : "black",
strokeWidth : 4
});

center.on("mousedown", function() {
document.body.style.cursor = "pointer";
});

center.on("mouseover", function() {
flower.setDraggable(true);
this.setFill("orange");
flowerLayer.draw();
});

center.on("mouseout", function() {
flower.setDraggable(false);
this.setFill("yellow");
flowerLayer.draw();
});
// build petals
var numPetals = 10;
for (var n = 0; n < numPetals; n++) {
// induce scope
( function() {
/*
* draw custom shape because KineticJS
* currently does not support tear drop
* geometries
*/
var petal = new Kinetic.Shape({
drawFunc : function() {
var context = this.getContext();
context.globalAlpha = 0.8;
context.beginPath();
context.moveTo(-5, -20);
context.bezierCurveTo(-40, -90, 40, -90, 5, -20);
context.closePath();
this.fill();
this.stroke();
},
fill : "#00dddd",
strokeWidth : 4,
draggable : true,
rotation : 2 * Math.PI * n / numPetals
});

petal.on("dragstart", function() {
this.moveToTop();
center.moveToTop();
});

petal.on("mouseover", function() {
this.setFill("blue");
flowerLayer.draw();
});

petal.on("mouseout", function() {
this.setFill("#00dddd");
flowerLayer.draw();
});

flower.add(petal);
}());
}

stage.on("mouseup", function() {
document.body.style.cursor = "default";
});

flower.on("dragmove", function() {
stem.attrs.points[0] = this.getPosition();
lineLayer.draw();
});

lineLayer.add(stem);
flower.add(center);
flowerLayer.add(flower);
stage.add(lineLayer);
stage.add(flowerLayer);

}

var demo2 = function() {
function writeMessage(messageLayer, message) {
var context = messageLayer.getContext();
messageLayer.clear();
context.font = "18pt Calibri";
context.fillStyle = "black";
context.fillText(message, 10, 25);
}

//
var stage = new Kinetic.Stage({
container : "container2",
width : $(document).width() - 20,
height : $(document).height() - 100,
draggable : true
});

//
var boxLayer = new Kinetic.Layer();
var messageLayer = new Kinetic.Layer();
var rectX = stage.getWidth() / 2 - 50;
var rectY = stage.getHeight() / 2 - 25;

var box = new Kinetic.Rect({
x : rectX,
y : rectY,
width : 100,
height : 50,
fill : "#00D2FF",
stroke : "black",
strokeWidth : 4,
draggable : true
});

// write out drag and drop events
box.on("dragstart", function() {
writeMessage(messageLayer, "dragstart");
});
box.on("dragend", function() {
writeMessage(messageLayer, "dragend");
});

boxLayer.add(box);

stage.add(messageLayer);
stage.add(boxLayer);

var amplitude = 150;
var period = 2000;
// in ms
var centerX = stage.getWidth() / 2 - 80;

stage.onFrame(function(frame) {
box.setY(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
boxLayer.draw();
});

//Start Animation
document.getElementById('start').addEventListener('click', function() {
stage.start();
}, false);

// resume transition
document.getElementById('stop').addEventListener('click', function() {
stage.stop();
}, false);
}