Considering the following code:
var stage = new Kinetic.Stage({
container : "container",
width : 600,
height : 200
});
var layer = new Kinetic.Layer();
// one revolution per 4 seconds
var angularSpeed = Math.PI / 2;
var imageObj = new Image();
var image = {};
imageObj.onload = function() {
image = new Kinetic.Image({
x : 500,
y : 135,
image : imageObj,
width : 99,
height : 99,
offsetX: 0,
offsetY: 0
});
image.rotation = 0;
layer.add(image);
stage.add(layer);
stage.onFrame(function(frame) {
var angleDiff = frame.timeDiff * angularSpeed / 1000;
image.rotateDeg(angleDiff);
layer.draw();
});
stage.start();
};
imageObj.src = "images/tire-brands.png";
How to make the image rotate in place, like 360 degrees but the pivot point to be in the center ?
So, when I make the image object, the goal is to have an animation running there. Currently it's only rotating the image on one side.
Considering the following code:
var stage = new Kinetic.Stage({
container : "container",
width : 600,
height : 200
});
var layer = new Kinetic.Layer();
// one revolution per 4 seconds
var angularSpeed = Math.PI / 2;
var imageObj = new Image();
var image = {};
imageObj.onload = function() {
image = new Kinetic.Image({
x : 500,
y : 135,
image : imageObj,
width : 99,
height : 99,
offsetX: 0,
offsetY: 0
});
image.rotation = 0;
layer.add(image);
stage.add(layer);
stage.onFrame(function(frame) {
var angleDiff = frame.timeDiff * angularSpeed / 1000;
image.rotateDeg(angleDiff);
layer.draw();
});
stage.start();
};
imageObj.src = "images/tire-brands.png";
How to make the image rotate in place, like 360 degrees but the pivot point to be in the center ?
So, when I make the image object, the goal is to have an animation running there. Currently it's only rotating the image on one side.
Share Improve this question edited Oct 24, 2013 at 8:58 Nahn 3,2561 gold badge26 silver badges23 bronze badges asked Jul 6, 2012 at 15:39 Damjan DimitrioskiDamjan Dimitrioski 7272 gold badges10 silver badges21 bronze badges2 Answers
Reset to default 5You need to use the offset property (not sure where you got offsetX and offsetY from--an older version of KinectJS?):
image = new Kinetic.Image({
x : 500,
y : 135,
image : imageObj,
width : 99,
height : 99,
offset: [50, 50]
});
function rotate(angle){ // 90 or -90
if(stage.getHeight() <= image.getWidth()){
aspect = image.getWidth() / image.getHeight();
height = stage.getHeight() / aspect;
image.setWidth(stage.getHeight());
image.setHeight(height);
}
image.setOffset(image.getWidth()/2,image.getHeight()/2);
image.setPosition(stage.getWidth()/2,stage.getHeight()/2);
image.rotateDeg(angle);
layer.draw();
}
above code helped me to rotate an image