KineticJS : 회선 주위 회선

Question

회선을 KineticJS를 사용하여 회선 주변으로 회전하려고합니다. 그러나 선은 항상 원점을 중심으로 회전합니다. 이미 오프셋을 사용해 보았지만 작동하지 않았습니다.

검은 점은 일반적으로 위치를 지정할 수 있습니다. 회색 점을 검은 점 주위의 0과 360 사이의 각도로 회전 시키길 원합니다.

line.setPoints([{ 
    x: stage.getWidth()/2, 
    y: stage.getHeight()/2 
}, { 
    x: stage.getWidth()/2, 
    y: stage.getHeight()/2 - 30 
}]); 

line.transitionTo({ 
    rotation: angle, 
    duration: 1, 
    easing: 'ease-out' 
}); 

아이디어가 있으십니까?

나는 바이올린 제작 : http://jsfiddle.net/QuT4d/

Answer 1

http://jsfiddle.net/QuT4d/1/

그래서 당신의 위치를 ​​설정해야합니다을 당신의 라인에 갈 수 및 위치를 기준으로 점 설정 :

line = new Kinetic.Line({ 
     x: stage.getWidth()/2, // <--- right here 
     y: stage.getHeight()/2, // <--- and right here 
     points: [{ 
      x: 0, // <--- if you start at 0, you start at the above x: which is the center 
      y: 0 // <--- if you start at 0, you start at the above y: which is the center 
     }, { 
      x: 0, 
      y: 0- 30 
     }], 
     stroke: 'gray', 
     strokeWidth: 3 
    }); 

을 그것이 작동하지 않는다는 것이 아니라, 위치를 설정하고 점을 설정하여 화면에서 오브젝트를 실제로 그려 냈습니다. 전환 시간을 더 큰 숫자로 설정하고 화면에서 천천히 움직이는 것을 볼 때 이러한 현상이 발생할 수 있습니다.

또한 포인트를 다시 설정하거나 위치를 재설정 할 필요가 없습니다.