Welcome, Guest. Please login or register. Did you miss your activation email?

Author Topic: Align the text perfectly centered inside any shape  (Read 481 times)

0 Members and 1 Guest are viewing this topic.

nktsrbrkv

  • Newbie
  • *
  • Posts: 5
    • View Profile
Align the text perfectly centered inside any shape
« 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?
« Last Edit: May 11, 2024, 10:20:08 pm by nktsrbrkv »

kimci86

  • Full Member
  • ***
  • Posts: 127
    • View Profile
Re: Align the text perfectly centered inside any shape
« Reply #1 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.

nktsrbrkv

  • Newbie
  • *
  • Posts: 5
    • View Profile
Re: Align the text perfectly centered inside any shape
« Reply #2 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?

kojack

  • Sr. Member
  • ****
  • Posts: 332
  • C++/C# game dev teacher.
    • View Profile
Re: Align the text perfectly centered inside any shape
« Reply #3 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.


eXpl0it3r

  • SFML Team
  • Hero Member
  • *****
  • Posts: 10916
    • View Profile
    • development blog
    • Email
Re: Align the text perfectly centered inside any shape
« Reply #4 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();
    }
}
 
Official FAQ: https://www.sfml-dev.org/faq.php
Official Discord Server: https://discord.gg/nr4X7Fh
——————————————————————
Dev Blog: https://duerrenberger.dev/blog/

Hapax

  • Hero Member
  • *****
  • Posts: 3370
  • My number of posts is shown in hexadecimal.
    • View Profile
    • Links
Re: Align the text perfectly centered inside any shape
« Reply #5 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());
;)
Selba Ward -SFML drawables
Cheese Map -Drawable Layered Tile Map
Kairos -Timing Library
Grambol
 *Hapaxia Links*

nktsrbrkv

  • Newbie
  • *
  • Posts: 5
    • View Profile
Re: Align the text perfectly centered inside any shape
« Reply #6 on: May 15, 2024, 07:14:24 pm »
Many thanks for all of your replies!