snapsvg .drag() 属性定义答案

【问题标题】：snapsvg .drag() attr definitionssnapsvg .drag() 属性定义
【发布时间】：2013-11-15 16:58:01
【问题描述】：

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

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

如果我创建一组元素，默认的g.drag() 允许组移动，但我不知道在我自己的onmove 中放入什么来使组移动。

this.attr({cx: posx , cy: posy}); 适用于.circle。 .group 对应的 x,y 是什么？

【问题讨论】：

标签： snap.svg

【解决方案1】：

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

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

希望它会有所帮助。

【讨论】：

谢谢，这很有趣，在这里您正在 g 对象上创建 cx,cy,ox,oy var。 snapsvp.io 网站上的示例似乎已经为圆圈、矩形定义了 cx,cy，但没有为组定义？只需在圆上使用 this.attr(cx: 100, cy:100) 即可实现移动。似乎必须使用您概述的方法对组进行不同的处理。
为了简单起见，组应该使用转换，如示例中所示。如果只是拖动一个圆圈，使用 cx/cy 很好，但假设你想做更多，我会习惯使用变换和组。

【解决方案2】：

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

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

【讨论】：