Konvajs 图层位置未按预期设置

Question

我有一个可以平移和缩放多个图层的应用程序。

但是，当我设置图层的位置时，它们被更新为错误的值。

例如调用后：

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

我希望

layer.getClientRect();

到return

{
  x: 12,
  y: 233,
}

取而代之 returns

{
  x: -22,
  y: 220,
}

发生这种情况是否有任何已知原因？

Answer 1

似乎对我有用，就像在这个缩减测试中宣传的那样。你搬过舞台还是什么？

在下面的代码片段中，我绘制了一个具有 4 个 'corner' 矩形的图层，在 'Layer pos #1' 中显示来自 grtClientRect() 的值，它给出 (0, 0)，然后将舞台移动到 12， 233 并在显示 (12, 233) 的 'Layer pos #2' 中显示来自 grtClientRect() 的值。我将图层移回 (12, 23) 只是为了好玩。

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>

Answer 2

我意识到我没有考虑所有的偏移量。圆的 x 位置从中心开始设置，而 getClientRect() returns 宽度和高度包括底片。所以 getClientRect() 在半径为 50 且 x 为 0 的圆上实际上 return {x: -25, y: -25, width: 50, height: 50}.

Konvajs 图层位置未按预期设置

Konvajs layer positions not being set as expected

konvajs