0
473
VistasCómo obtener la altura y el ancho del elemento cuando se gira
Como puedo obtener la posición del elemento desde el lado izquierdo de la pantalla usando e.getBoundingClientRect().left
Cuando queramos obtener la posición de los puntos finales, agregue ancho o alto según sea necesario, pero cómo obtener la posición de los puntos finales cuando se gira el elemento.
¿Es posible obtener valores?
let getBoxPos = document.querySelectorAll(".demo") let box1 = document.querySelector("#box1") let box2 = document.querySelector("#box2") let box3 = document.querySelector("#box3") let s = ""; function func() { getBoxPos.forEach(e => { let figXValue = e.getBoundingClientRect().left; s = Number(s) + Number(1); console.log("Start distance for box" + s + ":" + figXValue) }) console.log("End distance for box1:" + (box1.getBoundingClientRect().left + 24)); console.log("End distance for box3:" + (box3.getBoundingClientRect().left + 104)); console.log("Don't know the correct way for box2:Is it box2.getBoundingClientRect().left + 100 or box2.getBoundingClientRect().left + 20 or none of them "); } func(); .demo { height: 100px; width: 20px; margin-left: 40px; border: 2px solid black; } .demo:nth-child(2) { border: 2px solid red; transform: rotate(-45deg); } .demo:nth-child(3) { border: 2px solid green; transform: rotate(-90deg); } <div class="demo" id="box1"></div> <div class="demo" id="box2"></div> <div class="demo" id="box3"></div>1 Respuestas
Responde la pregunta0
Lo que sabemos: la Height , el width del elemento y el ángulo θ porque los elementos tienen animación o el elemento se transforma (gira)
Lo que no sabemos o necesitamos encontrar: Nuevo width y height del elemento después de la rotación
Si conocemos un ángulo y un lado (alto, ancho en este caso) del triángulo de ángulo recto, también podemos encontrar otros lados.
Para resolver un triángulo con un lado, también necesitas uno de los ángulos no rectos. Si no, es imposible:
- Si tienes la hipotenusa, multiplícala por sen(θ) para obtener la longitud del lado opuesto al ángulo.
- Alternativamente, multiplique la hipotenusa por cos(θ) para obtener el lado adyacente al ángulo.
- Si tienes el lado que no es hipotenusa adyacente al ángulo, divídelo entre cos(θ) para obtener la longitud de la hipotenusa.
- Alternativamente, multiplique esta longitud por tan(θ) para obtener la longitud del lado opuesto al ángulo.
- Si tienes un ángulo y el lado opuesto a él, puedes dividir la longitud del lado por sen(θ) para obtener la hipotenusa.
- Alternativamente, divida la longitud por tan(θ) para obtener la longitud del lado adyacente al ángulo.
Solo se proporciona un ángulo, pero otros se encuentran usando fórmulas y relaciones de ángulos.
Ahora, como la pregunta es: cómo obtener la posición del punto azul, tenemos que agregar esto al valor de la left
Height*Sinθ + Width*CosθEl código final se convierte en:
box2.getBoundingClientRect().left + Height*Sinθ + Width*CosθDebe incluir el borde también, si lo hay, en altura y ancho, si lo desea desde el borde del borde
Como señaló A Haworth , la rotación puede ser desde cualquier punto, por lo que verificó la compatibilidad para diferentes posiciones y parece compatible con la rotación desde cualquier punto hasta ahora.
>>El elemento se gira en un ángulo desde cualquier lugar.