Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fabric.Text.scaleToWidth seemingly not working as intended in 1.7.6 #3719

Closed
fisyher opened this issue Feb 19, 2017 · 4 comments · Fixed by #3745
Closed

fabric.Text.scaleToWidth seemingly not working as intended in 1.7.6 #3719

fisyher opened this issue Feb 19, 2017 · 4 comments · Fixed by #3745

Comments

@fisyher
Copy link

fisyher commented Feb 19, 2017

I have the following code where I want to scale a text object to a certain max width if it is too long. It works in fabric 1.7.3 but fails in fabric 1.7.6, where the text simply disappear.

var canvas = new fabric.StaticCanvas('mycanvas',{
height: 845, width: 1340
});
canvas.backgroundColor = '#000000';
var maxWidth = 500;
var text = "Some long text, the quick brown fox jumps over the lazy dog etc...";
var shortText = "Hello There.";
var textObject = new fabric.Text(text, {
            fill: "#ffffff",
            fontSize: 25,
            fontFamily: "Times New Roman"
        });

var currTextWidth = textObject.width;
if(currTextWidth >  maxWidth){
    textObject.scaleToWidth(maxWidth); //Works in 1.7.3 but fails in 1.7.6
}

canvas.add(textObject);
canvas.renderAll();

I then tried to fiddle with my own code when using 1.7.6 and found that performing a relative scale works for my need:

var currTextWidth = textObject.width;
if(currTextWidth >  maxWidth){
    textObject.scaleToWidth(maxWidth/currTextWidth ); //Works in 1.7.6 but fails in 1.7.3
}

Why is this the case? The behavior in 1.7.6 seems rather strange. Could this be a bug?

@asturur
Copy link
Member

asturur commented Feb 19, 2017

would you post a fiddle that just fails on jsfiddle.net? one failing is enough, i do not need to see the working version with 1.7.3

@fisyher
Copy link
Author

fisyher commented Feb 20, 2017

Hi, here is jsfiddle link:
https://jsfiddle.net/tvwn4y76/

@asturur
Copy link
Member

asturur commented Feb 21, 2017

Found the bug:
when a textObject is created, the width is unknown.
For every property set that influence dimensions setCoords get calculated.
When width is calculated setCoords does not get called again.

When is time to use getBoundingRect if setCoords is not called manually, it uses the cached coordinates that are wrong.

Now there are 2 or 3 ways to fix this, i have to choose which one is best.

Thanks for spotting this bug.

@asturur
Copy link
Member

asturur commented Feb 21, 2017

Oh, for now, just call text.setCoords BEFORE calling scaleToWidth

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants