Image flip in kinetic?
I have an image in my code as defined here
var imageObj = new Image();
imageObj.onload = function(){
imageF = new Kinetic.Image({
x: 0,
y: 0,
scale: (100,100),
image: imageObj,
name: "fluffy",
});
layer.add(imageF);
stage.add(layer);
stage.start();
}
imageObj.src = "Flutter_Fluffy_100.png";
And I would like to be able to flip it (horizontally) at a specific running time. I tried changing the source of the image to pre-flipped, but it caused a lot of problems with duplicating the image, resetting the position and a lot of things. Is there a way to flip an image that is created and used this way? Thank!
+3
source to share
1 answer
This is probably what you want:
//imageF.scale.y =-1;
imageF.scale.x =-1;
This is demonstrated here: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-scale-animation-tutorial/
It's almost the same with the image: http://randompast.github.io/randomtests/kineticjs/FlipImage-Demo.html
edit: fixed link
+10
source to share