CODEWITHSUNDEEP
imagekineticjsscaling
user2960407
user2960407

Reputation: 5

Kineticjs - can not control scaled image

when you drag images you can control their moving with dragBoundFunc. Is there something similar when you scaling? I want to set an image area in "part of a stage" and when i setScale for this image and make it bigger, i don't want to see parts which is bigger than image area i've set before. is it possible? Here is my fiddle..

var stage = new Kinetic.Stage({
    container : 'canvas',
    width     : 620,
    height    : 236

});
var layer = new Kinetic.Layer();

var leftImage = new Image();

leftImage.src = "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg";


var leftImg = new Kinetic.Image({
    x         : stage.getWidth() - 480,
    y         : stage.getHeight() - 126,
    image     : leftImage,
    width     : 190,
    height    : 124,
    offset    : [95, 62],
    draggable : true,
    dragBoundFunc: function(pos) {
            var x=stage.getWidth() - 480;
            var y=stage.getHeight() - 126;
            var radius = 50;
            var scale = radius/ Math.sqrt(Math.pow(pos.x - x, 2) + Math.pow(pos.y - y, 2));
            if(scale < 1)
              return {
                y: Math.round((pos.y - y) * scale + y),
                x: Math.round((pos.x - x) * scale + x)
              };
            else
              return pos;
          }


});


 var rectLeft = new Kinetic.Rect({
        x                : 38,
        y                : 20,
        width            : 232,
        height           : 184,
        stroke:'red',
        listening:false

    });

 var rectRight = new Kinetic.Rect({
        x                : 350,
        y                : 20,
        width            : 232,
        height           : 184,
        stroke:'green',
        listening:false
    });



        layer.add(leftImg);
        layer.add(rectLeft);
        layer.add(rectRight);

        stage.add(layer);


 document.getElementById('larger').addEventListener('click', function() {
        leftImg.setScale(leftImg.getScale().x + 1.5);
        layer.draw();
     }, false);

Upvotes: 0

Views: 91

Answers (1)

markE
markE

Reputation: 105015

Sure.

You can clip your scaled image into a fixed area of the stage by wrapping your image in a group and setting the clip property of that group to your fixed area.

If you set the clip property on a group like this:

var group=new Kinetic.Group({
    x:100,
    y:100,
    width: originalImageWidth,
    height: originalImageHeight,
    clip: [0,0,originalImageWidth,originalImageHeight]
});

Then the image you put in the group will be clipped to stage @100,100 and size == original image size.

If you later scale the image larger, the clipping area will act as a "viewport" into part of the larger image.

Upvotes: 1

Related Questions