javascript - 将自定义删除方法添加到 Raphael JS Graffle Connection

Question

我正在使用示例中添加的自定义连接方法 (Raphael.fn.connection):raphaeljs.com/graffle.html

我的例子在这里:http://jsfiddle.net/WwT2L/ (在显示窗口中滚动查看效果)

基本上，我已将 graffle 连接与气泡相关联，因此它会在缩放时保持不变。我希望当用户滚动到某个点时，我可以将连接切换到下一个气泡。

要做到这一点，我想我会删除连接并添加另一个，但由于连接方法不是原生 Raphael 元素，它没有内置的 remove 方法，我在添加时遇到了问题原型(prototype)的 remove 方法。

我在这个 google group discussion 找到了一些关于添加自定义方法的信息我试过了:

this.connections[0] = this.r.connection(this.bubbles[0], this.unitConnector, "#fff", "#fff").__proto__.移除=函数() {alert('工作自定义方法');};

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

Answer 1

回顾一下...当我们创建连接时，我们经常使用以下内容:

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

我们在这里所做的是将一个 Raphael.connections 对象推送(添加)到一个 connections[] 数组中，基于它们的 Raphael 对象 ID 的

要向 Raphael 添加方法/函数，可以使用:

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

这会在我们的 Raphael 命名空间中创建一个函数，用于我们的 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);
            }
        }
    }
};

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

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

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

这种检查方法涵盖了我们所有的基础，所以无论连接是如何交互的(在我的例子中，用户点击两个对象来连接它们，然后删除它们的连接)

一旦我们确认我们有两个正确的对象，我们就从 DOM 中删除该行，使用 connections[i].line.remove(); 只是从中删除连接对象阵列会将其留在 map 上。

最后，我们使用 connections.splice(i, 1) 从数组中移除指定的连接对象，并且 splice 方法给我们留下了一个非圣洁的数组(我们的数组中没有空洞，即 ;) ) );

然后，