Question

我可能会遗漏一些东西，但似乎Meteor的“魔力”围绕着将数据绑定到DOM元素，并通过把手更新文本和HTML片段：http://docs.meteor.com/#reactivity

这很好，然而，在尝试编写一个在＆lt; canvas＆gt;中显示实时数据的流星应用程序时元素，当实时数据发生变化时，我无法弄清楚更新我的画布的“流星方式”，因为画布是通过JS代码填充的，如：

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

而不是HTML模板中的数据支持文本。

我正在尝试使用来自Meteor.Collection的数据在画布上绘图。

我唯一的想法是在由车把变量填充的脚本标签中将画布绘制的JS代码嵌入到HTML模板中，但这似乎是错误的，因为meteor的事件和数据绑定代码已经是客户端JS。

是否有某种方式可以监听实时数据更改，这会触发通过JS而不是HTML元素/文本在画布上绘图？

如果我能以某种方式澄清问题，请告诉我

更新 Tom的回答让我注意到Meteor.deps，它看起来允许在被动上下文中执行任意代码： http://docs.meteor.com/#on_invalidate

如果有效的话，我会试试这个并在这里更新。

Answer 1

也许您的问题的答案是使用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
})

Answer 2

这有效：

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

Answer 3

我在更新画布时遇到了一些麻烦，所以我创建了这个简单的游戏演示： https://github.com/randompast/Meteor-SimpleGame

Meteor - 使用订阅数据自动更新画布？

3 个答案: