向 Raphael JS Graffle Connection 添加自定义删除方法
我正在使用在以下位置找到的示例中添加的自定义连接方法(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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
回顾一下......当我们创建连接时,我们经常使用以下内容:
我们在这里所做的是将
Raphael.connections
对象推送(添加)到connections[] 数组,基于其
Raphael
对象 ID要向
Raphael
添加方法/函数,可以使用:这会在我们的
Raphael
中创建一个函数> 与我们的 Raphael 对象一起使用的命名空间。下面是我创建的代码,它完全符合您的要求。我找不到 Raphael 的好资源,但肯定会很快创建一个,因为我已经用它做了很多开发。
就像在创建连接中一样,提供了两个 id。我们必须在已推送每个连接集的连接数组中找到这些 ID。如果只有一个连接,则无需遍历数组,尽管这种情况较少遇到。
我们这里有两种可能的情况 - 排除为简单起见未找到连接的情况。它要么发现:
from.id
对应于第一个提供的参数firstObjectId
。然后,to
对应于第二个提供的参数secondObjectId
。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:
What we're doing here is pushing (adding) a
Raphael.connections
object into aconnections[]
array, based on theirRaphael
object id'sTo add a method/function to
Raphael
, one might use:This creates a function in our
Raphael
namespace for use with ourRaphael
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.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:
from.id
corresponds to the first provided paramenterfirstObjectId
. Then, theto
corresponds to the second provided paramentersecondObjectId
.from.id
corresponds to the first provided paramentersecondObjectId
. Then, theto
corresponds to the second provided paramenterfirstObjectId
.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,
这就是我用来从与 graffle 示例一起使用的连接数组中删除连接的方法,到目前为止我没有遇到任何问题。这个问题可能很老,但我偶然发现它搜索相关的解决方案,所以当我运气不好时,我创建了我的问题并想与世界其他人分享。
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.
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.