raphaeljs 克隆并拖动答案

【问题标题】：raphaeljs clone and dragraphaeljs 克隆并拖动
【发布时间】：2011-10-20 16:51:50
【问题描述】：

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

这就是我所拥有的

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 知识有限，因此不胜感激。

谢谢！

【问题讨论】：

标签： javascript raphael

【解决方案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”引用，并使用该变量在您的拖动函数中引用它。

这样做的原因是当拖动调用“move”、“start”和“up”时，this 对象不会引用您的对象。 “这”经常变化。通过使用“that”，您可以锁定要在这些方法中使用的对象。

Here's 更好地解释了“that = this”。（请务必为 lonesomeday 投票以获得出色的解释）

这是一个fiddle，它创建了两个可以独立拖动的按钮。

希望有帮助

【讨论】：

谢谢，但拖动不是问题，我如何克隆按钮然后拖动克隆？
我一定错过了你的观点。你想拖动按钮，然后克隆它，然后能够拖动两个按钮吗？我已经更新了 fiddle 来做到这一点。
谢谢你，也许我的描述不太符合标准，但我想要的是在开始时有几个按钮。只要您单击按钮并拖动它，它就会创建一个新按钮，该按钮将被拖动而将原始按钮留在原处并保持原样。实际上，经过多次试验和错误，我找到了一个使用 mousemove 的不同解决方案（在我下面的答案中），但我认为你使用克隆按钮的方法也可以工作。再次感谢

【解决方案2】：

我自己的解决方案使用mousemove，见我的jsfiddle

它在移动开始时克隆，mousedown，mouseup，单击不起作用，但这确实

a.mousemove(clone_handler);
var clone_handler = function() {
var x = this.clone();
x.drag(move, start, up);

【讨论】：

【解决方案3】：

不确定 Raphael 是否具有通用节点的克隆功能，但可以通过执行类似操作手动完成克隆圆

var circle = r.circle(x, y, r);
var clone = r.circle(circle.cx, circle.cy, circle.r);
clone.attr({ attr1: circle.attr1, ...);

编辑：您可以简单地调用 circle.clone() 而不是执行上述操作 (Element.clone)

至于拖动时的克隆，它可能并不简单，因为一旦开始拖动，我想您无法更改被拖动的对象。您的选择可能是：

开始拖动时克隆圆圈，拖动原始项目并将副本保留在其原始位置（如果您将事件处理程序附加到原始项目，这是一个坏主意）
按上述操作，但拖动结束后切换原稿和副本位置（可能会产生闪烁）
找到一种以编程方式取消拖动原始项目并触发拖动其副本的方法，同时注意不要发展成无限递归

【讨论】：