Sadece snap.svg kullanarak svg içinde daire sürüklemek mümkün

Question

Snap.svg kullanmaya çalışıyorum. Bir daire, dikdörtgen ve görüntü oluşturdum. Çevreyi sürükleyebiliyorum ama başka bir şey yapamam. Neyin yanlış olduğunu anlamıyorum. Son 1 saat boyunca çekim yapmakta sorun var.

var s = Snap(400,400); 
var img_src = "http://static.jsbin.com/images/dave.min.svg"; 
var rectangle = s.rect(160, 190, 150,150); 
var bigCircle = s.circle(100, 100, 100); 
var image = s.image(img_src, 10, 10, 80, 80); 

var moveFunc = function (dx, dy, posx, posy) {  
    this.attr({ cx: posx , cy: posy }); 
}; 

bigCircle.drag(moveFunc, 
       function(){ 
        console.log("Move started"); 
       }, 
       function(){ 
        console.log("Move stopped"); 
       } 
); 

rectangle.drag(moveFunc, 
       function(){ 
        console.log("Move started"); 
       }, 
       function(){ 
        console.log("Move stopped"); 
       } 
); 

çalışma kodu kullandığım: http://jsbin.com/vanequ/edit?html,js,output

Güncelleme: Onun ben dikdörtgen ve görüntü için hareket fonksiyonunu geçemiyor zaman iş gibi görünüyor. Ancak, işlev daire içinde olduğunda çalışır. Hiçbir nedenim yok. Henüz tam snap.svg anlamıyorum, benim cehalet ile yapmak zorunda kalabilirsiniz.

Bu çalışır:

rectangle.drag(); 
image.drag(); 

Answer 1

Kişisel moveFunc kuruyor cx/cy bağlıyor. Daire elemanları cx/cy nitelikleri kullanılarak konumlandırılır, ancak rect ve görüntü öğeleri x/y öznitelikleri kullanılarak konumlandırılır. Böylece, moveFunc sadece daire elemanı için çalışacaktır. Olası bir çözüm, iki hareket işlevine sahip olmaktır: cx/cy öğesini ayarlayan daire için bir işlev ve x/y ayarlayan rect/image için bir işlev. Örneğin ...

var s = Snap(400,400); 
var img_src = "http://static.jsbin.com/images/dave.min.svg"; 
var rectangle = s.rect(160, 190, 150,150); 
var bigCircle = s.circle(100, 100, 100); 
var image = s.image(img_src, 10, 10, 80, 80); 

var moveCircleFunc = function (dx, dy, posx, posy) {  
    this.attr({ cx: posx , cy: posy }); 
}; 
var moveRectFunc = function (dx, dy, posx, posy) {  
    this.attr({ x: posx , y: posy }); 
}; 

bigCircle.drag(moveCircleFunc, 
       function(){ 
        console.log("Move started"); 
       }, 
       function(){ 
        console.log("Move stopped"); 
       } 
); 

rectangle.drag(moveRectFunc, 
       function(){ 
        console.log("Move started"); 
       }, 
       function(){ 
        console.log("Move stopped"); 
       } 
); 
image.drag(moveRectFunc, 
       function(){ 
        console.log("Move started"); 
       }, 
       function(){ 
        console.log("Move stopped"); 
       } 
);