Holen Sie sich die Koordinaten der SVG-Gruppe auf ziehen mit snap.svg

Question

Ich bin brandneu auf Svg und dachte, ich würde Snap Svg ausprobieren. Ich habe eine Gruppe von Kreisen, die ich herumschleppe, und suche nach den Koordinaten der Gruppe. Ich verwende getBBox(), um dies zu tun, aber es funktioniert nicht so, wie ich es erwarten würde. Ich würde erwarten, dass getBBox() seine X- und Y-Koordinaten aktualisiert, aber das scheint das nicht zu tun. Es scheint einfach, aber ich denke, ich vermisse etwas. Hier ist der Code

var lx = 0, 
    ly = 0, 
    ox = 0, 
    oy = 0; 
    moveFnc = function(dx, dy, x, y) { 
     var thisBox = this.getBBox(); 
     console.log(thisBox.x, thisBox.y, thisBox); 
     lx = dx + ox; 
     ly = dy + oy; 
     this.transform('t' + lx + ',' + ly); 
    } 
    startFnc = function(x, y, e) { } 
    endFnc = function() { 
     ox = lx; 
     oy = ly; 
     console.log(this.getBBox()); 
    }; 

var s = Snap("#svg"); 
var tgroup = s.group(); 
tgroup.add(s.circle(100, 150, 70), s.circle(200, 150, 70)); 
tgroup.drag(moveFnc, startFnc, endFnc); 

Die jsfiddle bei http://jsfiddle.net/STpGe/2/ ist

Was bin ich? Wie bekomme ich die Koordinaten der Gruppe? Vielen Dank.

Answer 1

Für die SVG specification erhält getBBox die Bounding-Box, nachdem Transformationen angewendet wurden, so dass im Koordinatensystem, das durch das transform-Attribut festgelegt wurde, die Position gleich ist.

Stellen Sie sich vor, Sie hätten die Form auf Millimeterpapier gezeichnet. Eine Transformation verschiebt das gesamte Millimeterpapier, aber wenn Sie die Position der Form auf dem Millimeterpapier betrachten, hat sich nichts geändert, es ist das Millimeterpapier, das verschoben wurde das nicht messen.

Answer 2

Wie Robert sagt, es wird sich nicht ändern. Allerdings kann getBoundingClientRect helfen.

this.node.getBoundingClientRect(); //from Raphael 

Jfiddle hier zeigt den Unterschied http://jsfiddle.net/STpGe/3/.

Edit: Eigentlich würde ich hier versucht sein, zuerst zu gehen, fand ich diese sehr nützlich Get bounding box of element accounting for its transform

Answer 3

Versuchen Sie, das group.matrix Objekt verwenden x zu bekommen und y von Gruppenobjekt koordinieren.

moveFnc = function(dx, dy, x, y, event) { 
    lx = this.matrix.e; 
    ly = this.matrix.f; 
    this.transform('translate(' + lx + ',' + ly+')'); 
}