Adding multi line (multi color) text on top of QImage

Marek Belisko

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.

jsulm

@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().

jsulm

@Marek-Belisko said in Adding multi line (multi color) text on top of QImage:

And this makes me troubles

What are these troubles?

Marek Belisko

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.

jsulm

@Marek-Belisko What is i in your code?
You need to specify proper coordinates for drawText().

Marek Belisko

@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.

jsulm

@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.

Marek Belisko

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.

jsulm

@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.

Marek Belisko

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 are 0,0,480,480 and when say increase x + 50 then will it be properly aligned vertically? Thanks.

jsulm

@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().