无法从动力学JS系列中获得转换点

时间:2013-04-09 05:03:59

标签: rotation coordinates kineticjs transformation splines

我已经能够使用Kinetic JS成功绘制一条线,如下所示:

var track129 = new Kinetic.Spline({
points: [
{x: 3, y: 400}, 
{x: 196, y: 400}, 
{x: 213, y: 395}, 
{x: 290, y: 345},
{x: 319, y: 324},
{x: 389, y: 253},
{x: 457, y: 184},
{x: 471, y: 173},
{x: 481, y: 173},
{x: 682, y: 173}, // this is where the blue track branches to the red track (129, 009).
{x: 708, y: 171},
{x: 740, y: 186},
{x: 773, y: 218},
{x: 799, y: 240},
{x: 822, y: 251},
{x: 845, y: 254},
{x: 866, y: 251},
{x: 894, y: 238},
{x: 934, y: 204}        
],
stroke: 'blue',
strokeWidth: 2,
lineCap: 'round',
tension: .2
});

layer.add(track129);

然后我使用以下命令旋转线:

track129.setRotationDeg(45);

视觉显示更新。然后,我尝试将转换后的点从旋转的线中取出,如下所示:

var mySpleenPoints = track129.getPoints(); 

当我进入时,我最终得到了相同的点数。我试图获得偏移和翻译,以确定我是否可以推导出绝对值 旋转点的坐标,但我没有运气。任何人都可以帮我提取实际的翻译价值吗?

2 个答案:

答案 0 :(得分:2)

抱歉,旋转实际上并不转换点值,因此您可以获得正确的输出。如果需要翻译的值,则必须编写一个计算坐标的函数。好消息是,您拥有完成所需的所有价值观。旋转度,坐标和围绕点的旋转。

我认为这是等式(围绕原点旋转)

 x' = x * cos(Theta) - y * sin(Theta);
 y' = x * sin(Theta) + y * cos(Theta); 

HTML5 Canvas: Calculating a x,y point when rotated

https://math.stackexchange.com/questions/123098/finding-the-position-of-a-point-after-rotation-why-is-my-result-incorrect

答案 1 :(得分:2)

这是一种非常恼人的行为。无论如何,谢谢你的帖子。我正在为将来遇到此问题的任何人提供代码。

function degToRad(angle) {
return (angle / 180) * Math.PI;
}

function rotateVector ( v, center, angle ) {
var theta = degToRad(angle);        
var s = Math.sin(theta);

var c = Math.cos(theta);

var nx = c * (v.x -center.x) + center.x - s * (v.y - center.y);
var ny = s * (v.x - center.x) + c * (v.y - center.y) + center.y;

v.x = nx;
v.y = ny;

return v;
};