Question

我有一个应用程序，我正在平移和缩放多个图层。

但是，当我将图层的位置设置为错误的值时。

例如，在致电：

之后

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

我希望

layer.getClientRect();

返回

{
  x: 12,
  y: 233,
}

而是返回

{
  x: -22,
  y: 220,
}

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

Answer 1

似乎在这个减少测试中宣传的对我有用。你搬家了吗？

在下面的代码片段中，我绘制了一个带有4＆＃39;角落的图层。 rects，显示其值来自grtClientRect（）在＆＃39; Layer pos＃1＆＃39;给出（0,0），然后将阶段移动到12,233，并在＆＃39;层pos＃2＆＃39;中的grtClientRect（）中显示其值。显示（12,233）。我将图层移回（12,23）只是为了好玩。

＆＃13;

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

＆＃13;

p
{
  padding: 4px;
  
}
#container
{
  background-color: silver;
  overflow: hidden; 
}

＆＃13;

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

＆＃13;

Answer 2

我意识到我没有考虑所有的补偿。圆的x位置从中心设置，而getClientRect()返回宽度和高度，包括负数。因此，半径为50且x为0的圆上的getClientRect()实际上将返回{x：-25，y：-25，width：50，height：50}。

Konvajs图层位置未按预期设置

2 个答案: