0
198
ViewsCalcule 45 grados para apuntar a la esquina superior izquierda de la página
Estoy tratando de apuntar el div rojo hacia la esquina de la ventana usando la rotación de transformación. 
El amarillo está fijo a 45 grados, solo como referencia.
El azul apunta a la esquina superior izquierda usando innerHeight y innerWidth como puntos.
Y el rojo intenta imitar al azul calculando 45 + algún desplazamiento, siempre debe tener la misma rotación que el azul pero sin usar la altura interna y la anchura interna como puntos.
Esto es lo más cerca que estuve de hacerlo funcionar usando este código:
window.onresize = () => calcAngle() var calcAngle = () => { console.clear() var x1 = 0, y1 = 0; var x2 = window.innerWidth, y2 = window.innerHeight; var a = (Math.atan2((y2 - x1), (x2 - y1)) * (180 / Math.PI)); document.querySelectorAll(".pointer")[1].style.transform = "translate(50%, -50%) rotate("+a+"deg)" var of = x2/y2; var ang = 45; var calc = ang - (ang*of-ang) document.querySelectorAll(".pointer")[2].style.transform = "translate(50%, -50%) rotate("+(calc)+"deg)" console.log(a, calc) } calcAngle(); body { overflow: hidden; } .pointer { width: 200px; height: 20px; opacity: .7; background: blue; position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); clip-path: polygon(100% 0%, 100% 100%, 0% 50%); } .pointer:nth-child(1){ background: yellow; transform: translate(50%, -50%) rotate(45deg); } .pointer:nth-child(3){ background: red; } <div class="pointer"></div> <div class="pointer"></div> <div class="pointer"></div> Usando el código como ejemplo, calc siempre debe tener el mismo valor de a pero usando 45 grados como referencia.
1 answers
Answer question0
Por supuesto, como muestra en su pregunta, el enfoque más simple es usar atan(y/x) * 180 / PI para obtener el ángulo completo. Esto se refleja a continuación como refAngle .
Dado que su condición requiere que sea un desplazamiento de 45 grados, esto requiere matemáticas más avanzadas, usando la ley de los senos además de la trigonometría básica. Tenemos suficiente información en base a la relación ancho/alto de la pantalla para encontrar la información, pero termina siendo una fórmula muy compleja. Esto se refleja a continuación en dos pasos, primero sinOff para obtener el seno del ángulo de desplazamiento relativo a 45 grados, y luego off una vez que hayamos hecho el asin y la conversión de radianes a grados.
Este fragmento demuestra que los dos ángulos coinciden, sin importar cómo se cambie el tamaño de la ventana del navegador.
const x = window.innerWidth; const y = window.innerHeight; const { sin, atan, asin, sqrt, PI } = Math; const sinOff = sin(atan(y/x)) / (sqrt(2)*y) * (xy); const off = asin(sinOff) * 180 / PI; const angle = 45 - off; const refAngle = atan(y/x) * 180 / PI; console.log(angle, refAngle); Tenga en cuenta que, dado que la fórmula es tan compleja, estoy usando la desestructuración para reducir las Math. desorden.