Question

我看了很多例子，但到目前为止没有任何效果。我希望圆圈在鼠标移动时旋转并且它在中心旋转，所以到目前为止没有任何问题。但是，当我通过一半的舞台时，它会跳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)之间的距离，然后使用三角公式找到以度为单位的角度。

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

您可能需要按如下方式设置Tween的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/

旋转到鼠标动能js

2 个答案: