如何从旋转度中找到x，y？
如何从旋转度中找到x，y？
提问于 2022-10-01 23:57:08
得到新X，Y的公式是什么？
如果我有前驱X，Y和想要的角度旋转到。
这些行总是从0开始，然后转到X，Y
function calcNewPoints(x, y, degree) {
return {x: something, y: something}
}我试过了，但没有发现任何简单的东西(只有很难的数学)
据我所见，如果总是从0开始，它的意思是，线在圆内，x和y是三角形的高度和宽度，
但还是不明白
console.clear();
const input = document.querySelector("input[type=range]");
const line = document.querySelector("#line");
const span = document.querySelector("span");
input.addEventListener("input", (e) => {
const result = `${Math.round(e.target.value) - 90}deg`;
line.style.rotate = result;
span.textContent = Math.round(e.target.value);
});<script src="https://cdn.tailwindcss.com"></script>
<body class="h-screen grid place-items-center">
<label class="fixed top-4">
<input type="range" min="0" max="360" value="0" class="w-60" />
<span></span>
</label>
<div id="line" class="bg-red-500 h-1 w-20 origin-[center_left] relative before:absolute before:right-0 before:bg-blue-500 before:h-3 before:w-3 before:bottom-[50%] before:translate-y-[50%] before:rounded-xl"></div>
</body>
在这个例子中，我想找到蓝点x，y。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-10-02 03:13:11
使用旋转-formulars，您可以使用这个度来计算新x和y的位置。
遗憾的是，英语wiki页面并没有以简单的方式提供它。
To rotate it counter-clockwise by α:
x1 = x * cos(α) - y * sin(α)
y1 = x * sin(α) + y * cos(α)
And clockwise:
x1 = x * cos(α) + y * sin(α)
y1 = -x * sin(α) + y * cos(α)
Note: By multiplying the radiant with -1 you get the same result.
const input = document.querySelector("input[type=range]");
const line = document.querySelector("#line");
input.addEventListener("input", (e) => {
let angle = parseFloat(e.target.value, 10),
r = parseFloat(getComputedStyle(line).width, 10);
const result = `${angle}deg`;
line.style.rotate = result;
const
x = parseFloat((r * Math.cos(angle * Math.PI / 180)).toFixed(5), 10),
// y must be inverted as it rotates clockwise by default
y = -1 * parseFloat((r * Math.sin(angle * Math.PI / 180)).toFixed(5), 10),
// test value, rotated by 90° clockwise
rot = rotateByDegrees(x, y, 90);
output.value = `α:${angle % 360}°\nx:${x} y:${y}\nx1:${rot.x} y1:${rot.y}`;
});
function rotateByDegrees(x, y, degree, roundTo = 5, invert = false) {
const radiant = (invert ? 1 : -1) * degree * Math.PI / 180,
cos = Math.cos(radiant),
sin = Math.sin(radiant),
// round a bit to get rid of numbers like 4...-e15
round = (n) => parseFloat(n.toFixed(roundTo), 10);
return {
x: round(x * cos - y * sin),
y: round(x * sin + y * cos),
}
}
input.dispatchEvent(new Event("input"));<script src="https://cdn.tailwindcss.com"></script>
<body class="h-screen grid place-items-center">
<label class="fixed top-4" style="width: 100vw;">
<input type="range" min="0" max="360" value="270" class="w-80" /><br>
<output id="output" style="white-space: pre-wrap;"></output>
</label>
<div id="line" class="bg-red-500 h-1 w-20 origin-[center_left] relative before:absolute before:right-0 before:bg-blue-500 before:h-3 before:w-3 before:bottom-[50%] before:translate-y-[50%] before:rounded-xl"></div>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73922517
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号