Konvajs Layer-Positionen nicht wie erwartet eingestellt

Question

Ich habe eine App, wo ich mehrere Ebenen schwenken und zoomen.

Wenn ich jedoch die Position der Ebenen festlegen, werden sie auf die falschen Werte aktualisiert.

Zum Beispiel nach dem Aufruf:

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

würde ich erwarten,

layer.getClientRect(); 

{ 
    x: 12, 
    y: 233, 
} 

Statt zurückzuversetzen

kehrt

{ 
    x: -22, 
    y: 220, 
} 

Gibt es einen bekannten Grund dafür?

Answer 1

ich merkte, ich nicht berücksichtigt alle Verrechnungen wurde. Die x-Position eines Kreises wird von der Mitte aus eingestellt, während getClientRect() die Breite und Höhe einschließlich der Negative zurückgibt. So wird getClientRect() auf einem Kreis mit einem Radius von 50 und x von 0 tatsächlich zurückgeben {x: -25, y: -25, Breite: 50, Höhe: 50}.

Answer 2

Scheint, für mich zu arbeiten, wie in diesem Kürzungstest beworben. Hast du die Bühne bewegt oder so?

In dem Ausschnitt unten zeichne ich eine Ebene mit 4 'Ecken' rects, zeige den Wert von grtClientRect() in 'Ebene pos # 1' an, was (0, 0) ergibt, dann verschiebe die Stufe auf 12, 233 und zeige den Wert von grtClientRect() in 'Layer pos # 2' an, was (12, 233) anzeigt. Ich schiebe die Ebene wieder auf (12, 23), nur zum Spaß danach.

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>