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

【问题标题】：How to Create html table like structure using fabric js?如何使用fabric js创建类似结构的html表格？
【发布时间】：2017-03-13 09:45:31
【问题描述】：

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

【问题讨论】：

标签： javascript angularjs html html5-canvas fabricjs

【解决方案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
    const dataUri = `data:image/svg+xml;base64,${window.btoa(svgData)}`;
    const img = new Image();
    img.onload = () => {
        var imgInstance = new fabric.Image(img, {
            left: 0,
            top: 0,
            width: 300,  
            height: 200,  
        });

        canvas.add(imgInstance);
        canvas.renderAll();
    };
    img.src = dataUri;

【讨论】：