将流星与高级SVG或Canvas Ouput结合使用的模式 [英] Pattern for using Meteor with advanced SVG or Canvas Ouput

问题描述

将Meteor用于不是主要基于HTML的反应性数据显示是否明智?

Is it sensible to use Meteor for a reactive data display that isn't primarily HTML based?

具体来说，我想将图形数据库显示为一组由线连接的盒子.我希望允许与这些框进行实时交互，并且也希望它们具有反应性，因此，如果一个用户编辑数据，则当前正在查看图形的任何其他用户的显示都会更新.

To be specific, I want to display a graph database as a set of boxes connected by lines. I'd like to allow live interaction with these boxes, and I'd also like them to be reactive, so if one user edits the data the display of any other users currently viewing the graph will update.

流星对于反应性来说似乎很棒，但是我发现的大多数示例都集中在HTML模板或非常简单的API交互上，以进行诸如在地图上添加图钉之类的事情.

Meteor seems great for the reactivity, but most of the examples I've found focus on either HTML templates or very simple API interactions for doing things like adding a pin to a map.

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

I am currently thinking about using SVG or Canvas to display the graph database, but I am very unsure how best to integrate that with Meteor and/or some other library like maybe D3.

推荐答案

我发现Meteor与画布完美配合，我不知道我的工作是否是最佳实践，但我使用Kinetic.js取得了最佳效果(可通过"mrt installeticjs"用于Meteor，并且我使用模板引擎调用在画布上设置元素的函数，这是我用来将玩家放置在地图上的代码的一个小示例:

I found that Meteor works perfectly with canvas, I don't know if what I do is the best practice but I got the best results using Kinetic.js (available for Meteor via "mrt install kineticjs" and I use the template engine to call on functions that set up the elements on my canvas, this is a small example of a code I use to place the players on my 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"帮助程序获取了一个人类对象并将其放置在上述画布上.

the "clear_canvas" helper sets up a new Kinetic.Stage and the "handle_member_pos" helper gets a human object and places it on said canvas.

这是助手(咖啡):

     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

正如我所说，我不确定这是否是最佳做法，但对我来说很有用，希望这对您有帮助.

as I said, I'm not sure if that is the best practice, but it works great for me, hope this helps in any way.

这篇关于将流星与高级SVG或Canvas Ouput结合使用的模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！