snap.svg - snapsvg .drag() 属性定义

Question

我只是从 snap.svg 开始。如果没有传递参数，该element.drag()函数提供一组默认值，否则您必须定义自己的onmove,onstart和onend函数。

的参数onmove(dx,dx,x,y,event)可以在您的实现中onmove用于移动元素。

如果我创建一组元素，默认情况下g.drag()允许组移动，但我无法弄清楚我自己要放入什么来onmove使组移动。

this.attr({cx: posx , cy: posy});适用于.circle. 什么是等价的x，y对于一个.group？

Answer 1

您可以对组元素使用变换方法。

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

Answer 2

这是我刚刚测试的一个示例：

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

希望它会有所帮助。