Uzyskaj współrzędne grupy svg przy przeciąganiu z snap.svg

Question

Jestem zupełnie nowy dla svg i pomyślałem, że wypróbuję snap svg. Mam grupę kół, które przeciągam i szukam współrzędnych grupy. Używam getBBox(), aby to zrobić, ale nie działa tak, jak bym się spodziewał. Spodziewam się, że getBBox() zaktualizuje swoje współrzędne X i Y, ale nie wydaje się, aby to zrobić. Wydaje się to proste, ale myślę, że czegoś brakuje. Oto kod

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

jsfiddle jest http://jsfiddle.net/STpGe/2/

Co mi brakuje? Jak uzyskać współrzędne grupy? Dzięki.

Answer 1

Za SVG specification, getBBox otrzymuje obwiednię po zastosowaniu transformacji, więc w układzie współrzędnych ustalonym przez atrybut transformacji pozycja jest taka sama.

Wyobraź sobie, jakbyś narysował kształt na papierze milimetrowym Ustawienie transformacji przesuwa cały papier milimetrowy, ale gdy patrzysz na pozycję kształtu na papierze milimetrowym, to się nie zmieniło, to papier wykresowy jest przesunięty, ale jesteś nie mierzenie tego.

Answer 2

Jak twierdzi Robert, to się nie zmieni. Jednak getBoundingClientRect może pomóc.

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

Jsfiddle tutaj pokazuje różnicę http://jsfiddle.net/STpGe/3/.

Edit: Właściwie chciałbym mieć pokusę, aby przejść tutaj po pierwsze, uważam, że ten bardzo przydatny Get bounding box of element accounting for its transform

Answer 3

Spróbuj użyć obiektu group.matrix uzyskać współrzędne X i Y obiektu grupowego.

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