在js中将div旋转到一定高度

Question

如何将div旋转到一定高度假设10px。我可以将 div 旋转 360 度左右。我需要 div 接触线的角度。

Answer 1

通过JavaScript获取旋转度数请参考：Find degree of rotation using JavaScript

但是，如果是这样，这可以通过使用 css 转换直接处理属性。

根据下面的示例，div 应使用 css 属性旋转 5 degree:-

transform: rotate(xdeg)

<!DOCTYPE html>
<html>

<head>
  <style>
    div {
      width: 300px;
      height: 100px;
      background-color: yellow;
      border: 1px solid black;
    }
    
    hr.line {
      margin-bottom: 10px;
    }
    
    div#myDiv {
      -ms-transform: rotate(5deg);
      /* IE 9 */
      transform: rotate(5deg);
      /* Standard syntax */
    }
  </style>
</head>

<body>

  <h1>The rotate() Method</h1>
  
  <hr class="line"></hr>

  <div id="myDiv">
    This div element is rotated clockwise 5 degrees.
  </div>

</body>

</html>

Answer 2

要解决这个问题，需要一点数学知识。你对 "touch the line" 的定义是什么？当任何角落恰好在线后 1px 时，您会考虑吗？或者是别的东西？让我知道可以帮助你。

编辑：好吧，也许有一种人为的方式来做到这一点，但让我们 dive 进入这个。如果您的 div 有宽度，则该角的最高高度为 45 度，但角可能会在此之前到达该线。由于 de angle 将小于或等于 45，并且鉴于我们想要高度，您将需要使用此：

(w * Math.sin(toRad(45)))+(h * Math.cos(toRad(45)))

其中w是宽度，h是高度，计算sin和cosin的数字必须是弧度。所以你可以这样做：

let w = divElement.offsetWidth;
let h = divElement.offsetHeight;
function toRad(deg){return deg*(Math.PI/180);}
let NewH = (w * Math.sin(toRad(deg)))+(h * Math.cos(toRad(deg)));

现在，您想获得第一个触摸像素。为此，您首先计算这两个元素之间的差距以获得最小高度：

let divOffTop = divElement.offsetTop;
let lineOffTop = lineElement.offsetTop;
let lineOffHeight = lineElement.offsetHeight;
let diff = Math.abs((divOffTop)-(lineOffHeight+lineOffTop));
let expectedHeight = divELement.offsetHeight + diff;

然后，我想要新的高度是我的预期高度。现在是时候调整新的高度公式了，而不是输入度数和输出高度，它可以做相反的事情：

鉴于 NewH 是 expectedHeight，您可以使用此...

cos(x) = NewH.h + w*(Math.sqrt(Math.pow(h,2) - Math.pow(NewH,2) + Math.pow(w,2))

这是获得该公式的数学照片。如果你愿意，你可以跳过并继续

所以现在为了获得学位，我们计算如下

Math.acos(cos(x))

假设您将 cos(x) 的结果保存在 "myCos" 变量中

let radDeg = Math.acos(myCos)

然后...好了。这是达到所需高度的度数（以弧度为单位）。现在你可能想翻译成"normal"度：

function radToDeg(rad){return rad/(Math.PI/180);} let deg = radToDeg(radDeg);

希望能解决问题。如果有什么不清楚的地方，请告诉我。

Answer 3

可以套用圆的坐标公式：(x - a)² + (y - b)² = r²。因为我们只对角度感兴趣，所以我们可以将圆定位在原点上，而忽略a和b，这样计算就简单多了。

图中绿色项为已知项，青色项为助手，红色项为changes/results。符号与以下代码片段中的变量名称匹配。

const
  w = 50,    // Halfwidth of the div
  h = 25,    // Halfheight of the div
  d = 10,    // The distance between the line and the box
  y = h + d, // The final Y-coordinate of the box corner
  R = w ** 2 + h ** 2,         // The square of the length of the "radius line"
  x = Math.sqrt(R - y ** 2),   // The final X-coordinate of the box corner
  a = Math.atan2(h, w),        // The original angle of the "radius line"
  b = Math.atan2(y, x),        // The new angle of the "radius line"
  r = (b - a) * 180 / Math.PI, // The rotation angle
  box = document.querySelector('.box');

box.style.transform = 'rotate(' + r + 'deg)';

.line {
  position: fixed;
  box-sizing: border-box;
  top: 10px;
  left: 0px;
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #000;
}
.box {
  position: fixed;
  top: 20px;
  width: 100px;
  height: 50px;
  background: red;
}

<div class="line"></div>
<div class="box"></div>

R - y² 必须 >= 0，否则到线 (d) 的距离太大，div 的角永远不会与线相交。您可以通过取反旋转角度来交换方向。

在js中将div旋转到一定高度

Rotate a div to certain height in js

javascript

angle

rotation