如何防止隨機定位圖片來自使用重疊角

Question

我有到頁面在隨機位置，利用下面的代碼加載多個圖像的角應用：

HTML：

<div ng-repeat="s in selectedImages" class="container"> 
    <img ng-src="{{s.img}}" class="sImage" ng-style="s.pos"/> 
</div> 

CSS：

.wordImage { 
    position:absolute; 
    width:100px; 
} 

JS控制器：

function loadImages() { 
    $scope.myImages = ['img1.png', 'img2.png', 'img3.png', 'img4.png', 'img5.png'] 
    $scope.selectedImages = []; 
    for (i in $scope.myImages) { 
     $scope.selectedImages.push(addRandomLocationToImage($scope.myImages[i])); 
    } 
} 

function addRandomLocationToImage(image) { 
    image.pos = {}; 
    var preTop = getRandomHeight(); // get Height for this image 
    var preLeft = getRandomWidth(); // get Width for this image 
    image.pos = {top:preTop, 
       left:preLeft}; 
    return image; // returns the same image object but contains pos{} for ng-style 
} 

function getRandomHeight() { 
    var imgHeight = 100; 
    var winHeight = $(window).height(); 
    var randomH = Math.random() * (winHeight - 100); // subtract 100 for the header. and also footer padding 
    if (randomH < 150) { 
     randomH += 150; // add to keep it out of the header 
    } 
    if(winHeight - randomH < 100) { // if image will be on bottom edge of page 
     randomW -= imgHeight; // subtract 100 because that is the height of the images, this will prevent them from being partially off the page 
    } 
    return randomH; 
} 

function getRandomWidth() { 
    var imgWidth = 100; 
    var winWidth = $(window).width(); 
    var randomW = Math.random() * winWidth; 
    if (randomW < 0) { // make sure it is not less than zero, then assign new number until it is greater than zero 
     while (randomW < 0) { 
      randomW = Math.random() * winWidth; 
     } 
    } 
    if (winWidth - randomW < 100) { // if image will be on right edge of page 
     randomW -= imgWidth; // subtract 100 because that is the width of the images, this will prevent them from being partially off the page 
    }  
    return randomW;  
} 

loadImages(); 

這絕對會在頁面上產生隨機圖像......但它們很容易重疊。 我的問題是，我怎樣才能防止它們重疊？這是我一直在努力的一些代碼。

var newLeft = currentImage.pos.left; 
var newTop = currentImage.pos.top; 
for (i in $scope.selectedImages) { 
    var originalLeft = $scope.selectedImages[i].pos.left; 
    var originalTop = $scope.selectedImages[i].pos.top; 
    if ((originalLeft - newLeft < 100 && originalLeft - newLeft > -100) && // could overlap horizontally 
     (originalTop - newTop < 100 && originalTop - newTop > -100)) { // could overlap vertically 
      //do something to select a new random location. 
    } 
} 

Answer 1

基本上你必須檢查一個圖像的位置與其他圖像。您可以使用Array.some此：

考慮您存儲圖像位置的圖像對象 x和y屬性

function checkCollision(testImage) { 
    return $scope.myImages.some(function(img) { 
    if (img == testImage) 
     return false; 

    if (!img.x || !img.y) // Image has no position yet 
     return false; 

    return 
     testImage.x < img.x + imgWidth && 
     testImage.x + imgWidth > img.x && 
     testImage.y < img.y + imgHeight && 
     testImage.y + imgHeight > img.y; 
    }); 
} 

你必須要知道的是，根據的可用空間和圖像尺寸可能存在無法爲圖像找到合適位置的情況。我做了functional example。