旋转鼠标动能JS(rotate to mouse kinetic js)

我看了很多例子，但到目前为止没有奏效。我想圈内的鼠标移动旋转，它旋转中心，所以没有问题为止。但是，它确实当我通过舞台的一半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:

嗯，这就是我想出了，并希望它靠近你正在寻找：的jsfiddle

基本上，计算要旋转的角度，我们需要存储两点：

形状的原点（中心坐标）
鼠标点击的坐标

一旦你的，你可以用三角学的一点点计算两个点之间的夹角（很抱歉，如果我不准确这里，三角是不是我的强项）。计算这两个点之间的距离(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

如MARKE评价如下所述，KineticJS不支持“力顺时针标志”，所以旋转在顺时针方向上在逆时针方向转动位置过去的360时，或过去的0总是跳跃。否则，我们知道，旋转正常工作。

因此，要解决这个手动有两种情况，我们需要考虑：

当我们转过360顺时针方向。
当我们转过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方向相反的方向走。

然后你就可以规范化rotationDeg onFinish事件。

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();
    }
});

Answer 2:

您可能需要设置吐温的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/