The code below does not run, and I think this is due to the line:
alert(nodes[i].getX());
I think nodes[i] is out of scope? If so, why?
(I have commented out much of the code to isolate the problem. Basically, the code creates 10 circles, then 10 curves, and then animates them in a canvas with kineticjs).
Thx!
The code:
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
<script type="text/javascript" src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.7.js"></script>
<script>
window.onload = function() {
// global parameters
var curvatureX = 10;
var curvatureY = 10;
var nodeRadius = 10;
var stage = new Kinetic.Stage({
container: "container",
width: 578,
height: 300
});
var layer = new Kinetic.Layer();
var nodes = [];
for (i = 0;i<10;i++){
nodes[i] = new Kinetic.Circle({
x: i*20,
y: i*5,
z:1,
radius: nodeRadius,
fill: "blue",
stroke: "black",
strokeWidth: 4
});
layer.add(nodes[i]);
alert(nodes[i].getX()); // *** THIS ALERT DOES SHOW UP***
}
var edges = [];
for (i = 0;i<10;i++){
edges[i]= new Kinetic.Shape({
drawFunc: function() {
var context = this.getContext();
context.beginPath();
// ***WHERE THE PROBLEM IS ***
alert(nodes[i].getX());
//ALERT DOES NOT SHOW UP + BLANK SCREEN
// context.moveTo(nodes[i].getX(), nodes[i].getY());
// if (nodes[i].getY()-nodes[i+1].getY()<0){
// context.quadraticCurveTo((nodes[i].getX()+nodes[i+1].getX()+curvatureX)/2, (nodes[i].getY()+nodes[i+1].getY()-curvatureY)/2, nodes[i+1].getX(), nodes[i+1].getY());
// }
// else{
// context.quadraticCurveTo((nodes[i].getX()+nodes[i+1].getX()+curvatureX)/2, (nodes[i].getY()+nodes[i+1].getY()+curvatureY)/2, nodes[i+1].getX(), nodes[i+1].getY());
//
// }
context.lineWidth = 10;
// line color
context.strokeStyle = "black";
context.stroke();
},
fill: "#00D2FF",
stroke: "black",
strokeWidth: 4
});
layer.add(edges[i]);
}
stage.add(layer);
var amplitude_1 = 100;
var amplitude_2 = 30;
var period = 2000;
// in ms
var centerX = stage.getWidth() / 2;
var centerY = stage.getHeight() / 2;
stage.onFrame(function(frame) {
for (i=0;i<nodes.length;i++){
nodes[i].setX(amplitude_1 * i * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
nodes[i].setY(amplitude_2 * i+ 20);
}
layer.draw();
});
stage.start();
};
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
It displayed. Use the a develop toolbar to do some debug.