Search code examples
kineticjs

image.scale not working in kineticjs?


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.


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();