【问题标题】:issues with Raphaël and removing objects within svgRaphaël 的问题和删除 svg 中的对象
【发布时间】:2015-03-26 13:59:59
【问题描述】:

如果你打开密码笔,就会有一个开火按钮。它会发射一堆椭圆,然后当它击中时会导致爆发。如果您查看有两组的椭圆,它们仍然存在。我试过使用下面的

d3.selectAll("ellipse").remove()
$("ellipse").remove()
$("ellipse").each(function(){this.remove()})

http://codepen.io/daniel667/pen/QwMWrm

上面的代码笔将帮助显示我所说的最右边的第二个开火按钮是我试图用来杀死省略号的东西,所以我不等待最底部的功能的动画。

【问题讨论】:

  • 不太清楚为什么要使用 d3..但我可能只是将它们存储在 Raph 集中,然后迭代该集并删除它们(或隐藏它们并稍后重用),例如以codepen.io/anon/pen/ogezEW 为例。只是额外无关的想法。它似乎也有点慢,所以值得看看velocity.js之类的东西(发光也可能会减慢它的速度,所以也可能是替代品)。
  • 我只是在使用 d3 来尝试做同样的任务,看看我是否可以让它工作。在询问之前尝试探索所有路径。
  • 我不研究辉光。我正在考虑使用velocity.js。也许生病探索。您是否有理由不使用您的解决方案作为答案?
  • 如果您认为它有帮助,我会将其设置为答案,我不确定是否缺少某些东西,例如您出于某种原因需要使用 d3。
  • 不,我只是使用 d3 来尝试做同样的事情。所以是的,请继续并将其设置为答案。你说得对,发光似乎确实让事情变慢了一点。

标签: javascript jquery svg d3.js raphael


【解决方案1】:

我会创建一个 Raphael 集或一个数组并将元素存储在其中,以便您以后可以引用它们来删除它们。如果它们会被重复使用,那么最好不要删除它们,而只是隐藏它们而不是每次都重新创建。

var mySet;
...
mySet = paper.set();
mySet.push( circi );

....
function throwss() {
  mySet.forEach( function( el ) { el.remove(); });
}

示例:codepen

为了速度,您可能还想研究 Velocity.js,还要注意动画过滤器可能会占用大量资源。

【讨论】:

  • s.codepen.io/daniel667/debug/QwMWrm?在调试模式下它会抛出一个错误,我看不到问题,但我的眼睛不好,介意看看,
  • animate({along :1} 3000, "linear"...在}后加逗号
  • 你应该赢得互联网。
猜你喜欢
  • 2011-08-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-07-01
  • 2011-03-31
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多