Question

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

当没有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)

previos代码不适用于路径元素，但它适用于圆圈。

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

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 draggin路径元素

1 个答案: