Snap.svg 拖动路径元素

Question

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

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

之前的代码不适用于路径元素，但它适用于圆。

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

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

Snap.svg 拖动路径元素

Snap.svg draggin Path Element

javascript

svg

snap.svg