如何使用fabric js创建类似结构的html表？

Question

我正在尝试构建类似于vertabelo的架构构建器。我正在使用fabric.js进行交互。如何创建html表格结构，我可以添加列及其类型，如图所示。

Answer 1

在svg中使用Html Table，如下所示，并将其转换为图像并将其用作结构对象

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);