Question

I tries to flip the image, I referred http://randompast.github.io/randomtests/kineticjs/FlipImage-Demo.html but it is not working for me, I am using following kineticjs kinetic-v5.0.1.js, and kinetic-v5.0.1.min.js.

Here My code

            var image = new Kinetic.Image({
                x: stage.width / 2 + 53,
                y: stage.height / 2 + 59,
                image: imageObj,
                width: 300,
                height: 200,
                draggable: true
            });

            image.scale.y =-1;
            image.scale.x =-1;

            // add the shape to the layer
            layer.add(image);

            // add the layer to the stage
            stage.add(layer);

Help me to find out the solution.

Thanks in Advance.

Was it helpful?

Solution

First a typo in your code:

stage.width()   // not stage.width
stage.height()  // not stage.height

The syntax for scaling is this:

image.scale({x:-1,y:-1});
layer.draw();

So your code might look like this:

var image = new Kinetic.Image({
    x: stage.width() / 2,
    y: stage.height() / 2,
    image: imageObj,
    width: 150,
    height: 150,
    draggable: true
});
layer.add(image);
image.scale({x:-1,y:-1});
layer.draw();
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top