Konva - Using Rotate and keeping within bounds

Question

I am using Konva to create an area on a webpage. I create a dragBoundFunc function for my rectangle checking pos.x and pos.y and width of canvas and rect and this works fine - the rectangle only stays in this area as I want it to when dragged.

My problem comes when I rotate the rectangle 90 degrees. Now width is less than height when I check getClientRect().width and getClientRect().height which is expected but it now won't drag all the way to the end of my canvas unless I detect end of rotation and change my shapes offsetY value to 65 and then it works fine.

Is changing offsetY and offsetX after rotation the right approach to fix this problem and how do I calculate what to set them to if yes?

           dragBoundFunc: function(pos) {
        var iw = 600 - (my_shape.getClientRect().width);
        var ih = 400 - my_shape.getClientRect().height;
        var newX = pos.x > iw  ? iw : pos.x;
        var newY = pos.y > ih ? ih : pos.y;
        return {
            x: newX > 0 ? newX : 0,
            y: newY > 0 ? newY : 0
        };

    }

Answer 1

Here is a working solution. Note that this works only for fixed rotations of 0, 90, 180 and 270 degrees or multiples. A solution for 'any-angle-of-rotation; would require trig or matrix maths to compute rotated values of the point, etc.

/*
 This is the drag bounds func
*/
function theDragFunc(pos) {

var thisRect = {x: this.x(), y: this.y(), width: this.width(), height: this.height()};

// copy the boundary rect into a testRect which defines the extent of the dragbounds 
// without accounting for the width and height of dragging rectangle.
// This is changed below depending on rotation.
var testRect={
  left: boundary.x, 
  top: boundary.y, 
  right: boundary.x + boundary.width,
  bottom: boundary.y + boundary.height
};


// the userRotation value is calculated in the rotation button onclick 
// to be one of 0, 90, 180, 270
switch (userRotation){

  case 0: // for 0 degrees compute as per a normal bounds rect
    testRect.right = testRect.right - thisRect.width;
    testRect.bottom = testRect.bottom - thisRect.height;
    break;

  case 90:  // for 90 degs we have to modify the test boundary left and bottom 
    testRect.left = testRect.left + thisRect.height;
    testRect.bottom = testRect.bottom - thisRect.width;
    break;

  case 180:  // for 180 degs we have to modify the test boundary left and top 
    testRect.left = testRect.left + thisRect.width;
    testRect.top = testRect.top + thisRect.height;
    break;

  case 270:  // for 270 degs we have to modify the test boundary right and top 
    testRect.right = testRect.right - thisRect.height;
    testRect.top = testRect.top + thisRect.width;
    break;

}

// get new pos as: if pos inside bounday ranges then use it, otherwise user boundary

// left edge check
var newX = (pos.x < testRect.left ? testRect.left : pos.x);

// right edge check
newX = (newX > testRect.right ? testRect.right : newX);

// top edge check
var newY = (pos.y < testRect.top ? testRect.top : pos.y);

// bottom edge check
newY = (newY > testRect.bottom ? testRect.bottom : newY);

// return the point we calculated
return {
    x: newX,
    y: newY
  }
}

// From here on is just the canvas setup etc.



// set ub the main rect - the one we drag and rotate
var target = {x: 70, y: 70, width: 70, height: 40};

// set ub the boundary rect - used in the rectfunc later
var boundary = {x: 20, y: 20, width: 460, height: 160};

// Set up the stage
var s1 = new Konva.Stage({container: 'container1', width: 500, height: 200});

// add a layer.
var layer1 = new Konva.Layer({draggable: false});
s1.add(layer1);

// show the extent of the boundary
var funcRect = new Konva.Rect({
    x:boundary.x, 
    y: boundary.y, 
    width: boundary.width, 
    height: boundary.height, 
    stroke: 'red'})
layer1.add(funcRect)

// Make some easy-to-grok values for the boundary func.
boundary.minX =  boundary.x;
boundary.maxX =  boundary.x + boundary.width;
boundary.minY =  boundary.y;
boundary.maxY =  boundary.y + boundary.height;

// show the target rect

var targetRect = new Konva.Rect({
    x:target.x, 
    y: target.y, 
    width: target.width, 
    height: target.height, 
    stroke: 'green',
    draggable: true,
    
    // Apply a linear graient fill to give a sense of rotation.
    fillLinearGradientStartPoint: { x : -50, y : -50},
    fillLinearGradientEndPoint: { x : 50, y : 50},
    fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
            
    dragBoundFunc: theDragFunc  // the function is at the bottom top of the code
        
    })
layer1.add(targetRect)

// Draw the stage
s1.draw();

var userRotation = 0;
$('#btnRotate').on('click', function(e){

  targetRect.rotate(90)
  s1.draw();
  
  var rectRotation = targetRect.rotation();

  // user can rotate > 360 so we will nomalise the rotation down to range 0 - 270
  userRotation = (rectRotation / 90);
  userRotation = (userRotation  % 4) * 90;

  $('#info').html("Rect rotation " + rectRotation + " same as " + userRotation);

})

p
{
  padding: 4px;
  
}
#container1
{
  display: inline-block;
  width: 500px; 
  height: 200px; 
  background-color: silver;
  overflow: hidden; 
}
#pallette
{
 height: 52px; width: 500px; 
 border: 1px solid #666;
  margin-bottom: 10px;
  z-index: 10;
}
.draggable
{
  width:50px;
  height: 50px;
  display: inline-block;
  border: 1px solid #666;
}

<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.5/konva.min.js"></script>
<p>Drag bounds function on rotated rect. Red rectangle is the extent of the bounds function. Drag the rect to the boundary and notice it is captured. Now click to rotate by 90%. A simple rect-based dragFunc would fail because the origin of the rect is not top-right. The solution function solves this.
</p>
<p>
<button id='btnRotate'>Rotate by +90 degrees</button> <span id='info'>0</span> degrees.
</p>
<div id='container1'></div>