Question

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

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

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

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

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

this.connections [0] = this.r.connection（this.bubbles [0]，this.unitConnector，“＃iff”，“＃iff”）.__proto__. remove = function（）{alert（ 'work custom method'）;};

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

Answer 1

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

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

我们在这里做的是根据Raphael.connections对象ID

将connections[]对象推送（添加）到Raphael数组中

要向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。如果您只有一个连接，则不需要进行数组遍历，但这种情况不太常见。

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

连接对象from.id对应于第一个提供的参数firstObjectId。然后，to对应于第二个提供的参数secondObjectId。
连接对象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方法遇到了我的情况问题，好像对象有多个对象的多个连接（to，from），每次我使用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;
}

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

3 个答案: