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

百般思念 提交于 2019-12-12 08:04:38

问题


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.


回答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.




回答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/



来源:https://stackoverflow.com/questions/35026324/fabric-js-how-to-resize-itext-horizontally-without-stretching-the-text

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!