Fabricjs 2.0 How to set underline to substring of the Textbox

Question

I have Textbox with text "This is test textbox", i want to set underline to only word "test" not the whole textbox text. How do i set underline to the substring?

fabricjs issue

var canvas = new fabric.Canvas('c');

var underlineText = new fabric.Textbox("This is test textbox", {
  underline: true,
});

canvas.add(underlineText);

canvas {
    border: 1px solid #999;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="1000" height="500"></canvas>

As 2.0 is not ready yet for docs and examples, one thing that changed is that textDecoration has been removed. In place we have: .underline, .overline, .linetrought each of them with a true or false. issue

Thanks. Any help will be appreciated.

score 3 · Accepted Answer · answered Aug 29 '18 at 11:06

I disagree that 2.0 is not ready for docs and examples. Docs and examples from 1.0 have been converted and some more added.

Said so, that i know nothing has to do with the question, all Text classes in fabricJS have a setSelectionStyle method that take a style object and a start and end index as argume nts.

http://fabricjs.com/docs/fabric.Text.html#setSelectionStyles

So calling:

myText.setSelectionStyles({ underline: true }, 2, 4);

Should set underline to the text char in position 2, 3 and 4.

Fabricjs 2.0 How to set underline to substring of the Textbox

1 Answers1