所以我有一个围绕原点旋转的对象。一旦我旋转然后更改原点。我的对象似乎跳跃位置。跳跃后它旋转得很好......需要帮助找到模式/为什么它跳跃以及我需要做什么来阻止它。
这是旋转代码:
adjustMapTransform = function (_x, _y) {
var x = _x + (map.width/2);
var y = _y + (map.height/2);
//apply scale here
var originPoint = {
x:originXInt,
y:originYInt
};
var mapOrigin = {
x:map.x + (map.width/2),
y:map.y + (map.height/2)
};
//at scale 1
var difference = {
x:mapOrigin.x - originPoint.x,
y:mapOrigin.y - originPoint.y
};
x += (difference.x * scale) - difference.x;
y += (difference.y * scale) - difference.y;
var viewportMapCentre = {
x: originXInt,
y: originYInt
}
var rotatedPoint = {};
var angle = (rotation) * Math.PI / 180.0;
var s = Math.sin(angle);
var c = Math.cos(angle);
// translate point back to origin:
x -= viewportMapCentre.x;
y -= viewportMapCentre.y;
// rotate point
var xnew = x * c - y * s;
var ynew = x * s + y * c;
// translate point back:
x = xnew + viewportMapCentre.x - (map.width/2);
y = ynew + viewportMapCentre.y - (map.height/2);
var coords = {
x:x,
y:y
};
return coords;
}
这里还有一个 JS Fiddle 项目,你可以在里面玩,让你更好地了解正在发生的事情。
编辑链接 - 摆脱了 originY 错误和缩放错误
https://jsfiddle.net/fionoble/6k8sfkdL/13/
谢谢!
最佳答案
旋转方向是您为旋转矩阵中的元素选择的符号的结果。 [这是二维旋转的罗德里格斯公式]。因此,要沿相反方向旋转,只需减去 y 余弦项而不是 y 正弦项。
您也可以尝试查看数据的不同潜在表示。
如果您使用点之间的线的对称表示,则可以避免移位,而只需变换坐标即可。
将您的原点 [相对于您的旋转] c_0 设为对称形式的恒定偏移量。
你有一个点 p 相对于 c_0:
var A = (p.x - c_0.x);
var B = (p.y - c_0.y);
//This is the symmetric form.
(p.x - c_0.x)/A = (p.y - c_0.y)/B
这将在坐标变化和线上的任何点(它还负责缩放/膨胀)下成立。
然后在改变旋转坐标之后你有[注意这个旋转有相反的意义,和你的不一样]。
//This is the symmetric form of the line incident on your rotated point
//and on the center of its rotation
((p.x - c_0.x) * c + (p.y - c_0.y) * s)/A = ((p.x - c_0.x) * s - (p.y - c_0.y) * c)/B
所以,乘以我们得到
(pn.x - c_0.x) * B * c + (pn.y - c_0.y) * B * s = (pn.x - c_0.x) * A * s - (pn.y - c_0.y) * A * c
重排给出
(pn.x - c_0.x) * (B * c - A * s) = - (pn.y - c_0.y) * (B * s + A * c)
pn.y = -(pn.x - c_0.x) * (B * c - A * s) / (B * s + A * c) + c_0.y;
对于任何缩放。
关于javascript - 围绕不断变化的原点旋转 - Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30580685/