I'm trying to center some text in SFML. It doesen't really work though as you can see in the picture below.
Maybe something is wrong with my math?
void TextRenderer::renderCentered(sf::RenderWindow& window, std::string string, sf::Vector2f position, int size, sf::Color color) {
sf::Text text;
text.setFont(TextRenderer::kavoon);
text.setString(string);
float width = text.getLocalBounds().width;
text.setPosition(position.x - width / 2, position.y);
text.setCharacterSize(size);
text.setColor(color);
window.draw(text);
}
in render method:
TextRenderer::renderCentered(*window, pickuptext.str(), sf::Vector2f(player->sprite.getPosition().x, player->sprite.getPosition().y - 48), 28, sf::Color(255, 145, 61));
TextRenderer::renderCentered(*window, pickuptextdesc.str(), sf::Vector2f(player->sprite.getPosition().x, player->sprite.getPosition().y - 16), 18, sf::Color(255, 145, 61));
The formula for centering text horizontally within a bounding box is:
text_start = bounding_box_width / 2 - text_width / 2;
Looks like you may not be supplying the bounding box horizontal center point.
Related
I would like to make an application which includes rotation widget inside a circle. I started this with the AnalogClock example in qt. I wouldd like to rotate a quarter pie (quarter circle) instead of gauge. My problem is I cannot locate the pie in the center of my circle.
Below picture, I barely locate the pi in the center of circle but I would like to make the pi bigger than below picture.
enter image description here
I realized that all paintings locate inside of rectangle like below.
enter image description here
When I change the drawPie function parameters rectangle's location change and rotates based on on edge point. I can make the ractange bigger but this time drawPie center changes too like the last visual.
enter image description here
You can check the code below. It is modifed from the AnalogClock example. I would like to draw a quarter pie and make it the rotate endlessly. Any help will be appreciated. If you have a better opinion, I would like hear that too.
AnalogClock::AnalogClock(QWidget *parent) :
QWidget(parent),
ui(new Ui::AnalogClock)
{
ui->setupUi(this);
QTimer *timer = new QTimer(this);
connect(timer, &QTimer::timeout, this, QOverload<>::of(&AnalogClock::update));
timer->start(1000);
setWindowTitle(tr("Analog Clock"));
resize(200, 200);
}
void AnalogClock::paintEvent(QPaintEvent *)
{
QColor minuteColor(0, 127, 127, 191);
int side = qMin(width(), height());
QTime time = QTime::currentTime();
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing);
painter.translate(width() / 2, height() / 2);
painter.scale(side / 200.0, side / 200.0);
painter.setPen(Qt::NoPen);
qreal radius=10;
qreal startAngle=0;
qreal span=60;
for (int i = 0; i < 12; ++i) {
painter.drawLine(88, 0, 96, 0);
painter.rotate(30.0);
}
painter.setBrush(minuteColor);
painter.save();
painter.rotate(6.0 * time.second() );
//painter.drawConvexPolygon(minuteHand, 3);
QRect rect( -radius, -radius, radius*10, radius*10);
painter.drawPie( rect, startAngle*16, span*16 );
// painter.fillRect(rect,QBrush(Qt::green));
painter.restore();
painter.setPen(minuteColor);
for (int j = 0; j < 60; ++j) {
painter.drawLine(92, 0, 96, 0);
painter.rotate(6.0);
}
}
The drawPie() function takes a rectangle that defines the hypothetical full circle in which the pie (slice) will be painted. In this example, we want that circle to be the same as the full clock circle - same size, same center.
Now the code has normalized the coordinate system for us, so that the clock center point is at (0, 0), and the radius is 100. So we need a rectangle that has its center point in (0,0) and sides that are 2*radius long. That is:
QRect rect(-100, -100, 200, 200);
Changing the rect in the code sample to that fixes the basic issue.
I have made a simple texture of an outlined box and have the following snippet of code which draws a checkerboard pattern:
scene.setSceneRect(0, 0, 1000, 1000);
ui->g_view->setScene(&scene);
QPixmap texture("block.png");
QBrush brush(texture);
int count = 0;
for(int x=0; x<1000; x += 50) {
for(int y=0; y<1000; y += 50) {
if (count % 2 == 0) {
scene.addRect(x, y, 50, 50, Qt::NoPen, brush);
}
count++;
}
// Offset rows by 1
count++;
}
This works fine:
However, when I modify the code so that the boxes are drawn "off grid":
scene.addRect(x + 5, y + 5, 50, 50, Qt::NoPen, brush);
The following output is produced:
What I expected to happen was that each call to addRect would draw the texture starting from the top corner each time.
However, for some reason qt translates the texture using the location that it is being drawn too, almost like the texture is infinitely tiled in the background and addRect is just cutting away a window.
How can I make drawRect behave as I expected, i.e. no matter what the values of x and y are the texture is always drawn from the top left corner.
Edit: block.png
I solved this issue by instead using the addPixmap method.
//scene.addRect(x + 5, y + 5, 50, 50, Qt::NoPen, brush);
QGraphicsPixmapItem *pix_map = scene.addPixmap(texture);
pix_map->setPos(x + 5, y + 5);
I am making a small game in C++11 with Qt. However, I am having some issues with scaling.
The background of my map is an image. Each pixel of that image represents a tile, on which a protagonist can walk and enemies/healthpacks can be.
To set the size of a tile, I calculat the maximum amount like so (where imageRows & imageCols is amount of pixels on x- and y-axis of the background image):
QRect rec = QApplication::desktop()->screenGeometry();
int maxRows = rec.height() / imageRows;
int maxCols = rec.width() / imageCols;
if(maxRows < maxCols){
pixSize = maxRows;
} else{
pixSize = maxCols;
}
Now that I have the size of a tile, I add the background-image to the scene (in GameScene ctor, extends from QGraphicsScene):
auto background = new QGraphicsPixmapItem();
background->setPixmap(QPixmap(":/images/map.png").scaledToWidth(imageCols * pixSize));
this->addItem(background);
Then for adding enemies (they extend from a QGraphicsPixMapItem):
Enemy *enemy = new Enemy();
enemy->setPixmap(QPixmap(":/images/enemy.png").scaledToWidth(pixSize));
scene->addItem(enemy);
This all works fine, except that on large maps images get scaled once (to a height of lets say 2 pixels), and when zooming in on that item it does not get more clear, but stays a big pixel. Here is an example: the left one is on a small map where pixSize is pretty big, the second one has a pixSize of pretty small.
So how should I solve this? In general having a pixSize based on the screen resolution is not really useful, since the QGrapicsScene is resized to fit the QGraphicsView it is in, so in the end the view still determines how big the pixels show on the screen.
MyGraphicsView w;
w.setScene(gameScene);
w.fitInView(gameScene->sceneRect(), Qt::KeepAspectRatio);
I think you might want to look at the chip example from Qt (link to Qt5 but also works for Qt4).
The thing that might help you is in the chip.cpp file:
in the paint method:
const qreal lod = option->levelOfDetailFromTransform(painter->worldTransform());
where painter is simply a QPainter and option is of type QStyleOptionGraphicsItem. This quantity gives you back a measure of the current zoom level of your QGraphicsView and thus as in the example you can adjust what is being drawn at which level, e.g.
if (lod < 0.2) {
if (lod < 0.125) {
painter->fillRect(QRectF(0, 0, 110, 70), fillColor);
return;
}
QBrush b = painter->brush();
painter->setBrush(fillColor);
painter->drawRect(13, 13, 97, 57);
painter->setBrush(b);
return;
}
[...]
if (lod >= 2) {
QFont font("Times", 10);
font.setStyleStrategy(QFont::ForceOutline);
painter->setFont(font);
painter->save();
painter->scale(0.1, 0.1);
painter->drawText(170, 180, QString("Model: VSC-2000 (Very Small Chip) at %1x%2").arg(x).arg(y));
painter->drawText(170, 200, QString("Serial number: DLWR-WEER-123L-ZZ33-SDSJ"));
painter->drawText(170, 220, QString("Manufacturer: Chip Manufacturer"));
painter->restore();
}
Does this help?
I would like to rotate the text 45 degrees?
QFont font;
font.setPixelSize(12);
//grid
for(int i = 0; i < 10; i++){
painter->drawLine(100, 100 + i * 800/9, 900, 100 + i * 800/9);
str = QString::number((double)9 - i, 'd', 1);
painter->setFont(font);
painter->drawText(75, 100 + i * 800/9 - 6, 40, 40, 1, str);
}
Insert painter->rotate(45); before painter->drawText(75, 100 + i * 800/9 - 6, 40, 40, 1, str); and painter->rotate(-45); after (to restore the rotation angle of the coordinate system):
painter->rotate(45);
painter->drawText(75, 100 + i * 800/9 - 6, 40, 40, 1, str);
painter->rotate(-45);
Depending on if you mean 45 degrees clockwise or anti-clockwise you may need to negate the rotation angles.
After you rotate the coordinate system, everything you paint will be painted rotated until you restore the painter. A convenient way of saving and restoring the state of the painter is using QPainter::save() and QPainter::restore().
painter->save(); // saves current painter state
// painter->rotate(45); clockwise rotation
// painter->rotate(-45); counter clockwise rotation
painter->restore(); // restores painter state
In order to rotate your text (and any other drawable object) drawn by painter just call
painter->rotate(yourAngle);
before
painter->drawText();
If you wish to return to previous state call rotate again.
painter->rotate(-yourAngle);
Why making such a simple task so complicated?!!!
void CustomLabel::paintEvent(QPaintEvent* e)
{
QPainter painter(this);
painter.translate(m_rect.center());
painter.rotate(m_rotation);
painter.translate(-m_rect.center());
painter.drawText(m_rect, Qt::AlignHCenter | Qt::AlignVCenter, m_text);
QWidget::paintEvent(e);
}
any time the container of CustomLabel changes it size you can set the m_rect or use the this->rect() itself.
I'm using SFML 2.0 libraries on Ubuntu 12.10, using
sudo apt-get install libsfml-dev
to get them. Now I'm trying to get a sf::Text centered in the sreen. To do this, I set the origin of the text (the place that is used to make transformations such as setting position, rotating, etc) to the center of the bounding box of the sf::Text, and then set the position to the center of the screen, like so:
//declare text
sf::Font font;
sf::Text text;
font.loadFromFile("helvetica.ttf");
text.setFont(font);
text.setString("RANDOMTEXT");
text.setCharacterSize(100);
text.setColor(sf::Color::White);
text.setStyle(sf::Text::Regular);
//center text
sf::FloatRect textRect = text.getLocalBounds();
text.setOrigin(textRect.width/2,textRect.height/2);
text.setPosition(sf::Vector2f(SCRWIDTH/2.0f,SCRHEIGHT/2.0f));
This does not work, the text is off by some amount, like 3 on the x axis and 25 on the y axis. Oddly, if you set up a sf::RectangleShape to represent the bounding box of the text, that rectangle IS centered and correctly sized to fit the text. But then the text is drawn out of that box with the previously mentioned offset.
In this image I've marked the center of the screen, painted a sf::RectangleShape in the place of the bounding box of the text, and the sf::Text.
http://i.imgur.com/4jzMouj.png
That image was generated by this code:
const int SCRWIDTH = 800;
const int SCRHEIGHT = 600;
int main() {
sf::RenderWindow window;
window.create(sf::VideoMode(SCRWIDTH,SCRHEIGHT), "MYGAME" ,sf::Style::Default);
window.setMouseCursorVisible(false);
window.setVerticalSyncEnabled(true);
sf::Font font;
sf::Text text;
font.loadFromFile("helvetica.ttf");
text.setFont(font);
text.setString("RANDOMTEXT");
text.setCharacterSize(100);
text.setColor(sf::Color::White);
text.setStyle(sf::Text::Regular);
sf::FloatRect textRect = text.getLocalBounds();
text.setOrigin(textRect.width/2,textRect.height/2);
text.setPosition(sf::Vector2f(SCRWIDTH/2.0f,SCRHEIGHT/2.0f));
sf::RectangleShape rect(sf::Vector2f(textRect.width,textRect.height));
rect.setFillColor(sf::Color::Blue);
rect.setOrigin(rect.getSize().x/2,rect.getSize().y/2);
rect.setPosition(text.getPosition());
sf::RectangleShape RectW;
RectW.setSize(sf::Vector2f(SCRWIDTH, 0.0));
RectW.setOutlineColor(sf::Color::Red);
RectW.setOutlineThickness(1);
RectW.setPosition(0, SCRHEIGHT / 2);
sf::RectangleShape RectH;
RectH.setSize(sf::Vector2f(0.0, SCRHEIGHT));
RectH.setOutlineColor(sf::Color::Red);
RectH.setOutlineThickness(1);
RectH.setPosition(SCRWIDTH / 2, 0);
while(window.isOpen()) {
window.clear();
window.draw(rect);
window.draw(text);
window.draw(RectW);
window.draw(RectH);
window.display();
if (sf::Keyboard::isKeyPressed(sf::Keyboard::Escape)) {
window.close();
}
}
return 1;
}
How can I get it to be centered and inside of it's bounding box, as it should be?
sf::Text::getLocalBounds() has non-zero values for the top and left fields, so you can't ignore them when centering the origin.
Try this instead:
//center text
sf::FloatRect textRect = text.getLocalBounds();
text.setOrigin(textRect.left + textRect.width/2.0f,
textRect.top + textRect.height/2.0f);
text.setPosition(sf::Vector2f(SCRWIDTH/2.0f,SCRHEIGHT/2.0f));
I think this is a know problem with SFML's text rendering. Head on over to their issue tracker and take a look at this issue.
Also you could ask at their development forum. The developers their are always very friendly and helpful.
In addition to Emile's answer, instead of using textRect.height, you should use the maxHeight from the code below:
for (size_t characterIndex = 0; characterIndex < text.size(); ++characterIndex)
{
currentHeight = font->getGlyph(text[characterIndex], 12, false).bounds.height;
if (currentHeight > maxHeight)
{
maxHeight = currentHeight;
}
}
Explanation here:
This is because the first line is aligned vertically on the height of the tallest character -- even if it's not in your string. This is to keep the top of the string steady even if you add higher characters on the first line.
The exact computation is not straight-forward: you would have to iterate through all the characters of the first line, compute the highest character size, subtract this from the CharacterSize of your sf::Text, and subtract the result from the height of the bounding rectangle.
Another very important note: You may upset the look of the text if you draw it at a non-integer position. This seems to include the origin as well... (So round your origin + position to the nearest integer!)