snapsvg .drag（）attr定義

我剛剛開始使用snap.svg。如果沒有參數通過，element.drag()函數提供了一組默認值，否則您必須定義您自己的onmove,onstart和onend函數。snapsvg .drag（）attr定義

onmove(dx,dx,x,y,event)的參數可用於您的實施onmove移動元素。

如果我創建了一組元素，默認g.drag()允許組移動，但我無法弄清楚爲了使組移動而在我自己的onmove中放什麼。

this.attr({cx: posx , cy: posy});適用於.circle。什麼是x，y等於.group？

2013-11-15 TwoBears

這裏是我剛剛測試了一個例子：

var s = Snap("#svg"); 

Snap.load("draw.svg", function(f) { 
g = f.select("g"); 
s.append(g); 

g.cx = 40; 
g.cy = 140; 
g.ox = 0; 
g.oy = 0; 

g.drag(dragging, startDrag, function(evt) { 
      console.log("dropped at: "+ evt.x + ", " + evt.y); 
     }); 


}); 

startDrag = function(posx, posy) { 
    this.ox = posx - this.cx; 
    this.oy = posy - this.cy; 
} 

dragging = function(dx, dy, posx, posy) { 
    this.cx = posx - this.ox; 
    this.cy = posy - this.oy; 
    t = 't' + this.cx + ',' + this.cy; 
    this.transform(t); 
}

希望這將有助於。

來源

2013-11-16 22:16:52 Gois

謝謝，這很有趣，在這裏您正在創建c對象，cy，ox，oy var對象。 snapsvp.io網站上的例子似乎已經爲cx，cy定義了圈，rects但不適用於組？只需在圓上使用this.attr（cx：100，cy：100）即可實現移動。看來，團隊必須使用您所概述的方法進行不同的處理。 – TwoBears

爲了簡化，組中應該使用轉換，如示例中所示。如果只是拖動一個圓圈就可以使用cx/cy，但假設你想做更多的事情，我會習慣使用變換和組。 – Ian

您可以對組元素使用transform方法。

dragging = function(dx, dy, posX, poxY, event){ 
    this.transform("translate("+posX+","+posY+")"); 
}

來源

2013-12-11 10:12:43

snapsvg .drag（）attr定義

回答

相關問題