Question

我开始使用snap.svg，并陷入一个可能很简单的问题。我绘制一个圆圈，并希望让用户将其拖动，当用户停止拖动时，我想知道该圆圈的最终位置。

我从这开始：

var s = Snap("#svg");
var d = s.circle(20,20,5);

然后我创建了以下函数作为拖动事件处理程序;我只需要拖尾事件，所以我让其他两个事件处理程序为null：

var endFnc = function(e) { 
    alert("end: "+e.layerX+","+e.layerY); 
}

var startFnc = null;

var moveFnc = null;

然后我安装了拖动事件处理程序：

d.drag（moveFnc，startFnc，endFnc）;

每当我试图拖动一个圆圈时，就会触发结束事件，但是，圆圈没有移动。

所以我想也许我还要创建拖动移动事件（虽然我不需要它）：

var moveFnc = function(dx, dy, x, y) {
  this.transform('t' + x + ',' + y);
}

现在圆圈确实移动了，但是，不是完全在鼠标上，而是在右下角大约20个像素。

我在这里阅读了文档：http://snapsvg.io/docs并且似乎没有关于如何创建工作拖动事件的解释。

如何获得这些知识？！

Answer 1

在使用snap.js挣扎了几个小时后，我终于发现了svg.js及其可拖动的插件，它更容易使用它：

var draw = SVG('svg');
var circle = draw.circle(10).attr({cx:30,cy:30,fill:'#f06'});
circle.dragend = function(delta, event) {
    alert(this.attr('cx'))
}
circle.draggable();

所以，我切换到svg.js ......

拖动一个圆圈

1 个答案: