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

发布于 2024-10-31 09:38:53 字数 724 浏览 6 评论 0原文

我正在使用在以下位置找到的示例中添加的自定义连接方法(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('工作自定义方法');};

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

I'm using the custom connection method (Raphael.fn.connection) added in the example found at: raphaeljs.com/graffle.html

My example is here: http://jsfiddle.net/WwT2L/ (scroll in the display window to see the effect)

Essentially, I've linked the graffle connection to the bubble so it stays with it as it scales. I'm hoping that I can have the connection switch to the next bubble as the user scrolls past a certain point.

To do this, I was thinking I would remove the connection and add another one, but as the connection method is not a native Raphael element, it doesn't have the built in remove method, and I'm having trouble adding the remove method to the prototype.

I've found some info about adding custom methods at this google group discussion
and I've tried:

this.connections[0] = this.r.connection(this.bubbles[0], this.unitConnector, "#fff", "#fff").__proto__.remove = function() {alert('working custom method');};

which seems to add a method to this instance of connection but I'm not sure what to have the method do and it seems like there should be a better way.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

朕就是辣么酷 2024-11-07 09:38:53

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

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);< 给我们留下一个非神圣的数组(我们的数组中没有洞,即 ;) ) /代码>

然后,

To recap... when we create a connection, we often use the following:

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

What we're doing here is pushing (adding) a Raphael.connections object into a connections[] array, based on their Raphael object id's

To add a method/function to Raphael, one might use:

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

This creates a function in our Raphael namespace for use with our Raphael objects.

Below is the code i've created which does exactly what you require. I couldn't find a good resource out there for Raphael, but will surely be creating one soon, as I have done a lot of development with it.

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);
            }
        }
    }
};

Just like in the create connections, two id's are provided. We must find these ID's in the array of connections we've pushed each connection set to. If you only have one connection, there is no need for array traversing, though this is a case less encountered.

We have two possible scenarios here - excluding the case of having found no connection for simplicity sake. It either finds that:

  1. the connection objects from.id corresponds to the first provided paramenter firstObjectId. Then, the to corresponds to the second provided paramenter secondObjectId.
  2. the connection objects from.id corresponds to the first provided paramenter secondObjectId. Then, the to corresponds to the second provided paramenter firstObjectId.

This method of checking covers all our bases, so no matter how the connection is interacted with (in my case the user clicks two objects to connect them, and delete their connection)

Once we've confirmed we have the two correct objects, we then remove the line from the DOM, using connections[i].line.remove(); as just removing the connection object from the array will leave it on the map.

Finally, we remove the specified connection object from the array, and the splice method leave us with an un-holy array (no holes in our array, that is ;) ) using connections.splice(i, 1);

Then,

念三年u 2024-11-07 09:38:53

这就是我用来从与 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 方法根据删除的行更新数组。我希望这对其他人也有帮助。

this is what i am using to remove connections from connections array used with graffle example and so far i am having no issue with it. the question may be old but i stumbled upon on it searching the related solution, so when i had no luck i created mine and want to share with rest of the world.

    //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;
            })

the splice method was having issues with my case as if object has more than one connections (to, from) with multiple objects and every time i was using splice the main connections array length was changing as well as value of i was increasing, so i used jQuery grep method to update array based on removed lines. i hope this will help others too.

无远思近则忧 2024-11-07 09:38:53
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;
}
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;
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文