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属性

register

您必须注意，根据可用空间和图像尺寸，可能会出现无法为图像找到合适位置的情况。

我做了functional example。

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

1 个答案: