是否可以使用fabricjs i-text添加兩個以上的樣式？

Question

我正在製作簡單的photoshop網頁並使用fabricjs。 我用我的文本來使文本編輯功能。

代碼

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>

可以使用的iText的styles財產。第一級是行號，第二級表示字符串的索引。