마우스 키네틱 js로 돌림

Question

많은 예제를 보았지만 지금까지 아무 것도 작용하지 않았습니다. 원이 mousemove에서 회전하고 원 중심으로 회전하기를 원하기 때문에 지금까지 문제가 없습니다. 그러나 무대의 절반을 통과하면 180도 뛰게됩니다. 무대의 절반을 지나기까지 모든 것이 잘되어있어서 분명히 뭔가 빠져 있습니다. Math.atan2는 나에게 오류를 준다 : 원이 무대의 (0,0)으로 점프한다.

정말 도움이되도록 도와주세요.

미리 감사드립니다.

new Kinetic.Tween({ 
    node: cGrad1, 
    x: stage.getWidth()/2, 
    y: stage.getHeight()/2, 
    duration: 1, 
    opacity:1, 
    easing: Kinetic.Easings.EaseInOut 
}).play(); 

clickO.on('mousemove', function() { 
    for(var n = 0; n < 16; n++) { 
    var shape = cGradlayer1.getChildren()[n]; 
    var stage = shape.getStage(); 
    var mousePos = stage.getMousePosition(); 
    var x = mousePos.x - shape.getPosition().x; 
    var y = mousePos.y -shape.getPosition().y ; 
    var degree = (Math.PI)+(Math.atan(y/x)); 

    shape.setAttrs({ 
     rotation: degree 
    }) 
    cGradlayer1.draw() 
    } 
}) 

Answer 1

당신은 다음과 같이 트윈의 x와 y 위치를 설정해야 할 수 있습니다

new Kinetic.Tween({ 
    x: mousePos.x, 
    y: mousePos.y, 
    node: shape, 
    rotation: degree, 
    easing: Kinetic.Easings.EaseInOut, 
    duration:1, 
}).play(); 

는 참조 http://www.html5canvastutorials.com/kineticjs/html5-canvas-stop-and-resume-transitions-with-kineticjs/

Answer 2

이 자습서를 참조하십시오 그럼이 내가 해낸되며, 잘하면 그것은 당신이 찾고있는 것과 가깝습니다 : jsfiddle

기본적으로 회전시키고 자하는 각도를 계산하려면 두 점을 저장해야합니다 :

1. (가) 마우스의 좌표 모양의 원점 (중심 좌표)
2. 당신이, 당신은 삼각 함수의 조금으로 두 점 사이의 각도를 계산 할 수있는 일단

을 클릭 (만약 내가 정확하지 않다면 죄송합니다. Trigonometry는 나의 강한 소송이 아닙니다.) 두 점 (dx, dy) 사이의 거리를 계산 한 다음 trig 수식을 사용하여 각도를 각도로 찾으십시오.

layer.on('click', function() { 
    var mousePos = stage.getMousePosition(); 
    var x = mousePos.x; 
    var y = mousePos.y; 
    var rectX = rect.getX()+rect.getWidth()/2; 
    var rectY = rect.getY()+rect.getHeight()/2; 
    var dx = x - rectX; 
    var dy = y - rectY; 
    var rotation = (Math.atan2(dy, dx)*180/Math.PI+360)%360; 

    var rotateOnClick = new Kinetic.Tween({ 
    node: rect, 
    duration: 1, 
    rotationDeg: rotation, 
    easing: Kinetic.Easings.EaseInOut 
    }); 
    rotateOnClick.play(); 
}); 

편집 :

내 바이올린을 업데이트 한 (나는이 같은 결론에 도달) 아래 수집 된 정보를 기반으로 : jsfiddle

마르크이 코멘트에 아래에 언급 한 바와 같이, KineticJS는 "강제 시계 방향 플래그"를 지원하지 않으므로 360도지나 시계 방향으로 회전하거나 0 시계 반대 방향으로 회전 할 때 항상 회전이 점프됩니다. 그렇지 않으면 회전이 제대로 작동한다는 것을 알고 있습니다.

그래서 수동으로 우리가 고려해야 할 이가지 경우가이 문제를 해결하려면 :

1. 우리가 시계 방향으로 360지나 회전
   .
2. 시계 반대 방향으로 0을 지나칠 때.

그리고 이것이 내가 회전 여부에 대응하기 위해 여부를 계산하는 데 사용되는 수학입니다 :

var currentDeg = rect.getRotationDeg(); 

var oneWay = rotation - currentDeg; 
var oneWayAbsolute = Math.abs(rotation - currentDeg); 
var otherWay = 360-oneWayAbsolute; 

if (otherWay < oneWayAbsolute) { 
    //Take the other way 
    if (oneWay > 0) { 
     //Clicked direction was positive/clockwise 
     var trueRotation = currentDeg - otherWay; 
    } else { 
     //Clicked direction was negative/counter clockwise 
     var trueRotation = currentDeg + otherWay; 
    } 
} else { 
    //Take the clicked way 
    var trueRotation = rotation; 
} 

은 기본적으로 우리가 회전하는 방법을 알아 내야 할을, 각도도를 비교하여 어느 방향 것의 더 가까이에, 우리가 클릭 한 방향으로, 또는 그 반대 방향으로.우리가 otherWay이 (음수) 또는 시계 방향으로 우리가 클릭 방향이 시계 반대 방향에 있다면 우리가 볼 필요는 currentDeg에 가까운이었다 (양의) 방향, 우리가 갈 수있는 otherWay 방향을 설정하는 것이 결정되면

반대 방향으로.

그리고 rotationDegonFinish 이벤트를 정규화 할 수 있습니다.

var rotateOnClick = new Kinetic.Tween({ 
    node: rect, 
    duration: 1, 
    rotationDeg: trueRotation, 
    easing: Kinetic.Easings.EaseInOut, 
    onFinish: function() { 
     trueRotation = (trueRotation+360)%360; 
     rect.setRotationDeg(trueRotation); 
     layer.draw(); 
    } 
});