javascript - raphaeljs 克隆和拖动

Question

我有许多用作可拖动按钮的圆圈，我可以为这些圆圈分配拖动事件并且它工作正常，但我想克隆并拖动它们，所以我最终有多个按钮(多达需要)。如何克隆然后拖动克隆的对象？

这是我的

var a = r.circle(20, 50, 15)
// drag handler
        var start = function(x,y,event) {
            this.ox = this.attr("cx");
            this.oy = this.attr("cy");
            this.animate({r: 20, opacity: .25}, 500, ">");
        },
        move = function(dx, dy) {
            this.attr({cx: this.ox + dx, cy: this.oy + dy});
        },
        up = function () {
            this.animate({r: 15, opacity: .5}, 500, ">");
        };
a.drag(move, start, up);

我已经尝试过各种方法，克隆“a”，在开始时克隆“this”，但我的 js 知识有限，所以任何帮助将不胜感激。

谢谢!

Answer 1

尝试使用对象。

我创建了一个对象来封装 Raphael 对象和要在其上使用的拖动函数。

function Button(ix,iy,ir)
{
// grab a reference to the objects "this"
var that = this;
that.a = r.circle(ix, iy, ir).attr({"fill":"red"})
// drag handler
    that.start = function(x,y,event) {
        that.a.ox = this.attr("cx");
        that.a.oy = this.attr("cy");
        that.a.animate({r: 20, opacity: .25}, 500, ">");
    }
   that.move = function(dx, dy) {
        that.a.attr({cx: that.a.ox + dx, cy: that.a.oy + dy});
    }
   that.up = function () {
        that.a.animate({r: 15, opacity: .5}, 500, ">");
    };
that.a.drag(that.move,that.start,that.up);
return that;
}

这里重要的是在变量中捕获“this”引用，并使用该变量在您的拖动函数中引用它。

这样做的原因是当拖动调用“移动”、“开始”和“向上”时，this 对象不会引用您的对象。 “这个”经常变化。通过使用“that”，您锁定了要在这些方法中使用的对象。

Here's对“that = this”的更好解释。 (一定要给 lonesomeday 投票以获得很好的解释)

这是一个 fiddle这会创建两个您可以独立拖动的按钮。

希望对你有帮助