Adding multi line (multi color) text on top of QImage
-
Hello,
I have simple qml app which basically display png image and I would like to print some more information on top of it. I created Qml Image provider and I can update source of image. On some event I print some text on display center and it also works fine. I would like to print new line with other font size and in same row with different color. And this makes me troubles. My code looks like:
QImage image = QImage(); image.load(images.value(state)); QPainter p; if (!p.begin(&image)) { qDebug() << "Cannot being painter"; } p.setPen(QPen(Qt::white)); p.setFont(QFont("Roboto", 16, QFont::Bold)); p.drawText(image.rect(), Qt::AlignCenter, "100%"); // printing fist line // second row p.setPen(QPen(Qt::white)); p.setFont(QFont("Roboto", 8, QFont::Bold)); p.drawText(i, Qt::AlignCenter, "200%"); p.setPen(QPen(Qt::red)); p.drawText(i, Qt::AlignCenter, "250%"); p.end(); m_imageProvider->setImage(image);
Is there some method which I didn't find yet I can reach my goal? Thanks.
-
@Marek-Belisko Take a look at the example from the doc:
QFont font("times", 24); QFontMetrics fm(font); int pixelsWide = fm.horizontalAdvance("What's the width of this text?"); int pixelsHigh = fm.height();
You can get width and height for specific text. Means: you know the width and height of your text and the image where you want to put this text. So, you can calculate the coordinates for drawText().
-
@Marek-Belisko said in Adding multi line (multi color) text on top of QImage:
And this makes me troubles
What are these troubles?
-
Problem is that 100% is displayed in center of image which is OK. But then I'm not sure how to display 200 % little bit below 100 % (different font) and in same line like 200 % with other color 250% text. Currently all texts are put in same place. I played with QRect adjusted method but it didn't give me correct results.
So in final I would like to have this (100% font 20 - color white, 200% font 10 - color white, 250 font 10 - color red):
100 % 200% 250% ------------------------------ Thanks.
-
@Marek-Belisko What is i in your code?
You need to specify proper coordinates for drawText(). -
@Marek-Belisko said in Adding multi line (multi color) text on top of QImage:
p.drawText(image.rect(), Qt::AlignCenter, "100%"); // printing fist line
This code print properly text to horisontal/vertical center of image. But I would need one more line with different font size + color fo part of the test. Do you have some code snippet which will do the job. Thanks.
-
@Marek-Belisko That I understood.
So, again: what is i in p.drawText(i, Qt::AlignCenter, "200%");?
You have to provide correct coordinates to drawText to draw at the position where you want it to be. -
Sorry I removed more lines then necessary:
QRect i = image.rect(); qDebug() << "rectangle:" << i; i.adjust(50, 120, 0, 0);//setX(i.x() + 50); p.drawText(i, Qt::AlignCenter,"200%");
rectangle printout is :
0,0,480,480
-> as my display is 480x480
I'm unsure about adjust method which arguments should I put to have this multiline working. Thanks. -
@Marek-Belisko You can use https://doc.qt.io/qt-5/qfontmetrics.html to find out how big your text is in pixels and then adjust coordinates for drawing accordingly.
-
OK thanks. Something like:
QFontMetrics(p.font()).size(Qt::TextSingleLine, "100%").height();
will give me fond height right? Then I need to adjust x and y. What puzzles me if I should also setup x,y also for first line also (when use
Qt::AlignCenter
it seems it align properly). Because first coordinates of rectangle are0,0,480,480
and when say increase x + 50 then will it be properly aligned vertically? Thanks. -
@Marek-Belisko Take a look at the example from the doc:
QFont font("times", 24); QFontMetrics fm(font); int pixelsWide = fm.horizontalAdvance("What's the width of this text?"); int pixelsHigh = fm.height();
You can get width and height for specific text. Means: you know the width and height of your text and the image where you want to put this text. So, you can calculate the coordinates for drawText().