圈子大小是可定制的,用户可以通过拖动JavaScript滑块来更改大小,更改一些圆圈的大小(例如,10％的滑块中,圆4的半径为20px,圆圈为10px,圆圈5保持不变,等等).正如您可能已经猜到的那样,当滑块被移动时,我会尝试平滑地“转换”大小重新定位.

我尝试过的方法到目前为止：而不是手动尝试定位他们,我试图使用物理引擎 –

想法：

>在屏幕中央放置一些重力拉力
使用物理引擎来照顾球碰撞
>在“拖动时间”滑块事件我将设置不同
球尺寸让发动机照顾其余

对于这个任务,我使用了“Box2Dweb”.我把一个引力拉到屏幕的中心,然而,花了很长时间,直到球被放置在中心,并且浮起来.然后我把一个小静态的一块球放在中心,所以他们会打它,然后停下来.看起来像这样：

结果好一点,但是圈子仍然移动了一段时间,才开始静止.即使在玩弄球摩擦和不同重力拉力等变量的时候,整个事情都浮起来,感到非常“摇摆不定”,而我希望球只在拖动时间滑块(当它们改变尺寸时)移动.此外,Box2d不允许更改对象的大小,我将不得不打破我的解决方法.

所以,Box2d的方法让我意识到,也许离开一个物理引擎来处理这个问题并不是解决问题的最好方法.或者也许我必须包括我没有想到的其他力量.我已经找到了this similar question在我的StackOverflow.然而,非常重要的区别是它只是一次产生一些非特定的圆,并且不允许额外的特定球尺寸和位置操纵.

我现在真的卡住了,有没有人有任何想法如何解决这个问题？

更新：现在已经差不多一年了,我完全忘了这个线程.我做的最后是坚持物理模型,重启力量/停止在几乎空闲的条件.结果可以在这里看到http://stateofwealth.net/
你看到的三角形是在这些圈子里面.其余线路通过“delaunay三角测量算法”