向 Raphael JS Graffle Connection 添加自定义删除方法

Question

我正在使用在以下位置找到的示例中添加的自定义连接方法（Raphael.fn.connection）：raphaeljs.com/graffle.html

我的示例在这里：http://jsfiddle.net/WwT2L/（在显示窗口中滚动以查看效果）

本质上，我已将 graffle 连接链接到气泡，以便它保持原样秤。我希望当用户滚动经过某个点时可以将连接切换到下一个气泡。

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

我在此 Google 网上论坛讨论中找到了一些有关添加自定义方法的信息 我尝试过：

this.connections[0] = this.r.connection(this.bubbles[0], this.unitConnector, "#fff", "#fff").__proto__. remove = function() {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。

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

一旦我们确认我们拥有两个正确的对象，我们就可以使用 connections[i].line.remove(); 从 DOM 中删除线路，因为只需从数组中删除连接对象就会将其保留在地图上。

最后，我们从数组中删除指定的连接对象，并且 splice 方法使用 connections.splice(i, 1);< 给我们留下一个非神圣的数组（我们的数组中没有洞，即 ;) ） /代码>

然后，

Answer 2

这就是我用来从与 graffle 示例一起使用的连接数组中删除连接的方法，到目前为止我没有遇到任何问题。这个问题可能很老，但我偶然发现它搜索相关的解决方案，所以当我运气不好时，我创建了我的问题并想与世界其他人分享。

    //checks if the current object has any relation with any other object
    //then remove all the to and from connections related to current object             
            for(var i =0 ; i<connections.length; i++){
                if(connections[i].from.id == objectId || connections[i].to.id ==objectId ){
                     connections[i].line.remove();

                }
            }

    //finds out which connections to remove from array and updates connections array
            connections = $.grep(connections, function(el){
                return el.line.paper != null;
            })

splice 方法在我的情况下存在问题，就好像对象与多个对象有多个连接（到、自），每次我使用 splice 时，主连接数组长度都在变化，并且 i 的值也在增加，所以我使用 jQuery grep 方法根据删除的行更新数组。我希望这对其他人也有帮助。

Answer 3

function removeShape(shape) {
    //CONNECTIONS is my global structure.

    var connections = [];

    while (CONNECTIONS.length) {
        var connection = CONNECTIONS.pop();

        if (connection.from.id == shape.id || connection.to.id == shape.id)
            connection.line.remove();
        else
            connections.push(connection);
    }

    shape.remove();

    CONNECTIONS = connections;
}