11

何かが欠けているかもしれませんが、Meteor の「魔法」は、データを DOM 要素にバインドし、ハンドルバーを介してテキストと HTML フラグメントを更新することを中心に展開しているようです: http://docs.meteor.com/#reactivity

これは素晴らしいことですが、ライブ データを <canvas> 要素に表示する流星アプリを作成しようとすると、ライブ データが変更されたときにキャンバスを更新する「流星の方法」がわかりません。これは、キャンバスが JS を介して入力されるためです。次のようなコード:

var g = canvas.getContext('2d')
g.fillRect(x, y, w, h)

HTML テンプレートのデータ付きテキストではありません。

Meteor.Collection のデータを使用してキャンバスに描画しようとしています。

私の唯一の考えは、キャンバス描画 JS コードを HTML テンプレートのハンドルバー変数で設定されたスクリプト タグに埋め込むことでしたが、流星のイベントとデータ バインディング コードは既にクライアント側の JS であるため、これは間違っているようです。

HTML要素/テキストの代わりにJSを介してキャンバス上で描画をトリガーするライブデータの変更をリッスンする方法はありますか?

何らかの方法で質問を明確にすることができるかどうか教えてください

更新: 以下の Tom の回答により、リアクティブなコンテキストで任意のコードを実行できるように見える Meteor.deps に気付きました: http://docs.meteor.com/#on_invalidate

私はこれを試して、うまくいったらここで更新します。

4

3 に答える 3

7

おそらく、あなたの質問に対する答えは、Collection.observe（http://docs.meteor.com/#observe）を使用して、さまざまなコールバックで関連する再描画コードをトリガーすることです。

たとえば、次のようなものです。

Rectangles.observe({
  added: function(rect) {
    var g = canvas.getContext('2d');
    g.fillRect(rect.x, rect.y, rect.w, rect.h);
  },
  // etc
})
于 2012-05-29T07:12:02.823 に答える
5

これは機能します：

var Shapes = new Meteor.Collection('shapes')

if (Meteor.is_client) {
  // Function that redraws the entire canvas from shapes in Meteor.Collection
  function drawShapes() {
    var shapes = Shapes.find({})
    shapes.forEach(function(shape) {
      // draw each on canvas
    })
  }

  var startUpdateListener = function() {
    // Function called each time 'Shapes' is updated.
    var redrawCanvas = function() {
      var context = new Meteor.deps.Context()
      context.on_invalidate(redrawCanvas) // Ensures this is recalled for each update
      context.run(function() {
        drawShapes()
      })
    }
    redrawCanvas()
  }

  Meteor.startup(function() {
    startUpdateListener()
  })
}
于 2012-05-29T17:10:07.330 に答える
1

キャンバスの更新に問題があったので、この簡単なゲームのデモを作成しました: https://github.com/randompast/Meteor-SimpleGame

于 2014-11-30T16:00:32.683 に答える