Meteor 将kineticJS中的形状移向鼠标单击

我正在试验流星和KineticJS。我想做的是创建一个形状，然后在舞台上用鼠标点击移动它。该位置应保存到mongoDB，以便更新所有连接的客户端

我还没走多远，但这就是我得到的。我基本上需要一种方法来做两件事：

如何使形状朝着舞台上的鼠标点击移动 到了那里就停下来

有没有更好的检查方法 形状的当前位置，而不是我创建的gameLoop 在下面试过吗？这是可行的，但感觉不对

谢谢大家!

//client.js code

var player = null;
var playerAnim = null;

Template.container.rendered = function () {

  var myCanvas = document.getElementById('myCanvas');
  var stage = new Kinetic.Stage({
        container: myCanvas,
        width: 1024,
        height: 1024
      });

      var layer = new Kinetic.Layer();

      // add the layer to the stage
      stage.add(layer);

      // add click listener for the stage
      $(stage.getContent()).on('click', function(evt) {
        //stage was clicked

        //Find the player shape in the database
        Players.find().forEach(function (dbShape) {
        player = new Kinetic.RegularPolygon(dbShape);

        // setup an animation to move the player to the right
          playerAnim = new Kinetic.Animation(function(frame) {

          var velocity = 50;
          var dist = velocity * (frame.timeDiff / 1000);
          player.move(dist, 0);
          Players.update(dbShape._id, {$set: {x: player.attrs.x, y: player.attrs.y}});
          }, layer);

          playerAnim.start();        
          layer.add(player);
          layer.draw();
        });
      });

    //make a gameLoop to check the position and stop the animation
    Meteor.setInterval(function(gameLoop){          
      if(player.attrs.x > 500){
        playerAnim.stop();
      }
    },  500);

    Meteor.autosubscribe(function () {
    // clear the canvas
    if (layer) {
      layer.removeChildren();
      layer.clear();
    }
    // populate the canvas with the Shapes collection
    Players.find().forEach(function (dbShape) {
      var player = new Kinetic.RegularPolygon(dbShape);

      layer.add(player);
      layer.draw();
    });
  });

}

我会用tween来做这个。抓取您的对象，获取鼠标位置，然后在

mousedown

或

上单击

为您的节点创建一个到该鼠标位置的Tween

layer.on('mousedown', function() {
    var mousePos = stage.getMousePosition();
    var tween = new Kinetic.Tween({
    node: rect,
    duration: 1,
    x: mousePos.x,
    y: mousePos.y,
    opacity: 1,
    strokeWidth: 6,
    scaleX: 1.5
  }).play();

});

注意：要使

层

可点击，我们需要在层中添加一个带有舞台宽度和高度大小的透明矩形。请参见JSFIDLE中的

Kinetic.Rect

I make named

var bg

把支票放在动画里对你有用吗

playerAnim = new Kinetic.Animation(function(frame) {
   var velocity = 50;
   var dist = velocity * (frame.timeDiff / 1000);
   player.move(dist, 0);
   Players.update(dbShape._id, {$set: {x: player.attrs.x, y: player.attrs.y}});

   if(player.getX() > 500){
     this.stop();
   }
}, layer);

---

如果目标（鼠标单击）位置变化很快，或者其位置对游戏至关重要，则在游戏循环中移动形状。如果没有，您可以使用Tween来移动形状（Tween很有用，因为它们是火和遗忘）。谢谢您的回答。我最初考虑使用Tween，但我希望使用moveBy参数，在这里我可以输入速度。对于当前动力学吐温，只指定了一个持续时间，因此吐温的速度随距离而变化。我想这很容易用一些简单的数学来解决。哈哈，是的，不幸的是速度不是Tween的属性。但是，如果你知道你想要移动的速度，如果你知道时间或距离，那么你可以计算另一个：v=d/t（简单物理！）