Pixi.js: How to set PIXI.text width and height to automatic

Created on 17 Aug 2018  ·  8Comments  ·  Source: pixijs/pixi.js

How to set PIXI.text width and height to automatic, similar to the initialization height and height will automatically change with fontSize size.The problem I encountered was that after I set PIXI.text width and height, I want to set its width and height to be automatic..

Stale 💾 v4.x (Legacy) 🤔 Question

All 8 comments

the font size are accessible in the text objet like this if you not have scoped a new PIXI.TextStyle()

const txt = new PIXI.Text("myText");
txt.style.fontSize = 100;

or if you have scoped you style

const style = new PIXI.TextStyle();
const txt = new PIXI.Text("myText",style);

// hack style after do stuff
style.fontSize = 10;

Can you please show a visual example of what you want to do? “width and height to be automatic” does not make sense to me. Whenever you set the text or change the font size, text is redrawn at the new size. Do you wan to constrain the text to automatically adjust the fontSize to fill and area?

@bigtimebuddy @djmisterjon
First create a pixi object.Then set fontSize, the width and height of txt will change with the size of fontSize.

const txt = new PIXI.Text("myText");
txt.style.fontSize = 100;

After setting the width and height,I want to keep the width and height automatically by resetting instead of recreating a pixi Object.

txt.width = 200;
txt.height = 100;

What I want is an effect similar to the following, although I know that the writing is wrong.

txt.width = 'auto';
txt.height = 'auto';

Thanks for the two responses.
Thank you very much, look forward to your solution

Ahhh, I think I understand. The default behavior of Text is to automatically adjust the width and height. After you manually set width or height, you want to use to the automatically resizing behavior but there's no clear way how to do this through the API.

Any thoughts @themoonrat?

http://jsfiddle.net/kvy3bj2h/28/

const app = new PIXI.Application(300, 300);
document.body.appendChild(app.view);
const txt = new PIXI.Text('short', {
    fill: 0xffffff
});
txt.width = app.screen.width;
txt.height = app.screen.height;
txt.scale.set(1);
txt.text = "blah blah blah long";
app.stage.addChild(txt);

Expected

image

Actual

image

@bigtimebuddy That's just how all of PIXI sprites work, not just text.

add this just after the bunny sprite is created on https://pixijs.io/examples/#/basics/basic.js

bunny.width = app.screen.width;
bunny.height = app.screen.height;

bunny.scale.set(1);

You'll see the exact same thing. Once a sprite's width or height has been set manually (giving values to internal _width and _height properties) you can never then 'unset' them.

Ok,maybe I should try other ways to realize the demand,thanks both.

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.

while(txtF.width>maxWidth) txtF.style.fontSize--;

Was this page helpful?
0 / 5 - 0 ratings

Related issues

distinctdan picture distinctdan  ·  3Comments

YuryKuvetski picture YuryKuvetski  ·  3Comments

lunabunn picture lunabunn  ·  3Comments

softshape picture softshape  ·  3Comments

Darker picture Darker  ·  3Comments