Javascript 如何在fabricjs画布中添加无重叠的随机圆

我试图提出一种算法，在法布里奇画布内添加无重叠的随机圆 下面的片段就是我尝试过的

constcanvas=newfabric.canvas（'gameCanvas'，{selection:false}）；
fabric.Object.prototype.originX=fabric.Object.prototype.originY='center'；
设矩形；
document.addEventListener（'DOMContentLoaded'，function（）{
矩形=新结构。矩形({
宽度：250，
身高：100，
填充：“蓝色”，
不透明度：0.2，
左:200,，
top:140
});
canvas.add（矩形）；
});
document.getElementById（'addCirclesBtn'）。addEventListener（'click'，function（）{
画圈（）；
});
函数drawCircles（）
{
对于（设i=1；i这是我提出的，主要逻辑在函数drawCircles（）中，该函数检查在矩形内添加圆之前是否重叠。需要注意的是，程序在矩形内添加了100个圆


constcanvas=newfabric.canvas（'gameCanvas'，{selection:false}）；
fabric.Object.prototype.originX=fabric.Object.prototype.originY='center'；
设矩形；
常数半径=10；
让min_x；
让min_y；
让max_x；
让max_y；
让我们兜圈子；
document.addEventListener（'DOMContentLoaded'，function（）{
drawRectangle（）；
min_x=rectangle.left-rectangle.width/2；
//最小x=250-200/2；
max_x=rectangle.left+rectangle.width/2；
//最大x=250+200/2；
min_y=rectangle.top-rectangle.height/2；
//最小值y=150-100/2；
最大y=rectangle.top+rectangle.height/2；
//最大y=150+100/2；
});
函数drawRectangle（）
{
矩形=新结构。矩形({
宽度：200，
身高：100，
填充：“蓝色”，
不透明度：0.2，
左：250，
顶部：150
});
canvas.add（矩形）；
}
document.getElementById（'addCirclesBtn'）。addEventListener（'click'，function（）{
canvas.clear（）；
圆圈=[]；
drawRectangle（）；
画圈（）；
});
函数drawCircles（）
{
让防碰撞计数=0
while（圆圈长度<100）
{
让圆圈=新织物。圆圈({
左：getRandomNumber（最小x+半径，最大x-半径），
顶部：getRandomNumber（最小y+半径，最大y-半径），
冲程宽度：2，
半径：半径，
填充：“白色”，
笔划：'#666'，
可选：false，
鼠标悬停光标：“默认值”，
哈斯：错，
哈斯：错，
原文：'中心'，
原文：'中心'
});
让isOverlapping=false；
对于（设j=0；j1000）
{
打破
}
}
}
函数getRandomNumber（最小值、最大值）
{
返回Math.floor（（Math.random（）*（max-min））+min）；
}

添加圆
这是我提出的，主要逻辑在函数drawCircles（）中，该函数在添加到矩形内之前检查圆是否重叠。需要注意的是，程序在矩形内添加了100个圆


constcanvas=newfabric.canvas（'gameCanvas'，{selection:false}）；
fabric.Object.prototype.originX=fabric.Object.prototype.originY='center'；
设矩形；
常数半径=10；
让min_x；
让min_y；
让max_x；
让max_y；
让我们兜圈子；
document.addEventListener（'DOMContentLoaded'，function（）{
drawRectangle（）；
min_x=rectangle.left-rectangle.width/2；
//最小x=250-200/2；
max_x=rectangle.left+rectangle.width/2；
//最大x=250+200/2；
min_y=rectangle.top-rectangle.height/2；
//最小值y=150-100/2；
最大y=rectangle.top+rectangle.height/2；
//最大y=150+100/2；
});
函数drawRectangle（）
{
矩形=新结构。矩形({
宽度：200，
身高：100，
填充：“蓝色”，
不透明度：0.2，
左：250，
顶部：150
});
canvas.add（矩形）；
}
document.getElementById（'addCirclesBtn'）。addEventListener（'click'，function（）{
canvas.clear（）；
圆圈=[]；
drawRectangle（）；
画圈（）；
});
函数drawCircles（）
{
让防碰撞计数=0
while（圆圈长度<100）
{
让圆圈=新织物。圆圈({
左：getRandomNumber（最小x+半径，最大x-半径），
顶部：getRandomNumber（最小y+半径，最大y-半径），
冲程宽度：2，
半径：半径，
填充：“白色”，
笔划：'#666'，
可选：false，
鼠标悬停光标：“默认值”，
哈斯：错，
哈斯：错，
原文：'中心'，
原文：'中心'
});
让isOverlapping=false；
对于（设j=0；j