SFML community forums

Help => Graphics => Topic started by: nktsrbrkv on May 11, 2024, 10:18:06 pm

Title: Align the text perfectly centered inside any shape
Post by: nktsrbrkv on May 11, 2024, 10:18:06 pm
Hello everyone!

I have a set of different shapes like rectangles, circles, etc., and I need to align the text associated with each shape perfectly in the center of the shape. I wrote the following algorithm to determine offsets for the x and y axes respectively:
sf::Text text = shape.getText();
float textOffsetX = (shape.getShape()->getGlobalBounds().width - text.getGlobalBounds().width) / 2;
float textOffsetY = (shape.getShape()->getGlobalBounds().height - text.getGlobalBounds().height) / 2;
text.setPosition(shapeOffsetX + textOffsetX, shapeOffsetY + textOffsetY);
As a result, the text inside each shape is perfectly aligned horizontally but wrong vertically. Please find the screenshot in attachments. I do not know how I can put it here :-[

My shapes are moving, so in addition to text offsets, there are also shape offsets. It does not have to matter. I have also tried two more ways, but the result is the same:
1.
sf::Text text = shape.getText();
float textOffsetX = (shape.getShape()->getGlobalBounds().width - text.getGlobalBounds().width) / 2;
auto glyph = text.getFont()->getGlyph(text.getString()[0], text.getCharacterSize(), false);
float textOffsetY = (shape.getShape()->getGlobalBounds().height - glyph.bounds.height) / 2;
text.setPosition(shapeOffsetX + textOffsetX, shapeOffsetY + textOffsetY);
2.
sf::Text text = shape.getText();
float textOffsetX = (shape.getShape()->getGlobalBounds().width - text.getGlobalBounds().width) / 2;
float textOffsetY = (shape.getShape()->getGlobalBounds().height - text.getCharacterSize()) / 2;
text.setPosition(shapeOffsetX + textOffsetX, shapeOffsetY + textOffsetY);

Could you please help me with this question?
Title: Re: Align the text perfectly centered inside any shape
Post by: kimci86 on May 12, 2024, 01:43:36 am
You are making a copy of the text object. Setting the position on the copy has no impact on the original object.
Title: Re: Align the text perfectly centered inside any shape
Post by: nktsrbrkv on May 12, 2024, 10:01:28 am
Thank you for bringing that to my attention. I fixed this. Now I return a reference to the sf::Text object instead. However, the problem in my algorithm is still present. Although this alignment looks good, it is not ideal. Maybe I should attach a screenshot?
Title: Re: Align the text perfectly centered inside any shape
Post by: kojack on May 12, 2024, 11:45:27 am
Did you also make the text variable a reference?
You need getText() to return a reference and sf::Text text; to be sf::Text& text;
Otherwise text will be a copy of the referenced object.

Title: Re: Align the text perfectly centered inside any shape
Post by: eXpl0it3r on May 13, 2024, 08:32:39 am
To center text, you also need to consider its local bounds, for example like this:

#include <iostream>
#include <SFML/Graphics.hpp>

int main()
{
    auto window = sf::RenderWindow{{800, 600, 32}, "SFML Window"};
    window.setFramerateLimit(60);

    auto font = sf::Font{};
    if (!font.loadFromFile("OpenSans.ttf"))
    {
        std::cerr << "Could not load font\n";
        return -1;
    }

    auto rectangle = sf::RectangleShape{ {300.f, 100.f} };
    rectangle.setOutlineThickness(1.f);
    rectangle.setOutlineColor(sf::Color::Green);
    rectangle.setPosition({ 200.f, 200.f });
    rectangle.setFillColor(sf::Color::Transparent);

    auto text = sf::Text{ "Test 1234", font };
    text.setOrigin(text.getGlobalBounds().getSize() / 2.f + text.getLocalBounds().getPosition());
    text.setPosition(rectangle.getPosition() + (rectangle.getSize() / 2.f));

    auto globalBounds = text.getGlobalBounds();
    auto localBounds = text.getLocalBounds();

    std::cout << "(" << globalBounds.left << ", " << globalBounds.top << ") (" << globalBounds.width << ", " << globalBounds.height << ")\n";
    std::cout << "(" << localBounds.left << ", " << localBounds.top << ") (" << localBounds.width << ", " << localBounds.height << ")\n";

    while (window.isOpen())
    {
        for (auto event = sf::Event{}; window.pollEvent(event);)
        {
            if (event.type == sf::Event::Closed)
            {
                window.close();
                return 0;
            }
        }

        window.clear();
        window.draw(rectangle);
        window.draw(text);
        window.display();
    }
}
 
Title: Re: Align the text perfectly centered inside any shape
Post by: Hapax on May 13, 2024, 10:52:52 pm
    text.setOrigin(text.getGlobalBounds().getSize() / 2.f + text.getLocalBounds().getPosition());
 
I think these should both be local bounds. i.e.:
text.setOrigin(text.getLocalBounds().getSize() / 2.f + text.getLocalBounds().getPosition());
;)
Title: Re: Align the text perfectly centered inside any shape
Post by: nktsrbrkv on May 15, 2024, 07:14:24 pm
Many thanks for all of your replies!