sf::Text alignment problem

[alseether]

Hi, like thousand people here, i'm trying to make a button with a text centered inside.
I've been searching in the forum some solutions, but it seems useless for me.
The thing is, i,ve decided to center my text using the getLocalBounds() function.
Basically, this is my code:

int diffX = rect.width - txt.getLocalBounds().width;
int diffY = rect.height - txt.getLocalBounds().height;
float posX = rect.left + diffX / 2.f;
float posY = rect.top + diffY / 2.f;
       
txt.setPosition(sf::Vector2f(posX, posY));
txt.setColor(sf::Color::White);
 

Were rect is the rectangle of the button and txt is (obviously) my text.
I calculate de difference between both sizes and i set the text position leaving the half of the difference on each side.
The problem is that the bounding box of the text it's perfectly aligned, but text isn't.

This is how it looks:



(Note: i'm not sure if i'm uploading the image properly)
(Note2: sorry about ortography, i'm not English)

Thanks.

[Laurent]

float posX = diffX / 2.f - rect.left;
float posY = diffY / 2.f - rect.top;

?

[alseether]

That will result a negative number.

I think the problem have to be something related with the character size, or maybe the glyph.
I neither understand why the Y alignment it's ok but the X one not.

Thanks

[Laurent]

That will result a negative number.

Are you sure? Maybe my formula is incorrect, I don't have the time to test it, but I'm pretty sure that yours is incorrect too
Take a paper and draw the rectangles involved with their coordinates, the solution should be trivial.

I think the problem have to be something related with the character size, or maybe the glyph.

No, it has to do with incorrect usage of top coordinate of local bounding rect. Character size / glyphs / whatever are taken in account in the computation of the local bounds. All you have to deal with are the local bounds.

I neither understand why the Y alignment it's ok but the X one not.

Because local_bounds.top is not zero, unlike local_bounds.left.

[alseether]

I've tested your solution and the text doesn't appear. Will be better if i explain a little more the code.

The variables diffX and diffY are only the difference between sizes, for example, in a button with (200,100) size
and a text with a bounding box with (160, 60), the text should left 20 pixels on each side.

In the image, the bounding box and the text are positioned in the same coordinates, but i don't know why the text isn't inside the box.

[Laurent]

I know what your code does, the formula for centering a box inside another is quite common

The text isn't inside the box because it has a non-zero top coordinate. What it means is that is will appear offseted by local_bounds.top pixels below its position (the one given with setPosition). That's why you have to subtract local_bounds.top from its position.

[zsbzsb]

Formula for centering something within something else is really simple.

Code: [Select]

X = (ContainerWidth / 2) - (ObjectWidth / 2)
... and of course the same for Y
Y = (ContainerHeight / 2) - (ObjectHeight / 2)
So here is an example using SFML.

sf::Vector2f txtSize(txt.getLocalBounds().width, txt.getLocalBounds().height);
sf::Vector2f containerSize(rect.width, rect.height);

txt.setPosition((containerSize / 2f) - (txtSize / 2f));

// now if your container (rect) is at a non zero position...
// you just need to add the position of your container to your final centered position

sf::Vector2f containerPosition(rect.left, rect.top);

txt.setPosition((containerSize / 2f) - (txtSize / 2f) + containerPosition);

[Laurent]

Well, you're doing the exact mistake that he's trying to avoid, by not using txt.getLocalBounds().top...

[zsbzsb]

Well, you're doing the exact mistake that he's trying to avoid, by not using txt.getLocalBounds().top...

What?? My code doesn't use that at all......... 

[Laurent]

... and it should.