如何使用 Angular 防止随机定位的图像重叠

Question

我有一个 Angular 应用程序，它使用以下代码在随机位置将多个图像加载到页面上：

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。