0
votes

Faire pivoter un div à une certaine hauteur en js

Comment faire pivoter un div à une certaine hauteur suppose 10px. Je peux faire pivoter un div autrement autour de 360 degrés. J'ai besoin de l'angle selon lequel le div toucherait la ligne.

javascript rotation angle

0 commentaires

3 Réponses :

-1
votes

Pour obtenir le degré de rotation via JavaScript, veuillez consulter: Trouvez le degré de rotation à l'aide de JavaScript

Mais, si c'est le cas, cela peut être directement géré en utilisant la propriété de transformation css .

Comme dans l'exemple ci-dessous, le div doit pivoter de 5 degrés en utilisant la propriété css: -

<!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>

transform: rotate(xdeg)

2 commentaires

La question est toujours de savoir comment calculer l'angle.

comment avez-vous calculé 5 degrés?

0
votes

Pour résoudre ce problème, un peu de mathématiques est nécessaire. Quelle est votre définition de «toucher la ligne»? Considérez-vous cela quand un coin se place exactement 1px derrière la ligne? Ou c'est autre chose? Faites-moi savoir pour essayer de vous aider.

Edit: Eh bien, il y a peut-être une manière humaine de le faire, mais plongeons-nous dans cela. Si vous avez votre div avec une largeur, la hauteur la plus élevée pour ce coin est de 45 degrés, mais le coin peut atteindre la ligne avant cela. Puisque l'angle sera inférieur ou égal à 45, et étant donné que nous voulons la hauteur, vous voudrez utiliser ceci:

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

Où w est la largeur et h est la hauteur, et le nombre pour calculer sin et cosin doit être en radians. Vous pouvez donc faire ceci:

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

Maintenant, vous voulez obtenir le premier pixel en contact. Pour ce faire, vous calculez d'abord l'écart entre ces 2 éléments pour obtenir ce que devrait être la hauteur minimale:

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

Ensuite, je veux que la nouvelle hauteur soit comme mon attenduHeight. Il est maintenant temps d'adapter la formule newHeight afin qu'au lieu de saisir les degrés et de sortir la hauteur, il peut faire l'inverse:

Étant donné que NewH est le expectedHeight, vous pouvez utiliser ceci ...

 cos (x) = NewH.h + w * (Math.sqrt (Math.pow (h, 2) - Math.pow (NewH, 2) + Math.pow (w, 2))  code>   Voici une photo des mathématiques pour arriver à cette formule. Si vous le souhaitez, vous pouvez sauter et continuer 
      p> 
 Alors maintenant, pour obtenir les degrés, nous calculons comme suit 
   Math.acos (cos (x))  
  Supposons que vous ayez enregistré le résultat de cos (x) dans une variable "myCos" 
   let radDeg = Math.acos (myCos)  
  Et ... voilà. les degrés (en radians) pour atteindre la hauteur requise. Vous pouvez maintenant traduire en degrés "normaux": 
  
function radToDeg (rad) {return rad / (Math.PI / 180);}
laissez deg = radToDeg (radDeg);
  J'espère que cela résout le problème. Faites-moi savoir si quelque chose n'est pas clair.

1 commentaires

En touchant la ligne, j'entends le coin du div, en image son coin supérieur droit.

0
votes

Vous pouvez appliquer la formule des coordonnées du cercle: (x - a) Â² + (y - b) Â² = rÂ² . Parce que nous ne nous intéressons qu'à l'angle, nous pouvons positionner le cercle sur l'origine, et ignorer a et b , ce qui rend le calcul beaucoup plus simple.

Dans l'image, les éléments verts sont connus, les éléments cyan sont des aides et les éléments rouges sont les changements / résultats. Les symboles correspondent aux noms de variables dans l'extrait de code ci-dessous.

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

.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;
}

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

R - y² doit être> = 0, sinon la distance à la ligne (d) est trop grande et le coin du div ne rencontre jamais la ligne. Vous pouvez permuter la direction en annulant l'angle de rotation.

1 commentaires

Une étape plus courte serait de calculer la longueur du rayon ( r = Math.sqrt (w ** 2 + h ** 2) ) puis d'utiliser la fonction asin pour obtenir l'angle modifié: < code> b = Math.asin (y / r) . De cette façon, vous pouvez supprimer la variable x du code.