javascript - 是否可以使用fabricjs i-text 添加两种以上的样式？

Question

我正在制作简单的 Photoshop 网页并使用 Fabricjs。我使用 i-text 来实现文本编辑功能。

代码

var newText = new fabric.IText("Elegant Living",{
  fontWeight: 400,
  fontSize:28,
  fill: "rgb(200,200,0)",
  name: "text"
});

有没有办法做出类似下图的效果？

Answer 1

var canvas= new fabric.Canvas('c');
var newText = new fabric.IText("Elegant Living",{
  left:50,
  top:50,
  fontWeight: 600,
  fontSize:28,
  styles: {
        0: {
          0: { fill: '#9ba9b4' },
          1: { fill: '#9ba9b4' },
          2: { fill: '#9ba9b4' },
          3: { fill: '#9ba9b4' },
          4: { fill: '#9ba9b4' },
          5: { fill: '#9ba9b4' },
          6: { fill: '#9ba9b4' },
          
          8: { fill: '#b31706' },
          9: { fill: '#b31706' },
          10: { fill: '#b31706' },
          11: { fill: '#b31706' },
          12: { fill: '#b31706' },
          13: { fill: '#b31706' },
          
        },
      },
  name: "text"
});
canvas.add(newText)

canvas {
 border:2px dotted blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>
<canvas id='c' width=400 height=400></canvas>

您可以使用styles iText 的属性。其中第一级是行号，第二级表示行中字符的索引。