如何在Javascript中计算二维旋转
如何在Javascript中计算二维旋转
提问于 2013-07-02 02:04:16
我不太熟悉三角函数，但我只有两个点可以在2D中旋转：
*nx, ny
. -
. -
. angle -
*cx,cy.................*x,ycx，cy =旋转中心
x，y=当前x，y
nx，ny =新坐标
如何在某个角度计算新的点？
回答 5
Stack Overflow用户
回答已采纳
发布于 2013-07-02 02:31:02
function rotate(cx, cy, x, y, angle) {
var radians = (Math.PI / 180) * angle,
cos = Math.cos(radians),
sin = Math.sin(radians),
nx = (cos * (x - cx)) + (sin * (y - cy)) + cx,
ny = (cos * (y - cy)) - (sin * (x - cx)) + cy;
return [nx, ny];
}前两个参数是中心点(第二个点将绕其旋转的原点)的X和Y坐标。接下来的两个参数是我们要旋转的点的坐标。最后一个参数是角度，以度为单位。
例如，我们将取点(2，1)，并将其绕点(1，1)顺时针旋转90度。
rotate(1, 1, 2, 1, 90);
// > [1, 0]关于此函数的三点注意事项：
- 对于顺时针旋转，最后一个参数
angle应为正。对于逆时针旋转(就像您提供的图表中那样)，它应该是负的。 - 注意，即使您提供的参数应该产生一个坐标为整数的点--即将点(5，0)绕原点(0，0)旋转90度，这应该会产生(0，-5) -- JavaScript的舍入行为意味着，任何一个坐标仍然可能是一个令人沮丧地接近预期整数的值，但仍然是一个浮点数。例如：
旋转( 0，0，5，0，90)；// > 3.061616997868383e-16，-5
因此，结果数组的两个元素都应该是一个浮点数。您可以使用Math.round()、Math.ceil()或Math.floor() as needed.
- Finally，将它们转换为整数。请注意，此函数假定为Cartesian coordinate system，这意味着Y轴上的值随着您在坐标平面中的“向上”而变得更高。在HTML / CSS中，Y轴是反转的--当您向下移动页面时，Y轴上的值变得更高。
Stack Overflow用户
发布于 2013-07-02 02:15:48
首先，将旋转中心转换为origin
- Calculate新坐标(nx，ny)
- 转换回原始旋转中心
步骤1
你的新观点是
- 中心：(0，0)
- 点：(x-cx，y-cy)
步骤2
- nx = (x-cx)*cos(theta) - (y-cy)*sin(theta)
- ny = (y-cy)*cos(theta) + (x-cx)*sin(theta)
步骤3
平移回原始旋转中心：
- nx = (x-cx)*cos(theta) - (y-cy)*sin(theta) + cx
- ny = (y-cy)*cos(theta) + (x-cx)*sin(theta) + cy
要获得更深层次的解释，请参阅this。
Stack Overflow用户
发布于 2018-04-03 21:40:30
上面被接受的答案对我不起作用，旋转是颠倒的，这里是工作函数
/*
CX @ Origin X
CY @ Origin Y
X @ Point X to be rotated
Y @ Point Y to be rotated
anticlock_wise @ to rotate point in clockwise direction or anticlockwise , default clockwise
return @ {x,y}
*/
function rotate(cx, cy, x, y, angle,anticlock_wise = false) {
if(angle == 0){
return {x:parseFloat(x), y:parseFloat(y)};
}if(anticlock_wise){
var radians = (Math.PI / 180) * angle;
}else{
var radians = (Math.PI / -180) * angle;
}
var cos = Math.cos(radians);
var sin = Math.sin(radians);
var nx = (cos * (x - cx)) + (sin * (y - cy)) + cx;
var ny = (cos * (y - cy)) - (sin * (x - cx)) + cy;
return {x:nx, y:ny};
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17410809
复制相关文章
相似问题
腾讯云开发者
