Raphaeljs的克隆和拖动

raphaeljs clone and drag

本文关键字：拖动 Raphaeljs      更新时间：2023-09-26

我有一些圆圈，我使用作为可拖动按钮，我可以分配拖动事件给这些，它的工作正常，但我想克隆和拖动它们，所以我最终有多个按钮(尽可能多的需要)。我如何克隆，然后拖动克隆对象?

这是我的

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知识是有限的，所以任何帮助将不胜感激。

谢谢!

尝试使用对象

我创建了一个对象来封装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"answers"up"时，这个对象不会引用你的对象。"这个"经常变化。通过使用"that"，你锁定了要在这些方法中使用的对象。

这里有一个更好的解释"that = this"。(有一天一定要为lonesesone投票，以获得一个很好的解释)

这是一个小提琴，创建两个按钮，你可以独立拖动。

希望有帮助

我自己的解决方案使用鼠标移动，参见我的jsfiddle

它克隆了移动start, mousedown, mouseup, click不起作用，但是

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

不确定Raphael是否有克隆一般节点的功能，但是克隆一个圆可以通过以下操作手动完成:

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

Edit: parent您可以简单地调用circle.clone()而不是执行上面的操作(Element.clone)

至于拖拽时的克隆，它可能不太容易做到，因为一旦拖拽开始，我想你就不能改变被拖拽的对象。这里的选项可以是:

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