Snap.svg拖曳路径元素

Question

我试图用Snap.SVG拖动路径元素，我使用的是拖动方法

当方法不带parmeteres时，它似乎工作正常，但是当我添加侦听器时，我无法使它工作，它看起来不可能更改为位置x，y属性。

start = () ->
    console.log("Stop move, ox=" + this.ox + ", oy=" + this.oy);


moveFunc =  (dx, dy, posx, posy) ->
    this.attr( { cx: posx , cy: posy } )


stop = () ->
    console.log("Stop move, ox=" + this.ox + ", oy=" + this.oy);

p.drag( moveFunc, start, stop)

以前的代码不适用于path元素，但它适用于圆形。

下一段代码可以移动它，但是当再次拖动它时，可以将最后一个位置松开。

moveFunc =  (dx, dy, posx, posy) ->
        this.transform( "translate("+dx+", "+dy+")")

因此，猜测，最后一种方法可以翻译它，但它并没有真正改变位置。

Answer 1

要移动路径，您将需要转换它，尝试这种格式。

this.transform('t' + dx + ',' + dy );

然而，正如前面提到的，它不会保持最后的位置。为此，您需要将转换存储在鼠标下.

var move = function(dx,dy) {
        this.attr({
                    transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]
                });
}

var start = function() {
        this.data('origTransform', this.transform().local );
}

示例