带有随机 X、Y 和角度的 2D 旋转 jQuery

Question

我有屏幕宽度、屏幕高度（例如 1360 X 768）和图像宽度和高度（例如 400 X 400）。我想在屏幕上的随机 x、y 位置显示每个图像，并在该位置显示图像。另外，随意旋转图像。

所以，我使用以下代码从屏幕中找到 X、Y 随机位置。

var randPosX = Math.floor((Math.random()*(screen_width - image_width )));
var randPosY = Math.floor((Math.random()*(screen_height - image_height )));

所以，这将在屏幕区域内返回 X、Y，以便显示整个图像。

现在，我已经使用轮换代码了

 var rNum = Math.round((Math.random()*360)+1);

在 div 上应用

$('img').css('left',Math.abs(new_x_point) );
$('img').css('top', Math.abs(new_y_point));
$('img').css('position','absolute');
$('img').css('transform','rotate('+rNum+'deg)');

现在，旋转后，X、Y 位置发生了变化，因此有时它会剪切屏幕上的图像。

我还尝试在旋转后找到新的 X、Y 并使用以下逻辑应用它：

new_x_point = randPosX * Math.cos(rNum) - randPosY * Math.sin(rNum);
new_y_point = randPosY * Math.cos(rNum) + randPosX * Math.sin(rNum);

HTML

<div id="image_0" style="display:none;height:768px;width:1360px;z-index:1;position: absolute"><img src="001.png" style="height:400px;width:400px;" class="product-img"></div>

<div id="image_1" style="display:none;height:768px;width:1360px;z-index:1;position: absolute"><img src="002.png" style="height:400px;width:400px;" class="product-img"></div>


<div id="image_2" style="display:none;height:768px;width:1360px;z-index:1;position: absolute"><img src="003.png" style="height:400px;width:400px;" class="product-img"></div>

等

但它不起作用:(。请帮助谢谢

Answer 1

这里的问题是您需要考虑transform-origin 以及图像在旋转后将占用的空间。如果你想尽量减少溢出，请使用transform-origin:center（默认值），这样图像将从中心旋转并创建一个你需要考虑的圆圈。

下图显示图像在旋转时占用的空间：

body {
  margin: 0;
  border: 1px solid;
}

.box {
  display: inline-block;
  padding: 42px;
  border: 1px solid;
  overflow: hidden;
  border-radius: 50%;
  font-size: 0;
}

img {
  animation: rotate 2s linear infinite;
  transform-origin: center;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<div class="box">
  <img src="https://lorempixel.com/200/200/">
</div>

因此，如果图像是正方形，每个尺寸的长度为d，那么对角线将为d*sqrt(2) ~ 1.4*d，因此溢出将为(1.4*d-d)/2 = 0.2*d。 （见下面的红线）：

你应该从计算中删除这个距离：

var d = 100;
var overflow = 0.21*d; // will make it a bit bigger for rouding

$('img').each(function() {
  var randPosX = Math.round((Math.random() * ($(window).width() - d- 2*overflow) + overflow));
  var randPosY = Math.round((Math.random() * ($(window).height() -d -2*overflow) + overflow));
  var rNum = Math.round((Math.random() * 360) + 1);
  $(this).css({'left': randPosX,
               'top': randPosY,
              'transform': 'rotate(' + rNum + 'deg)'});
});

body {
 margin:0;
}
img {
  position: absolute;
  transform-origin: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://lorempixel.com/100/100/">
<img src="https://lorempixel.com/100/100/">
<img src="https://lorempixel.com/100/100/">
<img src="https://lorempixel.com/100/100/">
<img src="https://lorempixel.com/100/100/">

---

如果图像不是正方形，则将应用相同的逻辑，但您需要重新考虑溢出圆的计算。同样的想法，如果你改变变换原点，但改变变换原点会使图像有更大的溢出圈。例如，如果您将原点设置为上/左，则溢出圆的半径将是变换原点设置为中心时的半径的两倍。

Answer 2

我想我终于成功了。

我创建了一个内部容器（称为.boundaries），在主容器中放置了一些填充，它将包含所有图像。这样，图像将永远无法触及或溢出主容器。

诀窍是计算正确的填充，即图像对角线的一半。

Codepen here（使用 Stylus 进行计算）

（我添加了一个连续旋转以显示没有图像触及边界）

let imgWidth = 150,
	imgHeight = 100,
	$boundaries = $(".boundaries"),
	boundariesWidth = $boundaries.width(),
	boundariesHeigth = $boundaries.height();

$("img").each( function() {
	let top = `${Math.round(boundariesHeigth * Math.random() - imgHeight/2 )}px`,
		left = `${Math.round(boundariesWidth * Math.random() - imgWidth/2 )}px`,
		rotation = `${Math.round(360 * Math.random() )}deg`

	$(this).css({
		top: top,
		left: left,
		transform : `rotate(${rotation})`
	});
});

.container {
  width: 800px;
  height: 400px;
  border: #00f dashed 2px;
  position: relative;
}
.container .boundaries {
  border: #f00 dashed 2px;
  position: absolute;
  width: calc(100% - 2 * 90.13878188659973px);
  height: calc(100% - 2 * 90.13878188659973px);
  top: 90.13878188659973px;
  left: 90.13878188659973px;
}
.container .boundaries img {
  transform-origin: center center;
  position: absolute;
  -webkit-animation: rotation 5s infinite linear;
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="boundaries"><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/><img src="https://placeimg.com/150/100/any"/>
  </div>
</div>