Search code examples
javascriptfabricjs

Fabricjs Textbox make the text shrink to fit

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 :

enter image description here

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

Solution

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