ファブリックjsを使用してhtmlテーブルを作成する方法は？

Question

私はvertabeloに似たスキーマビルダーを構築しようとしています。私は相互作用のためにfabric.jsを使用しています。どのように私は、画像に示すように列とその型を追加することができます構造のようなHTMLテーブルを作成することができます。

Answer 1

以下に示すと、画像にそれをCONVERファブリックオブジェクトとしてそれを使用するようにSVG内部

使用HTMLテーブル

var svgData = '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">' + 
      '<foreignObject width="100%" height="100%">' + 
      '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:30px">' + 
      '<table border="1"><thead><tr><td>Title</td></tr></thead><tbody><tr><td>Id</td><td>char</td></tr></tbody></table>' + 
      '</div>' + 
      '</foreignObject>' + 
      '</svg>'; 

    // creating image from svg 
    var DOMURL = window.URL || window.webkitURL || window; 
    var img = new Image(); 
    var svg = new Blob([svgData], {type: 'image/svg+xml'}); 
    var url = DOMURL.createObjectURL(svg); 
    img.src = url; 

    var imgInstance = new fabric.Image(img, { 
     left: 0, 
     top: 0, 
     width: 200, 
     height: 100, 
    }); 
    canvas.add(imgInstance);