javascript - 创建旋转形状的背景

Question

我正在尝试创建一个具有旋转形状背景的容器。现在它们被随机插入容器内，这是可取的但不是必需的。它们必须在容器内部并且不会相互碰撞。

我搜索了有关如何执行此操作的解释，还尝试了很多方法，但似乎无法正常工作。非常感谢任何实现此目的的建议或技术!

这是我的目标:

这就是我现在得到的:

 var container = document.getElementById('container');

 for (var i = 1; i <= 10; i++) {
   var squarePositionX = Math.floor(Math.random() * 300);
   var squarePositionY = Math.floor(Math.random() * 100);

   var circlePositionX = Math.floor(Math.random() * 200);
   var circlePositionY = Math.floor(Math.random() * 80);

   var square = document.createElement('div');
   square.className = 'square';
   square.innerHTML = '';
   square.style.top = squarePositionY + 'px';
   square.style.left = squarePositionX + 'px';
   container.appendChild(square);

   var circle = document.createElement('div');
   circle.className = 'circle';
   circle.innerHTML = '';
   circle.style.top = circlePositionY + 'px';
   circle.style.left = circlePositionX + 'px';
   container.appendChild(circle);
 }

fiddle

Answer 1

第一步是从可能的位置减去形状的宽度和高度:

var squarePositionX = Math.floor(Math.random() * (containerWidth - squareWidth));

然后你必须检查那个空间是否被占用，你可以检查这个

1. 遍历所有元素并询问它们的大小和位置
2. 保存每个元素的大小和位置

在下面的代码片段中，我遍历了所有元素并创建了一个函数collide()来检查它们是否发生碰撞

var container = document.getElementById('container');
var containerWidth = container.clientWidth;
var containerHeight = container.clientHeight;

var shapeDiameter = 15;
var containerPadding = 2.5;

var shapes = ["square", "circle", "triangle"];
var allShapes;

var amount = 200;
var escape = amount * 100;
var k = 0;
for (var i = 0; i < amount; i++) {
  k++;
  var shapePositionX = Math.floor(Math.random() * (containerWidth - shapeDiameter)) + containerPadding;
  var shapePositionY = Math.floor(Math.random() * (containerHeight - shapeDiameter)) + containerPadding;
  var shapeRotation = Math.floor(Math.random() * 360);

  var shape = document.createElement('div');
  shape.className = shapes[i % 3];
  shape.innerHTML = '';
  shape.style.top = shapePositionY + 'px';
  shape.style.left = shapePositionX + 'px';
  shape.style.transform = "rotate(" + shapeRotation + "deg)";
  container.appendChild(shape);

  allShapes = container.children;
  if (i > 0) {
    for (var j = 0; j < allShapes.length - 1; j++) {
      if (collide(allShapes[j], allShapes[allShapes.length - 1])) {
        container.removeChild(container.lastChild);
        i--;
      }
    }
  }
  if (k >= escape) {
    alert("capped at " + i);
    i = amount;
  }
}

function collide(obj1, obj2) {
  var shapeDiameter1, shapeDiameter2;
  if(obj1.className == "square"){
    shapeDiameter1 = 15;
  }else if(obj1.className == "circle"){
    shapeDiameter1 = 10.5;
  }else if(obj1.className == "triangle"){
    shapeDiameter1 = 11.5;
  }
  if(obj2.className == "square"){
    shapeDiameter2 = 16;
  }else if(obj2.className == "circle"){
    shapeDiameter2 = 11;
  }else if(obj2.className == "triangle"){
    shapeDiameter2 = 12;
  }
  
  
  var myleft = parseInt(obj1.style.left, 10);
  var myright = myleft + shapeDiameter1;
  var mytop = parseInt(obj1.style.top, 10);
  var mybottom = mytop + shapeDiameter1;
  var otherleft = parseInt(obj2.style.left, 10);
  var otherright = otherleft + shapeDiameter2;
  var othertop = parseInt(obj2.style.top, 10);
  var otherbottom = othertop + shapeDiameter2;
  var collide = true;
  if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
    collide = false;
  }
  return collide;
}

#container {
  width: 300px;
  height: 300px;
  background-color: gray;
  position: relative;
}

.square {
  box-sizing: border-box;
  border: 1px solid Gainsboro;
  position: absolute;
  width: 10px;
  height: 10px;
  z-index: 5;
}

.circle {
  box-sizing: border-box;
  border: 1px solid Gainsboro;
  border-radius: 100%;
  position: absolute;
  width: 10px;
  height: 10px;
}

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 8.7px 5px;
  border-color: transparent transparent Gainsboro transparent;
  position: absolute;
}
/*
.square:before,
.circle:before,
.triangle:before {
  content: "";
  position: absolute;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.square:before {
  width: 15px;
  height: 15px;
  top: -3.5px;
  left: -3.5px;
}

.circle:before {
  width: 10.5px;
  height: 10.5px;
  left: -1px;
  top: -1px;
}

.triangle:before {
  width: 11.5px;
  height: 11.5px;
  left: -5.5px;
  top: 0px;
}*/

<div id="container"></div>