Kineticjs Group Image dragging

Question

Kineticjs Group Image dragging

174 views Asked by KJSR At 12 June 2017 at 13:37

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

Original Q&A

There are 2 answers

lavrton On 16 June 2017 at 03:11

As an example of dragBoundFunc:

const dragRect = new Konva.Rect({
  x: window.innerWidth / 2 - 50,
  y: window.innerHeight / 2 - 50,
  width: 100,
  height: 100,
  fill: 'green',
  draggable: true,
  dragBoundFunc: (pos) => {
    const leftBound = cropRect.x();
    const rightBound = cropRect.x() + cropRect.width() - dragRect.width();
    pos.x = Math.max(leftBound, Math.min(rightBound, pos.x));

    const topBound = cropRect.y();
    const bottomBound = cropRect.y() + cropRect.height() - dragRect.height();
    pos.y = Math.max(topBound, Math.min(bottomBound, pos.y));
    return pos;
  }

});

Demo: http://jsbin.com/jilagadeqa/1/edit?js,output

**Vanquished Wombat** · Accepted Answer · 2017-06-15T21:08:34+00:00

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>

TechQA.

Kineticjs Group Image dragging

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML5-CANVAS

Related Questions in KINETICJS

Related Questions in KONVAJS

Popular Questions

Popular Tags

Trending Questions