如何使用 svg.js 制作 Ember 组件？答案

【问题标题】：How to make an Ember component with svg.js?如何使用 svg.js 制作 Ember 组件？
【发布时间】：2014-01-15 12:58:21
【问题描述】：

我正在使用 ember，我见过这样写的组件：

App.ExampleComponent = Ember.Component.extend({
    render: function (buffer) {
        //Push strings to the buffer
    }
});

但是，我希望创建一个使用 svg.js 在画布上绘制的 ember 组件，它只能使用 DOM。所以，我想做的是

App.ExampleComponent = Ember.Component.extend({
    render: function (element) {
        var canvas = SVG(element);
    }
});

有没有办法用 Ember 做到这一点？

注意：我需要svg.js 来保留它对 SVG 元素的引用，这样我就可以在不重绘整个图像的情况下为它们着色[这需要很长时间才能渲染]。我认为这禁止我简单地将元素串入缓冲区，但也许不是......

【问题讨论】：

标签： javascript ember.js svg.js

【解决方案1】：

如果您只想通过 svg.js 操作 DOM 树，则必须避免在属性更改时调用 Em.Component.render() 并仅调用 svg.js 相关函数。

我猜你需要从这样的开始：http://jsbin.com/AfEQoQo/4/edit

简短说明： 首先，在您的自定义 Em.Component 实现中，您需要准备简单的模板并在 didInsertElement Ember.Component 回调中初始化 svg.js，如下所示：

// Create simple wrapper template for svg.js content
template: Em.Handlebars.compile('<div id="svg-wrapper"></div>'),

didInsertElement: function() {
  // Create and save the svg.js context for
  // later manipulations
  var draw = SVG('svg-wrapper');
  this.set('draw', draw);
}

之后，您已准备好 svg.js 上下文，并且可以通过渲染进一步处理。所以让我们来实现一些绘图：

svgRender: function() {
  // Manipulate your SVG dom tree here
  var draw = this.get('draw');
  draw.rect(50,50).fill('#f09');    
}

现在，您可以从上面实现的 init 调用此函数，也可以像我在jsbin example 中那样通过一些观察者触发它。希望这会有所帮助。

【讨论】：