Konvajsレイヤの位置が期待どおりに設定されていない

Question

私は複数のレイヤーをパンしたりズームしたりするアプリケーションを持っています。

しかし、レイヤーの位置を設定すると、レイヤーが間違った値に更新されています。

例えば

、呼び出した後：代わりに、それは返し

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

私は

layer.getClientRect(); 

が

{ 
    x: 12, 
    y: 233, 
} 

を返すことを期待する

{ 
    x: -22, 
    y: 220, 
} 

これは知られている理由はありますか？

Answer 1

私は、アカウントにすべてのオフセットを取っていませんでした実現。円のx位置は中心から設定され、getClientRect()はネガを含む幅と高さを返します。したがって、半径が50でxの値が0の円にあるgetClientRect()は、実際には{x：-25、y：-25、幅：50、高さ：50}を返します。

Answer 2

このカットテストで広告されたように私はうまくいくようです。ステージや何かを動かしましたか？

下のスニペットでは、四角形の四角形でレイヤーを描画し、grtClientRect（）からの値を（0、0）を与える 'レイヤーポジション＃1'に表示し、ステージを12と233に移動します。 grlClientRect（）の値を（12,233）を示す 'Layer pos＃2'に表示します。その後、レイヤーを（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>