Fabric js将HTML代码转换为IText

Question

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

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

我已阅读过文档，但找不到任何内容......

我试过这个没有结果：

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

Answer 1

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

<强> 样本

＆＃13;

＆＃13;

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

＆＃13;

canvas {
  border: 1px solid #999;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;