Fabric js 将 HTML 代码转换为 IText

【问题标题】：Fabric js convert HTML code to ITextFabric js 将 HTML 代码转换为 IText
【发布时间】：2018-04-10 15:26:05
【问题描述】：

可以在fabric.js 中将此 HTML 代码转换为 IText：

<p>Hello <strong>John!</strong></p>

我已经阅读了文档，但我找不到任何东西......

我试过了，没有结果：

var text = canvas.add(new fabric.IText('<p>Hello <strong>John!</strong></p>', {}));

【问题讨论】：

标签： fabricjs

【解决方案1】：

没有内置解析器。您需要使用元素的文本内容并使用IText 的styles 属性应用不同的样式。

演示

var canvas = new fabric.Canvas('c');
var text = new fabric.IText('Hello John!', {
  fontSize: 20,
  styles: {
    0: {
      6: {
        fontWeight: 'bold'
      },
      7: {
        fontWeight: 'bold'
      },
      8: {
        fontWeight: 'bold'
      },
      9: {
        fontWeight: 'bold'
      },
      10: {
        fontWeight: 'bold'
      },
    }
  }
})
canvas.add(text);

canvas {
  border: 1px solid #999;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<p>Hello <strong>John!</strong></p>
<canvas id="c" width="300" height="300"></canvas>

【讨论】：