Snap.svg 拖动路径元素

Question

我正在尝试使用 Snap.SVG 拖动 Path 元素，我正在使用拖动方法

在没有参数的情况下调用方法时，它似乎可以正常工作，但是当我添加侦听器时，我无法使其正常工作，看起来无法更改位置 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)

previos 代码不适用于 path 元素，但它适用于 circle。

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

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

example