Javascript:防止随机大小的图像重叠

Javascript : Prevent overlapping on images that are sized randomly

本文关键字：图像 重叠 随机 Javascript      更新时间：2023-09-26

我有一个图库，其中的图像经历了一种粗糙的处理:它们在容器中的大小和位置是随机的。此外，它们是圆润的，并通过鼠标点击改变大小。放心，它实际上比听起来简单得多。

好吧，这里有一个(可爱的)例子来说明我的意思:http://dl.dropbox.com/u/5550635/Test%20rounded%20gallery/example2.htm

我的问题在这个例子中很明显，大多数时候图像是重叠的。
同样的道理，当你点击其中一个图像时，其他的向下，应该形成一条没有重叠的线，它们之间可能至少有5个像素的空白。

您可以在示例页面上看到注释的代码。

CSS非常简单:

.project { //class given to the div containing the images
border-radius: 100px;
width: 200px;
height: 200px;
overflow: hidden;
}
#space { //container
width: 550px;
height: 700px;
background: #ccc;
border: 2px solid blue;
}
.parent_project { //parent of the .project div, position absolutely (to fix a problem between position and border-radius)
position: absolute;
}

我在网上寻找一个Javascript解决方案来防止重叠的图像，但我找不到一个适合我的具体情况。如果你能看一下我的问题，分享一点你的科学知识，我会很感激的。谢谢!

您需要跟踪圆的中点和半径。http://jsfiddle.net/pimvdb/5L9FN/

    var randomdiameter = 100*Math.random()+100; //random diameter
    var randomTop = 400*Math.random(); //random top position
    var randomLeft = 350*Math.random(); //random left position
    while(overlapping(randomTop + randomdiameter / 2,  // x midpoint
                      randomLeft + randomdiameter / 2, // y midpoint
                      randomdiameter / 2)) { // radius
        // generate again if overlapping any other image
        randomTop = 400*Math.random(); //random top position
        randomLeft = 350*Math.random(); //random left position
    }
    images.push([randomTop + randomdiameter / 2, 
                 randomLeft + randomdiameter / 2, 
                 randomdiameter / 2]); // push this image in the array

然后，为了检查重叠，你可以计算每两个中点之间的距离，并检查它是否小于两个半径:

var images = [];
function overlapping(x, y, r) {
    for(var i = 0; i < images.length; i++) { // iterate over all images
        var im = images[i]; // this image
        var dx = im[0] - x; // x distance between this image and new image
        var dy = im[1] - y; // y distance between this image and new image
        if(Math.sqrt(dx*dx + dy*dy) <= im[2] + r) {
            // if distance between midpoints is less than the radii, they are overlapping
            return true;
        }
    }
    return false; // when we reach this point the new image has not been overlapping any
}
相关文章：