Fabric.js How to resize IText horizontally without stretching the text

Question

I have this IText object within a parent Group object.

When I select the Group and resize it horizontally (and vertically as well) the IText resizes as well which makes the text Strech and look awfull.

Now what I would like to do is have the IText center itself (keeping its aspect ratio) within the Group.

How can I do that. I tried modifying the Width and Left of the IText when the object is scaling, but that did not work.

Answer 1

try use latest fabricjs version ( 1.6.0.rc1 ) and instead of using fabric.IText use fabric.Textbox.

This new class has the properties you are looking for, the controls normally used for scaling are instead used for resizing the element and the text flows inside it.

Answer 2

I was not able to make the latest fabric.Textbox work exactly like I wanted.

Luckily, I found a way of making the fabric.ITextcenter horizontally when the parent fabric.Group is resized horizontally and also make the same fabric.IText Text grow in size based on the vertical resize. No ugly text stretch.

Here is the solution:

https://jsfiddle.net/t44wyday/46/