Fabricjs Textbox make the text shrink to fit

Question

I would define a text box (single-line)

By default, with a character size of 16 (for example)

When the text gets bigger than the text box, I do not want it to wrap or the text box gets bigger, I want the text size to fit the maximum size of the text box. text. When the text returns to a smaller size, it can resume its initial size (in our example 16). Possibly manage a minimum size

If you have an idea, I take :)

thanks in advance

Test Case : http://jsfiddle.net/Da7SP/273/

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

// ADD YOUR CODE HERE
var canvas = window._canvas = new fabric.Canvas('c');
var t1 = new fabric.Textbox('My Text', {
    width: 200,
    top: 5,
    left: 5,
    fontSize: 16,
    textAlign: 'center'
});

var t2 = new fabric.Textbox('My text is longer, but I do not want the box to grow, or the text to wrap. I only want the text to fit the available size', {
    width: 200,
    height: 200,
    top: 250,
    left: 5,
    fontSize: 16,
    textAlign: 'center'
});



canvas.add(t1);
canvas.add(t2);

A small video to explain what I want :

When the text gets bigger than the text box, I want the text size fit the maximum size of the text box.

Did you find a solution to your problem? The one marked below as the correct answer doesn't hold a size for the text. It adds another line when multiple words are typed @neopheus — FabricioG, Sep 05 '18 at 17:54

score 31 · Accepted Answer · answered Dec 26 '16 at 18:37

31

This is a basic fiddle that can replicate your idea. The point is that you have an event that fires on every text change and that can be used to do something before the textbox is rendered.

In this case i m shrinking font size based on a non standard parameter i added to textbox called fixedWidth

// ADD YOUR CODE HERE
var canvas = new fabric.Canvas('c');
var t1 = new fabric.Textbox('MyText', {
    width: 150,
    top: 5,
    left: 5,
    fontSize: 16,
    textAlign: 'center',
    fixedWidth: 150
});

canvas.on('text:changed', function(opt) {
  var t1 = opt.target;
  if (t1.width > t1.fixedWidth) {
    t1.fontSize *= t1.fixedWidth / (t1.width + 1);
    t1.width = t1.fixedWidth;
  }
});

canvas.add(t1);

canvas {
    border: 1px solid #999;
}

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

answered Dec 26 '16 at 18:37

AndreaBogazzi

14,323
3
38
63

Thanks @AndreaBogazzi ;) – neopheus Dec 27 '16 at 07:43
1

But do you know disable auto wrap in TextBox ? Thank you – neopheus Dec 27 '16 at 07:44
if you do not need autowrap switch to Itext. there is no way to disable it since only reason textbox was made is to enable word wrapping – AndreaBogazzi Dec 27 '16 at 08:37
I need to have a fixed size area like TextBox. Is it possible to add the management of the fixed size area to IText ? Thank you – neopheus Dec 28 '16 at 11:41
2

What if they when user decrease the text then it should come to normal – Bhupendra Jadeja Jul 31 '19 at 13:41
@AndreaBogazzi, can you please enter a text with space (lets say "Add My Text") and see what happens? – Code_Ninja Aug 19 '20 at 05:55
that wraps. is that bad? – AndreaBogazzi Aug 19 '20 at 10:45
Textbox also handles textAlign differently than IText.... So having a solution where the text doesn't wrap in Textbox would be nice. Otherwise applying it to IText can work but one must also figure out how to handle textAlgin differently too – Jeff Sheets Jul 14 '21 at 18:22

score 3 · Answer 2 · answered Jul 14 '21 at 21:12

Here's a similar answer to https://stackoverflow.com/a/41335051/1469525 but this example modifies the fontSize up to a maxFontSize (the initial fontSize). This allows the text to shrink and then grow back to the original size, as well as preventing line wraps.

(Note, if you use this, you'll have to find a way to prevent the user from using the enter key. I put in a check that basically cancels it if an enter key is detected. My app actually has a separate form to enter the text, so I can control prevention through normal javascript. I'm not quite sure how to do that directly on a canvas element when it is editable like here...)

var canvas = new fabric.Canvas('c');
var t1 = new fabric.Textbox('MyText', {
    width: 150,
    top: 5,
    left: 5,
    fontSize: 16,
    textAlign: 'center',
    maxFontSize: 16,
});

canvas.on('text:changed', function(opt) {
  var t1 = opt.target;
  if (t1.text.match(/[\r\n]/)) return;

  t1.set({
    fontSize: t1.maxFontSize,
  });
  while (t1._textLines.length > 1) {
    t1.set({
      fontSize: t1.fontSize - 1,
    });
  }
});

canvas.add(t1);

canvas {
    border: 1px solid #999;
}

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

Fabricjs Textbox make the text shrink to fit

2 Answers2

Linked