Kineticjs - can not control scaled image - image

Question

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

Answer 1

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.