0
204
VisualizaçõesCalculate 45 degree to point to left top corner of the page
Im trying to point the red div towards the corner of the window using transform rotate.
The Yellow is 45deg fixed, just for reference.
The Blue points to the left top corner using the innerHeight and innerWidth as points.
And the Red trys to mimic the Blue by calculating 45 + some offset, it must aways have the same rotation as the Blue but without using innerHeight and innerWidth as points.
This is the closest i got of makeing it work was using this code:
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>Using the code as example, calc must always have the same value of a but using 45 deg as reference.
1 Respostas
Responde à pergunta0
Of course as you show in your question, the simplest approach is to use the atan(y/x) * 180 / PI to get the entire angle. This is reflected below as refAngle.
Since your condition requires that it be an offset of 45 degrees, this requires more advanced math, using the law of sines in addition to basic trigonometry. We have enough information based on the ratio of width/height of the screen to find the information, but it ends up being a very complex formula. This is reflected below in two steps, first sinOff to get the sine of the offset angle relative to 45 degrees, and then off once we've done the asin and conversion from radians to degrees.
This snippet demonstrates that the two angles agree, no matter how the browser window is resized.
const x = window.innerWidth;
const y = window.innerHeight;
const { sin, atan, asin, sqrt, PI } = Math;
const sinOff = sin(atan(y/x)) / (sqrt(2)*y) * (x-y);
const off = asin(sinOff) * 180 / PI;
const angle = 45 - off;
const refAngle = atan(y/x) * 180 / PI;
console.log(angle, refAngle);Note, since the formula is so complex, I'm using destructuring to reduce the Math. clutter.