playing with Kinetic/html5 - I try to make an image to Rotate about its center via "offset", but it's not working. Below is the small code snippet.. (It just refused to rotate about center of img1!) Many thanks!
<!DOCTYPE HTML>
<html>
<head>
<!--
Kinetic Tutorials:
Image http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-image-tutorial/
Rotation http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-rotation-animation-tutorial/
http://www.html5canvastutorials.com/kineticjs/html5-canvas-linear-transition-tutorial-with-kineticjs/
-->
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container" style="position:fixed;top:0px;left:0px;"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 200,
height: 200
});
var layer = new Kinetic.Layer();
var img1 = new Image();
img1.onload = function() {
var Gear1 = new Kinetic.Image({
x: 0,
y: 0,
image: img1,
width: 50,
height: 50,
offset: [25,25] /* This is supposed to shift center of rotation to middle of img1, but it's not working!? */
});
layer.add(Gear1);
stage.add(layer);
var angularSpeed = 360 / 3;
var anim = new Kinetic.Animation(function(frame) {
var angleDiff = frame.timeDiff * angularSpeed / 1000;
Gear1.rotate(angleDiff);
}, layer);
anim.start();
};
img1.src = 'Gear.jpg';
</script>
</body>
</html>
Your code works in KineticJS v4.7.
KineticJS v5 uses an object to define the offset instead of an array:
offset: {x:25,y:25}
A Demo in version 5: http://jsfiddle.net/m1erickson/UbdW2/