Javascript 向Raphael JS Graffle连接添加自定义移除方法

我使用的是示例中添加的自定义连接方法（Raphael.fn.connection）：raphaeljs.com/graffle.html

我的示例如下：（在显示窗口中滚动以查看效果）

本质上，我已经将格拉夫勒连接与气泡相连接，因此它在缩放时保持不变。我希望当用户滚动经过某个点时，我可以将连接开关切换到下一个气泡

为此，我想删除连接并添加另一个连接，但由于连接方法不是本地Raphael元素，它没有内置的remove方法，因此在将remove方法添加到原型中时遇到了问题

我在这里找到了一些关于添加自定义方法的信息 我试过：

this.connections[0]=this.r.connection（this.bubbles[0]，this.unitConnector，“#fff”，“#fff”）

.proto.

remove=function（）{alert（'working custom method'）；}

---

这似乎给这个连接实例添加了一个方法，但我不确定该方法做什么，似乎应该有更好的方法。

重述一下。。。创建连接时，我们通常使用以下方法：

connections.push(
    r.connection(r.getById(firstObjectId), r.getById(secondObjectId), '#fff')
);

我们在这里做的是根据

Raphael

对象id将

Raphael.connections

对象推（添加）到

connections[]

数组中

要向拉斐尔添加方法/函数，可以使用：

Raphael.fn.fnName = function (){ /* Your code here */ }

这将在

Raphael

命名空间中创建一个函数，用于

Raphael

对象

下面是我创建的代码，它完全符合您的要求。我找不到拉斐尔的好资源，但肯定会很快创建一个，因为我已经用它做了很多开发

Raphael.fn.removeConnection = function (firstObjectId, secondObjectId) {
    for (var i = 0; i < connections.length; i++) {
        if (connections[i].from.id == firstObjectId) {
            if (connections[i].to.id == secondObjectId) {
                connections[i].line.remove();
                connections.splice(i, 1);
            }
        }
        else if (connections[i].from.id == secondObjectId) {
            if (connections[i].to.id == firstObjectId) {
                connections[i].line.remove();
                connections.splice(i, 1);
            }
        }
    }
};

Raphael.fn.removeConnection=函数（firstObjectId，secondObjectId）{
对于（变量i=0；i

与创建连接一样，提供了两个id。我们必须在我们将每个连接集推送到的连接数组中找到这些ID。如果您只有一个连接，则不需要遍历数组，尽管这种情况很少遇到

我们这里有两种可能的情况——为了简单起见，没有找到连接的情况除外。它要么发现：

连接对象

from.id

对应于第一个提供的参数

firstObjectId

。然后，

to

对应于提供的第二个参数

secondObjectId

连接对象

from.id

对应于提供的第一个参数

secondObjectId

。然后，

to

对应于提供的第二个参数

firstObjectId

这种检查方法覆盖了我们的所有基础，因此无论连接是如何交互的（在我的例子中，用户单击两个对象来连接它们，并删除它们的连接）

一旦确认有两个正确的对象，我们就可以使用

connections[i].line.remove（）从DOM中删除该行

因为只要从数组中删除连接对象，它就会留在映射中

最后，我们从数组中删除指定的连接对象，而拼接方法使用

connections.splice（i，1）为我们留下一个不神圣的数组（数组中没有孔，即；）

然后，回顾一下。。。创建连接时，我们通常使用以下方法：

connections.push(
    r.connection(r.getById(firstObjectId), r.getById(secondObjectId), '#fff')
);

我们在这里做的是根据
Raphael
对象id将
Raphael.connections
对象推（添加）到
connections[]
数组中

要向拉斐尔添加方法/函数，可以使用：

Raphael.fn.fnName = function (){ /* Your code here */ }

这将在
Raphael
命名空间中创建一个函数，用于
Raphael
对象

下面是我创建的代码，它完全符合您的要求。我找不到拉斐尔的好资源，但肯定会很快创建一个，因为我已经用它做了很多开发

Raphael.fn.removeConnection = function (firstObjectId, secondObjectId) {
    for (var i = 0; i < connections.length; i++) {
        if (connections[i].from.id == firstObjectId) {
            if (connections[i].to.id == secondObjectId) {
                connections[i].line.remove();
                connections.splice(i, 1);
            }
        }
        else if (connections[i].from.id == secondObjectId) {
            if (connections[i].to.id == firstObjectId) {
                connections[i].line.remove();
                connections.splice(i, 1);
            }
        }
    }
};

Raphael.fn.removeConnection=函数（firstObjectId，secondObjectId）{
对于（变量i=0；i

与创建连接一样，提供了两个id。我们必须在我们将每个连接集推送到的连接数组中找到这些ID。如果您只有一个连接，则不需要遍历数组，尽管这种情况很少遇到

我们这里有两种可能的情况——为了简单起见，没有找到连接的情况除外。它要么发现：

连接对象
from.id
对应于第一个提供的参数
firstObjectId
。然后，
to
对应于提供的第二个参数
secondObjectId
连接对象
from.id
对应于提供的第一个参数
secondObjectId
。然后，
至
对应于