Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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.


  • Lifetime Qt Champion

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


  • Lifetime Qt Champion

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


  • Lifetime Qt Champion

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


  • Lifetime Qt Champion

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


  • Lifetime Qt Champion

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


  • Lifetime Qt Champion

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


Log in to reply