如何使用SVG.invent（）創建自定義svg.js元素？

我只是不明白。 Documentation說明如何創建帶圓角的自定義的矩形，但是我應該如何創建，例如，一些文本的矩形內，就像這樣：如何使用SVG.invent（）創建自定義svg.js元素？

+---------+ 
|   | 
| Hello | 
|   | 
+---------+

好了，這是很清楚，我可能需要創建一個group然後把一個矩形和文本放在它裏面，但是當我嘗試以某種不同的方式做到這一點時，我什麼也沒有顯示。

我想創造的東西，是這樣的：

var draw = SVG('container'); 
var element = draw.customElement('hello').move(100, 100);

來源

2017-05-25 M.Voloskov

要大家誰都有同樣的問題：我已經找到了解決方案。那就是：

SVG.CustomElement = SVG.invent({ 
    create: 'g', // (1) 
    inherit: SVG.G, // (2) 
    extend: { 
     constructorMethod: function() { 
      // (3) 
      this.rect(100, 100).fill('red'); 
      this.text('Hello').move(25, 25); 
      return this; 
     } 
    }, 
    construct: { 
     customElement: function() { // (4) 
      return this.put(new SVG.CustomElement).constructorMethod(); 
     } 
    } 
});

而這裏的定義是：

這裏去實際SVG元素標籤，而不是抽象svg.js。例如，g將以<g></g>等出現。我的解決方案因此而失敗。
這裏是繼承自svg.js類。這些類可以在文檔中找到，例如，組是SVG.G。
我決定把構造方法的權利放在元素上，但這不是必須的。正如usage notes所述，構造不提供構造函數，而是可能調用構造函數的方法。
這裏需要將DOM元素放置到需要的位置。您可以調用您定義的任何其他方法。我使用constructorMethod，但我當然可以使用，例如，constructorMethod().move(100, 100)或只是move(100, 100)或任何其他常規svg.js元素操作序列，只要我有這樣的方法定義。

來源

2017-05-26 15:09:31

注意，'create'也可以是一個被執行的函數。在這種情況下，您需要確保您調用了超級構造函數（SVG.G），在這種情況下'g'-node被正確創建。之後，你可以在你的'constructorMethod'中使用它 – Fuzzyma

根據我在這裏接受的答案另一個例子註釋：這裏的功能傳遞給create其作爲構造函數對象

SVG.CustomElement = SVG.invent({ 
    create: function() { 
     SVG.G.call(this) // call super constructor 
     this.rect(100, 100).fill('red'); 
     this.text('Hello').move(25, 25); 
    }, 
    inherit: SVG.G, 
    construct: { 
     customElement: function() { 
      return this.put(new SVG.CustomElement); 
     } 
    } 
});

注意。在它中，我們首先調用超級構造函數來初始化形狀（創建節點，設置默認值...）。之後我們可以正常使用this

來源

2017-05-31 11:54:08 Fuzzyma

如何使用SVG.invent（）創建自定義svg.js元素？

回答

相關問題