javascript jquery html5-canvas kineticjs konvajs

Kineticjs Group Image dragging

I am new to Kinetic js and having issue figuring out how to stop the image from moving outside the boundary which then creates a white space

Here is my code so far

//photo layer
var photoGroup = new Kinetic.Group({ x: layout.photoGroup.x, y: layout.photoGroup.y, draggable: true });

var Photolayer = new Kinetic.Layer();

var cropArea = new Kinetic.Rect({
     x: layout.cropAreaRect.x,
     y: layout.cropAreaRect.y,
     width: layout.cropAreaRect.width,
     height: layout.cropAreaRect.height,
     fill: "white",
     listening: false
});

Photolayer.add(cropArea);
Photolayer.add(photoGroup);

stage.add(Photolayer);

Solution

Here is a working code snippet illustrating a dragBoundFunc().

The gold rect is the area we intend to restrict the drag within. The blue rect shows the area we compute - different from the gold because we use the topleft of the draggable as the basis for our maths and we have to account for its own width and height. The red block could be an image or any Konvajs element.

Drag the red block!

// add a stage
var s = new Konva.Stage({
  container: 'container',
  width: 800,
  height: 600
});

// add a layer        
var l = new Konva.Layer();
s.add(l);

// Add a green rect to the LAYER just to show boundary of the stage.
var green = new Konva.Rect({stroke: 'lime', width: 800, height: 600, x: 0, y: 0});
l.add(green);


// Add a gold rect to the LAYER just to give some visual feedback on intended drag limits
var gold = new Konva.Rect({stroke: 'gold', width: 400, height: 200, x: 55, y: 55});
l.add(gold);


// Add a red rect to act as our draggable
var red = new Konva.Rect({fill: 'red',  stroke: 'red', width: 40, height: 50, x: 65, y: 65, draggable: true,
        dragBoundFunc: function(pos) {
        
                  var newX = pos.x;
                  if (newX < minX){ newX = minX};
                  if (newX > maxX){ newX = maxX};

                  var newY = pos.y;
                  if (newY < minY){ newY = minY};
                  if (newY > maxY){ newY = maxY};

                  $("#info").html('Info: Pos=(' + newX + ', ' + newY + ') range X=' + minX + ' - ' + maxX + ' Y=' + minY + ' - ' + maxY);
                  
          return {
                x: newX,
                y: newY
            }
        }

});
l.add(red);


// calculate the drag boundary once for performance - we need to have the draggable element size for this !
var goldPos = gold.getAbsolutePosition() 
var minX = goldPos.x;
var maxX = goldPos.x + gold.width() - red.width();
var minY = goldPos.y;
var maxY = goldPos.y + gold.height() - red.height();


// Add a blue rect to the LAYER just show the computed drag limits - note the subtraction of the draggable element dimensions from maxX & Y. Note the 1px adjustment is to avoid overlapping the gold rect in the demo and is not required for live.
var blue = new Konva.Rect({stroke: 'blue', opacity: 0.2, width: 399 - red.width(), height: 199 - red.height(), x: 56, y: 56});
l.add(blue);

// bring red back to top so we can drag it
red.moveToTop();

l.draw(); // redraw the layer it all sits on.

#container {
  border: 1px solid #ccc;
}
#info {
height: 20px;
border-bottom: 1px solid #ccc;
}
#hint {
font-style: italic;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.3/konva.min.js"></script>


<body>
<div id='hint'>Hint: green is stage, gold is intended drag limit, blue is computed drag limit.<br/>Drag the red block!</div>

<div id='info'>Info:</div>

  <div id="container"></div>
</body>