旋转一个不断变化的原点- Javascript
Rotate around a changing origin - Javascript
我有一个围绕原点旋转的物体。一旦我旋转,然后改变原点。我的对象似乎在跳位置。跳跃后,它旋转得很好……需要帮助找到模式/为什么它在跳,我需要做什么来阻止它。
这是旋转代码:
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项目,你可以在里面玩一下,让你更好地了解发生了什么。
EDITED LINK -去掉了原始bug和缩放bughttps://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;
相关文章:
- 单击页面上的链接后高度发生变化
- React redux初始化功能,无论状态变化如何
- 角度ng变化或ng点击选择can'不起作用
- 每个选择器的Jquery css颜色都在变化,但字体大小却没有变化
- JS幻灯片与CSS背景颜色变化
- 重新加载页面时Javascript变量发生变化
- 如何获得Bootstrap Datepicker的年和月,因为它在变化
- 如何用jquery替换字符串中可能变化的字符
- CORS:访问控制允许原点不等于提供的原点
- 检测数据的变化
- 如何检测和打印变化变量LESS
- 当文本不断变化时,如何避免在按钮内移动文本
- 当数据库中的某些内容发生变化时调用HTTP方法Meteor.js
- jQuery将侦听器的大小调整为只触发宽度的变化
- 根据元素高度和宽度的百分比变化增加或减少字体大小
- 调用$.each()函数时上下文发生变化
- 本地跨原点数据错误
- 创建一个不断变化的谷歌涂鸦风格的标题
- D3轴原点根据其尺度范围变化
- 旋转一个不断变化的原点- Javascript