javascript - 将 Meteor 与高级 SVG 或 Canvas 输出结合使用的模式

Question

将 Meteor 用于主要不是基于 HTML 的响应式(Reactive)数据显示是否明智？

具体来说，我想将图形数据库显示为一组由线连接的框。我希望允许与这些框进行实时交互，我也希望它们是响应式(Reactive)的，因此如果一个用户编辑数据，当前查看该图表的任何其他用户的显示都会更新。

Meteor 的 react 性似乎很好，但我发现的大多数示例都集中在 HTML 模板或非常简单的 API 交互上，以执行诸如向 map 添加图钉之类的操作。

我目前正在考虑使用 SVG 或 Canvas 来显示图形数据库，但我非常不确定如何最好地将它与 Meteor 和/或其他一些库(例如 D3)集成。

Answer 1

我发现 Meteor 与 canvas 完美配合，我不知道我所做的是否是最佳实践，但我使用 Kinetic.js 获得了最佳结果(可通过“mrt install kineticjs”用于 Meteor，我使用模板引擎调用在我的 Canvas 上设置元素的函数，这是我用来将玩家放置在我的 map 上的代码的一个小例子:

模板:

<template name="canvas_map">
<div id="grid_map" class="grid"></div>
{{#with clear_canvas}}
    {{#each human}}
        {{handle_member_pos}}
    {{/each}}
{{/with}}

“clear_canvas”助手设置一个新的 Kinetic.Stage，“handle_member_pos”助手获取一个人体对象并将其放置在所述 Canvas 上。

这里是助手(coffeescript):

     Template.canvas_map.clear_canvas = =>
        if Session.get('init')
            kinetic_elements.stage = new Kinetic.Stage
                container: 'grid_map'
                width: 385
                height: 375
            kinetic_elements.layer = new Kinetic.Layer()
        else
            false
 Template.canvas_map.handle_member_pos = ->
        [x, y] = pos_to_str @profile.pos
        left = Math.floor(11 * x)
        top = Math.floor(11 * y)
        name = @profile.name
        unless kinetic_elements.avatars[name]?
                imageObj = new Image()
                imageObj.onload = =>
                    element = new Kinetic.Image
                        x: left
                        y: top
                        image: imageObj
                        width: 50
                        height: 50
                    element.on 'click', (evt) =>
                        Session.set 'selected', @profile._id
                        window.propogation = false
                        false
                    kinetic_elements.layer.add element
                    kinetic_elements.avatars[name] = [element, text]
                    kinetic_elements.stage.add kinetic_elements.layer
                imageObj.src = 'human.png'
            else
                element = kinetic_elements.avatars[name]
                layer = kinetic_elements.layer
                element.setX left
                element.setY top
                layer.draw()
        return

正如我所说，我不确定这是否是最佳做法，但它对我很有用，希望这能以任何方式提供帮助。