Rotate a div to certain height in js

问题

How to rotate a div to certain height suppose 10px. I can rotate a div otherwise around 360 degrees. I need the angle by which the div would touch the line.

回答1:

You can apply the coordinate formula of the circle: (x - a)² + (y - b)² = r². Because we've interest in the angle only, we can position the circle on the origin, and ignore a and b, which makes the calculation much more simple.

In the image, the green items are known, the cyan items are helpers, and the red items are the changes/results. Symbols are matching the variable names in the below code snippet.

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² must be >= 0, otherwise the distance to the line (d) is too large and the corner of the div never meets the line. You can swap the direction by negating the rotation angle.

回答2:

For this to be solved a bit of Math is needed. What's your definition of "touch the line"? Will you consider it when any corner places exactly 1px behind the line? Or it's something else? Let me know to try on help you.

Edit: Well, perhaps there is a human way to do this but let's dive into this. If you have your div with a width,the highest height for that corner is on 45deg but the corner may reach the line before that. Since de angle will be less or equals to 45, and given that we want the height, you'll want to use this:

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

Where w is the width and h is the height, and the number to calc sin and cosin must be in radians. So you may do this:

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)));

Now, you want to get the first touching pixel. In order to do so, you first calculate the gap between those 2 elements to get what should be the minimun height:

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

Then, i want to the new height to be as my expectedHeight. Now it's time to adapt the newHeight formula so instead of input the degrees and output the height, it can do reverse:

Given that NewH is the expectedHeight, you may use this...

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

Here is a photo of the math to get to that formula. If you want, you may skip and continue

So now to get degrees we calc as follows

Math.acos(cos(x))

Assume that you saved the result of cos(x) in a "myCos" variable

let radDeg = Math.acos(myCos)

And... there you go. That's the degrees (in radians) to get to the required height. Now you may want to translate into "normal" degrees:

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

I hope that solves the problem. Let me know if something is unclear.

回答3:

To get the degree of rotation via JavaScript please refer : Find degree of rotation using JavaScript

But, if so this can be directly handle by using css transform property.

As per the below example, the div should rotate by 5 degree by using css property:-

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>

来源：https://stackoverflow.com/questions/62442929/rotate-a-div-to-certain-height-in-js

标签

javascript

rotation

angle