Question

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 have it flip (horizontally) at certain times in the running. I tried to change the image source to a pre-flipped one, but that caused, well, a lot of problems with the image duplicating, resetting position and lots of stuff. Is there a method to flip an image that is created and used this way? Thanks!

Answer 1

This is probably what you want:

//imageF.scale.y =-1;
imageF.scale.x =-1;

It’s demonstrated here:
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-scale-animation-tutorial/

It’s pretty much the same with an image:
http://randompast.github.io/randomtests/kineticjs/FlipImage-Demo.html

edit: fixed link