CODEWITHSUNDEEP
konvajs
Chris
Chris

Reputation: 21

Konvajs layer positions not being set as expected

I have an app where I am panning and zooming multiple layers.

However, when I set the position of the layers they are being updated to the wrong values.

For instance, after calling:

layer.position({
    x: 12,
    y: 233,
});

I would expect

layer.getClientRect();

to return

{
  x: 12,
  y: 233,
}

Instead it returns

{
  x: -22,
  y: 220,
}

Is there any known reason this is happening?

Upvotes: 0

Views: 1215

Answers (2)

Chris
Chris

Reputation: 21

I realised I wasn't taking into account all the offsets. The x position of a circle is set from the centre while getClientRect() returns the width and height including negatives. So getClientRect() on a circle with a radius of 50 and x of 0 will actually return {x: -25, y: -25, width: 50, height: 50}.

Upvotes: 2

Vanquished Wombat
Vanquished Wombat

Reputation: 9545

Seems to work for me as advertised in this cut down test. Did you move the stage or something ?

In the snippet below I draw a layer with 4 'corner' rects, display its value from grtClientRect() in 'Layer pos #1' which gives (0, 0), then move the stage to 12, 233 and display its value from grtClientRect() in 'Layer pos #2' which shows (12, 233). I move the layer back up to (12, 23) just for fun thereafter.

var stage = new Konva.Stage({
      container: 'container',
      width: 1600,
      height: 400
    });

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

// add 4 corner rects - code I happened to have to hand
var rectCorner = [];
for (i=0;i<4;i=i+1){
  rectCorner[i] = new Konva.Rect({
        x: 0,
        y: 0,
        width: 50,
        height: 50,
        fill: 'red',
        opacity: 0.5,
        strokeWidth: 0})
    layer.add(rectCorner[i]);  
}

// put the rects in the corners to give a known layer space
rectCorner[1].position({x:500, y: 0});
rectCorner[2].position({x:500, y: 150});
rectCorner[3].position({x:0, y: 150});
layer.draw();

// get the client rect now
var p = layer.getClientRect();
$('#info1').html('Layer pos #1=' + p.x + ', ' + p.y);

// move the layer...
layer.position({
    x: 12,
    y: 233,
});

// get the client rect now
var p = layer.getClientRect();
$('#info2').html('Layer pos #2=' + p.x + ', ' + p.y);

// move the layer back to the top...
layer.position({
    x: 12,
    y: 23,
});

stage.draw();
p
{
  padding: 4px;
  
}
#container
{
  background-color: silver;
  overflow: hidden; 
}
<div id='info1'></div>
<div id='info2'></div>

  <div id="container"></div>
            
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>
    <script type="text/javascript" src="test.js"></script>

Upvotes: 1

Related Questions