KonvaJS: Gruppenkoordinaten in Bezug auf die Koordinaten der Kinder

Question

Ich benutze KonvaJs in meinem Projekt. Ich verwende Konva.Group, um einige Artikel wie Konva.Image, Konva.Rect zusammen zu vereinigen. Aber ich bin mit einigen Herausforderungen konfrontiert, während ich sie an einer bestimmten Position unter mousemove Event positioniere. Ich habe Konva.Group wie folgt aus:

var group = new Konva.Group({ 
     x: 0, 
     y: 0 
    }); 

Und ein Bild und Rechteck wie dieses

var border = new Konva.Rect({ 
     x: 115, 
     y: 35, 
     width: 116, 
     height: 128, 
     fill: 'grey' 
    }); 

yoda = new Konva.Image({ 
     x: 120, 
     y: 40, 
     image: imageObj, 
     width: 106, 
     height: 118 
     }); 

Hier ist die plunkr.

Nun, was ich tun möchte, ist die Gruppe an die Position verschieben, wo der Mauszeiger ist. Um dies zu tun dies ich tue:

stage.on('mousemove', function(e) { 
     var point=stage.getPointerPosition(); 
     //Don't know why this is not puttig the group childern poperly 
     //group.position(stage.getPointerPosition()); 
     yoda.position(point); 
     border.position({ 
     x: point.x-5, 
     y: point.y-5 
     }) 
     layer.batchDraw(); 
    }); 

Da hier habe ich nur zwei Element, damit ich sie eins nach dem anderen, aber wenn die Anzahl der Elemente oder Kinder in meiner Gruppe wird erhöht bewegen kann. Ich kann sie nicht alle einzeln bewegen. Ich habe versucht, die gesamte Gruppe zu verschieben, aber sie folgt nicht der Zeigerposition. Ich möchte verstehen, wie ich das Stück so platzieren kann, dass ich einfach group.position(position) mache und die Schlägerstücke dem Mauszeiger folgen. Und was ist die Beziehung zwischen den Koordinaten der Gruppe und ihren Kindern?

Answer 1

Sie haben möglicherweise unerwartetes Verhalten, weil Ihre untergeordneten Knoten innerhalb einer Gruppe verschoben werden.

Wenn Sie das Bild erstellt haben, hatte x = 120 y = 140. Wenn Sie die Gruppenposition auf (zB) x = 100 y = 100 setzen, wird das Bild in x = 210 (120 + 100) y = platziert 240 (140 + 100).

verringern Gerade Positionen von Kindern Elemente:

 yoda = new Konva.Image({ 
     x: 5, 
     y: 5, 
     image: imageObj, 
     width: 106, 
     height: 118 
     }); 

     group.add(border); 
     group.add(yoda); 

http://plnkr.co/edit/TkTGAw0eGHF5flbVYLuQ?p=preview