某些形状不Two.js通过各种形状的阵列循环时被删除 [英] Some shapes not being removed in Two.js when looping through array of all shapes
问题描述
我建立使用Two.js产生形状的web应用程序，然后再次将其删除后，他们的寿命就到了。
当我使他们推到一个新的数组，然后我通过循环每一帧以检查其是否寿命是向上的形状。如果是则形状被去除，从阵列拼接
这工作的99％的时间，但有时的形状不会从舞台上删除，即使它会从数组中删除。因此，它卡住，并有给它没有提及，所以我不能将其删除。
另外，如果我删除的形状如的循环中我得到这个错误了很多检查：
的未捕获类型错误：无法读取的未定义的属性'CREATIONTIME的
我敢肯定，意味着什么是不对的。
onPeak：（COL）=＆GT;
圈= @ _two.makeCircle @ _two.width，@ _two.height，@ _two.height * 0.75
circle.fill =山坳
circle.lifeSpan = Math.floor @convertToRange（@_ BPM，[60600]，[1000，400]）
circle.creationTime =新的Date（）。的getTime（）
circle.noStroke（）
@ _shapes.push圈
onTwoUpdate：（）=＆GT;
如果@ _shapes.length＆GT; = 1
@removeShapes（）
removeShapes：（）=＆GT;
时间=新的Date（）。的getTime（）
在@_shapes形状
如果形状和时间 - shape.creationTime＆GT; = shape.lifeSpan
shape.remove（）
@ _shapes.splice shape.index，1
您是从 @_形状，而你遍历它删除的东西。考虑一个简单的例子：
A = [0..3]
为电子商务在
如果（E％2 == 0）
a.splice（即，1）
的console.log（E，JSON.stringify（a）条）
这会给你这个控制台：
0[1,2,3]
2[1,2]
未定义[1,2]
未定义[1,2]
演示： http://jsfiddle.net/ambiguous/9fsYL/
您会发现，事情开始了罚款，但只要你拼接数组中删除一个元素，一切都在一堆废话分崩离析。在未定义取值出现在控制台，因为循环缓存数组的长度（更改时删除的东西），所以你最终流失数组的结尾。
在 @_ shapes.splice shape.index，1 ，你在移位的一切 shape.index 朝开始的数组，但你的为循环不知道。其结果是，你已经删除了所需元素，循环将不会看到下一个元素。
解决这个问题的一个常见的解决方案是向后迭代。这样，当你删除的东西，你只会影响您已经看到事物的位置。例如，如果您更改上面的循环：
为电子商务在-1
您将获得在控制台明智的事：
3[0,1,2,3]
2[0,1,3]
1[0,1,3]
0[1,3]
演示： http://jsfiddle.net/ambiguous/Yngk8/
在你的情况，他说：
通过在@_shapes形状-1
应该解决这个问题。
I'm building a web-app using Two.js which generates shapes and then removes them again after their lifespan is up.
When making the shapes I push them into a new array which I then loop through every frame to check if the lifespan is up. If it is then the shape is removed and spliced from the array.
This works 99% of the time, but sometimes a shape does not get removed from the stage, even though it gets removed from the array. So it gets stuck and there is no reference to it so I can't remove it.
Also if I remove the 'if shape' check in the loop I get this error a lot: Uncaught TypeError: Cannot read property 'creationTime' of undefined which I'm sure means something is not right.
onPeak: (col) =>
circle = @_two.makeCircle @_two.width, @_two.height, @_two.height*0.75
circle.fill = col
circle.lifeSpan = Math.floor @convertToRange(@_bpm, [60,600], [1000, 400])
circle.creationTime = new Date().getTime()
circle.noStroke()
@_shapes.push circle
onTwoUpdate: () =>
if @_shapes.length >= 1
@removeShapes()
removeShapes: () =>
time = new Date().getTime()
for shape in @_shapes
if shape and time - shape.creationTime >= shape.lifeSpan
shape.remove()
@_shapes.splice shape.index, 1
You're removing things from @_shapes while you're looping over it. Consider a simplified example:
a = [0..3]
for e in a
if(e % 2 == 0)
a.splice(e, 1)
console.log(e, JSON.stringify(a))
That will give you this in the console:
0 "[1,2,3]"
2 "[1,2]"
undefined "[1,2]"
undefined "[1,2]"
Demo: http://jsfiddle.net/ambiguous/9fsYL/
You'll notice that things start out fine but as soon as you splice the array to remove an element, everything falls apart in a pile of nonsense. The undefineds appear in the console because the loop caches the array's length (which changes when remove things) so you end up running off the end of the array.
When you @_shapes.splice shape.index, 1, you shift everything after shape.index towards the beginning of the array but your for loop doesn't know that. The result is that you've removed the desired element and the loop won't see the next element.
A common solution to this problem is to iterate backwards. That way, when you remove something, you only affect the positions of things that you've already seen. For example, if you change the above loop to:
for e in a by -1
then you'll get something sensible in the console:
3 "[0,1,2,3]"
2 "[0,1,3]"
1 "[0,1,3]"
0 "[1,3]"
Demo: http://jsfiddle.net/ambiguous/Yngk8/
In your case, saying:
for shape in @_shapes by -1
should fix the problem.
这篇关于某些形状不Two.js通过各种形状的阵列循环时被删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
