0

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

我从这个开始：

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

然后我创建了以下函数作为拖动事件处理程序；我只需要拖动结束事件，所以我将另外两个事件处理程序设为空：

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 ，似乎没有关于如何创建工作拖动事件的解释。

怎么会有人知道这些知识？！

4

1 回答 1

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 ...

于 2013-12-26T17:29:49.810 回答