How do I resize a textbox without zoom in/out text?

[OilPrince]

I am working on entering text into canvas using textbox.

If I create a textbox, type text, and increase the size of the textbox, it will increase to the size of the text, even though I have specified a text font size.

When I checked the properties of the textbox, the font size, width, and height of the textbox remain the same! I think that the scale(accurately, scale X and scale Y) are changed to display the textbox.

In order to keep the font size specified when using the textbox to increase the size of the textbox, we tried to set scaleX and scaleY to 1 for text:changed events or object:modified events and specify the actual length of the increased width and length. But the results were not very good.

When I change the size of the textbox by the mouse, how can I fix the font size without enlarging it?

How do I resize a textbox without zoom in/out text?

I need some good advice on this.

[linrz]

You can define some controls for textbox, it just change width or height, not scale it.

[OilPrince]

@linrz

Thank your guide!

As your guide, I try to do!
But I meet the strange situaion.
Although I change the width and height of the textbox, the only width of the textbox is changed and the height is decreased.

The jsfiddle URL is as followed:
https://jsfiddle.net/536spdzm/

When I input some text in the drawn textbox, the only width of the textbox is also changed and the height is decreased.

I'll wait for good idea to solve this problem!

[asturur]

Textbox is basically an IText with autowrapping funcionality.
In order to change size independently from text it requires some kind of changes that as today are available only with overrides.
If you look in closed issues there is some nearly full example on how to do it.

[OilPrince]

@asturur

Thank you for your answer!

You used the term autowrapping.

I understand 'autorapping' as a function that automatically resize the height of the textbox when entering the text or resizing the textbox.
(see https://jsfiddle.net/536spdzm/)

Please let me know which of the issues that I should see!

PS(#1) : My goal is to keep the textbox such as the square shape of MS Powerpoint. If I find the method to disable autowrapping, I can achieve my goal! I need your assist, @asturur!

PS(#2) : I can find the issue 'Breaking changes on 4.0.0-rc1: hard to overrides fabricJs #6494'!
This is my example as followed:

(download URL) https://bigmail2.nate.com/download/sid=-3&info=bf61f95cdca9682772dcd7b72f6f9b4afbee899da58a6df766d307697883d751fcc381928e22b92161e1adb4e11ee855830d3f743437f7238933da3c6a181701420673ed09ce00f19854c53d60079d31

This dowload file is the ZIP file including fabric.js(input the text //2020-12-23 in the cusomizing part) and ggg.html.

But the result is not good!
The height size suddenly decreases when I adjust the width and height size with mouse control or input the text.
In other words, the function 'autowrapping' is continuing.

I want you to show me an example of how to override!

[OilPrince]

No one's giving me any advice!
I'm very disappointed.

Fortunately, Google Search has obtained examples of override classes using rectangles and textboxes from stack overflow sites and implemented them perfectly.
(stackoverflow~ awesome! great! very very thanks!)

To be honest, the meaning of the override mentioned above was not accurate, and making it very difficult to implement it.

I think the biggest problem of fabricjs is "scale".

This can cause serious problems(such as the zooming text and so on). Because the scale is changed when the width/height of shapes(especially textbox) are changed by mouse control.
As a result, there were many difficulties in the process of overriding.

I think that fundamental improvement is needed to provide the better way to block scale changes when changing the width/height of fabricjs by mouse control.

I hope that you understand my suggestion well.
And I also hope that no one is in trouble like me.

I'll close this issue in a few days.

[asturur]

@OilPrince this question has been asked many times, and is answered in some other issue.
Textbox doesn't work as you want.
There is just a control to change the width of textbox, and you can build one, similarly, to change height and then combine them together for the corners.

Texbox will anyway reset width/heigth everytime you input text, and that is the part that requires an override.
Difficult or not, problematic or not, this is how it works.
Othere people have implemented it with success, so i imagine you can do too.

Just to repeat, the free form textbox isn't a fabric feature.
That is why is hard to do if you do not know the library very well, but is still doable.

Also, there are no people working on the library aside some hours spent in their free time.
With 217 open issues, divide 1 or 2 person by 217 and get a grasp of all the attention you can get.
This to answer your disappointment.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.