How to find Node width?

Cocos Creator
#1

I know how to find Node width but it’s not working properly.
When I add cc.Label component in a Node and try to update ‘String’ value then Node’s width auto changes based on string width but Node width only changes on 2nd update…

How to get Node width immediately after adding cc.Label

var n = new cc.Node();
n.addComponent(cc.Label);
n.getComponent(cc.Label).string = "OK";
otherNodeInScene.addChild(n);
console.log(n.width); //will be 0;

//on 2nd update of otherNodeInScene n node will have updated width equal to content width of string

how I can access immediately the value of width correctly?
how Node adapts it’s width according to cc.Label component string value?

#2

Hello,

When you create a new node, you instanciate it with default values. In your case there are no width / height yet. New components does not affect the size of a node. Creating new childs to a node wwill not affect the size.

Because a label is a component, It does not have a size property or some sort. You will need to calculate the string size on your own. and than apply it to the parent node.

You may want to use the following method to calculate text size:

var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);
ctx.font = “30px Arial”;
var txt = “Hello World”
ctx.fillText(“width:” + ctx.measureText(txt).width, 10, 50)
ctx.fillText(txt, 10, 100);

#3

Thanks measureText may solve the issue.

#4

You can set all the properties of the label and execute it once

label._updateRenderData(true);

take the frame to get the size

#5

Looks like a better solution than mine… :slight_smile:

#6

Thanks it works :slight_smile:

#7

Hi, would you explain what you mean by take the frame and get the size?
I tried this solution, but my width is still 0

    const digitNode = new cc.Node('Digit');
    const digitLabel = digitNode.addComponent(cc.Label);

    digitLabel.lineHeight = this.lineHeight;
    digitLabel.fontSize = this.fontSize;
    digitLabel.font = this.bitmapFont;
    digitLabel.string = digit;

    this.node.addChild(digitNode);
    digitLabel._updateRenderData(true);
    this.digits.push(digitLabel);
    cc.log(digitNode.width); // logs are 0
#8

Your code does not add string variables to the Label component, so its width is 0.

1 Like
#9

digitLabel.string = digit; This line adds a string variable (digit is a defined variable ex.‘999’)

#10

I can’t repeat you problem? Can you provido me with a demo?

#11

Try making it a string
digitLabel.string = 'digit';

#12

LabelWidthIssue.zip (898.2 KB)
Hi,
here is a small test project, where the width of my labels is still 0 after calling the _updateRenderData function. Sorry for late reply.

#13

@Khachatur, try giving at least one frame to the engine’s game loop do its internal stuff. I suggested the following in another similar topic:

const node = cc.find("/Canvas/New Node");
cc.log(node.width); // 100 units (the initial size that I defined in design time).
const label = node.addComponent(cc.Label);
label.string = "TestString";
this.scheduleOnce(() => {
    cc.log(node.width); // Here it has been updated to 177.85 units.
});