, 나는 성공적으로 운동 JS를 사용하여 선을 그릴 수 있었다

Question

키네틱 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(); 

는 내가 입력 한 다시 점의 동일한 배열을 그만 둘. 나는 회전 된 점의 절대 좌표 좌표를 유도 할 수 있는지 알아보기 위해 오프셋과 변환을 시도했지만 아무런 운이 없었습니다. 누구든지 실제 번역 된 값을 추출 할 수 있습니까?

Answer 1

죄송합니다. 회전은 포인트 값을 실제로 변환하지 않으므로 올바른 결과가 나옵니다. 변환 된 값을 원할 경우 좌표를 계산하는 함수를 작성해야합니다. 좋은 점은 당신이해야 할 모든 가치를 가지고 있다는 것입니다. 회전 각도, 좌표 및 점 주위의 회전.

나는이 정말 자극적 인 동작입니다 (원점 주위 회전) 방정식

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

Answer 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; 
};