0

Meteor と KineticJS を試しています。私がやろうとしているのは、形状を作成し、ステージ上でマウスをクリックする方向に移動することです。接続されているすべてのクライアントを更新できるように、位置を mongoDB に保存する必要があります。

私はまだ遠くに行っていませんが、これは私が持っているものです。基本的に、次の 2 つのことを行う方法が必要です。

  1. ステージ上のマウス クリックに向かって形状を移動させ、そこに到達したときに停止させるにはどうすればよいですか?
  2. 以下で試した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();
    });
  });

}
4

1 に答える 1

2

  1. これを行うにはトゥイーンを使用します。オブジェクトをつかみ、マウスの位置を取得し、そのマウスの位置にノードの Tween をオンmousedownまたは作成します。click

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

});

    JSFiddle

    注:をlayer クリッカブルにするには、ステージの幅と高さのサイズの透明な四角形をレイヤーに追加する必要があります。Kinetic.Rect私が作った名前のjsfiddleを見てくださいvar bg

  2. アニメーションの中にチェックを入れるとうまくいきますか?

    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);
于 2013-07-19T18:25:34.477 に答える