javascript – 将可调整大小的圈子相互靠近

我正在研究这个基于浏览器的实验,我给予N个特定的圈子(假设他们有一个独特的图片),并且需要将它们放在一起,尽可能少的间隔.它不必排列在一个圆圈,而是应该“聚集在一起”.

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

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

想法：

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

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

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

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

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

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

解决方法

我记得看到一个非常类似于你所描述的 d3.js演示.这是由Mike Bostock自己写的： http://bl.ocks.org/mbostock/1747543

它使用四叉树进行快速碰撞检测,并使用基于力的图,它们都是d3.js实用程序.

在tick功能中,您应该可以添加一个.attr(“r”,function(d){return d.radius;}),这将更改节点数据更改每个刻度的半径.只是对于初学者,你可以将其设置为随机返回,并且圈子应该像疯狂一样抖动.

原文地址：https://www.jb51.cc/js/152016.html