CODEWITHSUNDEEP
javascriptfabricjs
artgb
artgb

Reputation: 3233

Is it possible to add more than two styles using fabricjs i-text?

I am making simple photoshop webpage and use fabricjs. I used i-text to make text edit feature.

Code

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

Is there a way to make similar to below image?

enter image description here

Upvotes: 0

Views: 389

Answers (1)

Durga
Durga

Reputation: 15604

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>

You can use styles property of iText. Where first level is line number and second level indicate to index of char in line.

Upvotes: 1

Related Questions