如何用svg.js製作Ember組件？

我與Ember的工作，我已經看到了這樣寫的組件：如何用svg.js製作Ember組件？

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

不過，我希望創建一個使用svg.js畫布，它只能使用DOM上繪製灰燼成分。所以，我想要做的是

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

有沒有什麼辦法與Ember做到這一點？

注意：我需要svg.js來保留它對SVG元素的引用，這樣我就可以在不重繪整個圖像的情況下給它們着色[需要很長時間才能渲染]。我認爲這阻止了我簡單地將元素串化爲緩衝區，但可能不會...

來源

2014-01-15 quantumkayos

如果您只想通過svg.js操作DOM樹，則必須避免在屬性更改時調用Em.Component.render（）並只調用svg.js相關的函數。

我猜你需要開始是這樣的：http://jsbin.com/AfEQoQo/4/edit

簡短說明： 首先，在您的自定義Em.Component實現，你需要準備簡單的模板和初始化didInsertElement灰燼svg.js .Component回調在某種程度上是這樣的：

// 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。希望這可以幫助。

來源

2014-01-18 13:10:06

如何用svg.js製作Ember組件？

回答

相關問題