Question

我正在使用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元素的引用，这样我就可以在不重绘整个图像的情况下对它们进行着色[需要很长时间才能渲染]。我认为这禁止我简单地将元素串行化为缓冲区，但也许不是......

Answer 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中的一些观察者来触发它。希望这会有所帮助。

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

1 个答案: