是否可以使用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

＆＃13;

＆＃13;

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)

＆＃13;

canvas {
 border:2px dotted blue;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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