Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. Mobile and Embedded
  4. Adding multi line (multi color) text on top of QImage
Forum Updated to NodeBB v4.3 + New Features

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

Scheduled Pinned Locked Moved Solved Mobile and Embedded
10 Posts 2 Posters 1.9k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    Marek Belisko
    wrote on 21 Dec 2020, 21:42 last edited by
    #1

    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.

    J 1 Reply Last reply 22 Dec 2020, 06:27
    0
    • M Marek Belisko
      22 Dec 2020, 07:30

      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.

      J Offline
      J Offline
      jsulm
      Lifetime Qt Champion
      wrote on 22 Dec 2020, 07:38 last edited by
      #10

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

      https://forum.qt.io/topic/113070/qt-code-of-conduct

      1 Reply Last reply
      1
      • M Marek Belisko
        21 Dec 2020, 21:42

        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.

        J Offline
        J Offline
        jsulm
        Lifetime Qt Champion
        wrote on 22 Dec 2020, 06:27 last edited by
        #2

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

        And this makes me troubles

        What are these troubles?

        https://forum.qt.io/topic/113070/qt-code-of-conduct

        1 Reply Last reply
        0
        • M Offline
          M Offline
          Marek Belisko
          wrote on 22 Dec 2020, 06:32 last edited by
          #3

          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.

          J 1 Reply Last reply 22 Dec 2020, 06:37
          0
          • M Marek Belisko
            22 Dec 2020, 06:32

            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.

            J Offline
            J Offline
            jsulm
            Lifetime Qt Champion
            wrote on 22 Dec 2020, 06:37 last edited by
            #4

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

            https://forum.qt.io/topic/113070/qt-code-of-conduct

            1 Reply Last reply
            0
            • M Offline
              M Offline
              Marek Belisko
              wrote on 22 Dec 2020, 06:51 last edited by
              #5

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

              J 1 Reply Last reply 22 Dec 2020, 07:02
              0
              • M Marek Belisko
                22 Dec 2020, 06:51

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

                J Offline
                J Offline
                jsulm
                Lifetime Qt Champion
                wrote on 22 Dec 2020, 07:02 last edited by
                #6

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

                https://forum.qt.io/topic/113070/qt-code-of-conduct

                1 Reply Last reply
                0
                • M Offline
                  M Offline
                  Marek Belisko
                  wrote on 22 Dec 2020, 07:07 last edited by
                  #7

                  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.

                  J 1 Reply Last reply 22 Dec 2020, 07:12
                  0
                  • M Marek Belisko
                    22 Dec 2020, 07:07

                    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.

                    J Offline
                    J Offline
                    jsulm
                    Lifetime Qt Champion
                    wrote on 22 Dec 2020, 07:12 last edited by
                    #8

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

                    https://forum.qt.io/topic/113070/qt-code-of-conduct

                    1 Reply Last reply
                    0
                    • M Offline
                      M Offline
                      Marek Belisko
                      wrote on 22 Dec 2020, 07:30 last edited by
                      #9

                      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.

                      J 1 Reply Last reply 22 Dec 2020, 07:38
                      0
                      • M Marek Belisko
                        22 Dec 2020, 07:30

                        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.

                        J Offline
                        J Offline
                        jsulm
                        Lifetime Qt Champion
                        wrote on 22 Dec 2020, 07:38 last edited by
                        #10

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

                        https://forum.qt.io/topic/113070/qt-code-of-conduct

                        1 Reply Last reply
                        1

                        1/10

                        21 Dec 2020, 21:42

                        • Login

                        • Login or register to search.
                        1 out of 10
                        • First post
                          1/10
                          Last post
                        0
                        • Categories
                        • Recent
                        • Tags
                        • Popular
                        • Users
                        • Groups
                        • Search
                        • Get Qt Extensions
                        • Unsolved