Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How do I change imagesize to fit on other screens and preserve aspect ratio
Forum Update on Monday, May 27th 2025

How do I change imagesize to fit on other screens and preserve aspect ratio

Scheduled Pinned Locked Moved QML and Qt Quick
qmlchange sizeresolutionquick
20 Posts 2 Posters 13.4k 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.
  • A Offline
    A Offline
    antemort
    wrote on 22 Jun 2015, 10:23 last edited by
    #7

    Now I have worked with layouts and resized all images to same ratio 1440 x 540 except 2 images. Those two images are speedgauge pins and need to be positioning in the middle of the gauges. What I want now is that those pins should change position and size when resizing the window that are set in full screen. So if image window is resized then these two images should also resize and find their way to the center of the gauge again.

    can you help me?

    P 1 Reply Last reply 22 Jun 2015, 10:52
    0
    • A antemort
      22 Jun 2015, 10:23

      Now I have worked with layouts and resized all images to same ratio 1440 x 540 except 2 images. Those two images are speedgauge pins and need to be positioning in the middle of the gauges. What I want now is that those pins should change position and size when resizing the window that are set in full screen. So if image window is resized then these two images should also resize and find their way to the center of the gauge again.

      can you help me?

      P Offline
      P Offline
      p3c0
      Moderators
      wrote on 22 Jun 2015, 10:52 last edited by
      #8

      @antemort If I understood you correctly then you just need to use anchors.centerIn and anchor it to its parent so that it centers even if you resize the parent window. To resize it according to parent you can bind it to parents dimensions. See the following example

      import QtQuick 2.4
      
      Item {
          width: 200
          height: 200
      
          Image {
              anchors.centerIn: parent
              width: parent.width / 2.0 // can be anything as per your requirements
              height: parent.height / 2.0
              source: "https://placeholdit.imgix.net/~text?txtsize=50&txt=Qt&w=100&h=100"
          }
      }
      

      Try using your image as the source.

      157

      1 Reply Last reply
      0
      • A Offline
        A Offline
        antemort
        wrote on 22 Jun 2015, 12:59 last edited by
        #9

        I'm sorry, I must have explained it badly. I have two gauges on different sides off a symmetry line so those are not alligned in the center off the picture. The two pins are positioning with x and y values to be positioning in the center of the gauge circles. the pins are small images which have the orgin at the right side of the image facing the middle of the gaugecircle. So when the screen getting bigger or smaller i want width and height and the x and y values to be changed so it follows the other images that have anchors.fill: parent.

        P 1 Reply Last reply 23 Jun 2015, 06:16
        0
        • A antemort
          22 Jun 2015, 12:59

          I'm sorry, I must have explained it badly. I have two gauges on different sides off a symmetry line so those are not alligned in the center off the picture. The two pins are positioning with x and y values to be positioning in the center of the gauge circles. the pins are small images which have the orgin at the right side of the image facing the middle of the gaugecircle. So when the screen getting bigger or smaller i want width and height and the x and y values to be changed so it follows the other images that have anchors.fill: parent.

          P Offline
          P Offline
          p3c0
          Moderators
          wrote on 23 Jun 2015, 06:16 last edited by
          #10

          @antemort Have you anchored the pin to the gauge circles or you have explicitly set x and y positions ?

          157

          1 Reply Last reply
          0
          • A Offline
            A Offline
            antemort
            wrote on 23 Jun 2015, 06:51 last edited by antemort
            #11

            I have explicity set x and y for the moment. I want to anchor but doesn't know how when the the pins are not position in the center of the image, only positioning so it is in the center of the circles.

            Image {
                id: visare
                source: "images/visare_2_skugga.png"
                x: 113
                y: 271
                width: 210
                height: 13
                transformOrigin: Item.Right
                opacity: 1
                rotation: needleAngle
                smooth: true
                
                
                Behavior on rotation{
                    SpringAnimation{
                        spring: 0.5;
                        damping: 0.2;
                        mass:2;
                        
                        
                        
                    }
                }
                
                
            }
            
            Image {
                id: visare_rpm
                source: "images/visare_2_skugga.png"
                x: 912
                y: 270
                width: 210
                height: 13
                transformOrigin: Item.Right
                opacity: 1
                rotation: needleRpm
                smooth: true
                
                Behavior on rotation{
                    SpringAnimation{
                        spring: 0.5;
                        damping: 0.2;
                        mass:2;
                        
                        
                        
                    }
                }
                
                
            }
            
            P 1 Reply Last reply 23 Jun 2015, 06:57
            0
            • A antemort
              23 Jun 2015, 06:51

              I have explicity set x and y for the moment. I want to anchor but doesn't know how when the the pins are not position in the center of the image, only positioning so it is in the center of the circles.

              Image {
                  id: visare
                  source: "images/visare_2_skugga.png"
                  x: 113
                  y: 271
                  width: 210
                  height: 13
                  transformOrigin: Item.Right
                  opacity: 1
                  rotation: needleAngle
                  smooth: true
                  
                  
                  Behavior on rotation{
                      SpringAnimation{
                          spring: 0.5;
                          damping: 0.2;
                          mass:2;
                          
                          
                          
                      }
                  }
                  
                  
              }
              
              Image {
                  id: visare_rpm
                  source: "images/visare_2_skugga.png"
                  x: 912
                  y: 270
                  width: 210
                  height: 13
                  transformOrigin: Item.Right
                  opacity: 1
                  rotation: needleRpm
                  smooth: true
                  
                  Behavior on rotation{
                      SpringAnimation{
                          spring: 0.5;
                          damping: 0.2;
                          mass:2;
                          
                          
                          
                      }
                  }
                  
                  
              }
              
              P Offline
              P Offline
              p3c0
              Moderators
              wrote on 23 Jun 2015, 06:57 last edited by
              #12

              @antemort So why don't you use anchors.centerIn: parent and align it to center according to the gauge ? Here parent being the gauge.

              157

              1 Reply Last reply
              0
              • A Offline
                A Offline
                antemort
                wrote on 23 Jun 2015, 07:09 last edited by
                #13

                because the gauge circle have the measure 1440x540 like the rest of the images there are two cirles in one circle. If i use anchors.centerIn it will end up in the center of the image in between those circles.

                P 1 Reply Last reply 23 Jun 2015, 07:15
                0
                • A antemort
                  23 Jun 2015, 07:09

                  because the gauge circle have the measure 1440x540 like the rest of the images there are two cirles in one circle. If i use anchors.centerIn it will end up in the center of the image in between those circles.

                  P Offline
                  P Offline
                  p3c0
                  Moderators
                  wrote on 23 Jun 2015, 07:15 last edited by p3c0
                  #14

                  @antemort Wow this is way too different than what I understood earlier.
                  You have a large image and it has some circles at some positions and you want that pins to be centered to that circles. Is it ? And for that you have hard-coded the pin's x and y positions by trial and error method (i.e manually). If thats the case then I think you should change the implementation. It would be too difficult to maintain that position when the image resizes.
                  Can you describe/explain it pictographically ?

                  157

                  1 Reply Last reply
                  0
                  • A Offline
                    A Offline
                    antemort
                    wrote on 23 Jun 2015, 07:17 last edited by
                    #15

                    two circles in one image*

                    P 1 Reply Last reply 23 Jun 2015, 07:20
                    0
                    • A antemort
                      23 Jun 2015, 07:17

                      two circles in one image*

                      P Offline
                      P Offline
                      p3c0
                      Moderators
                      wrote on 23 Jun 2015, 07:20 last edited by
                      #16

                      @antemort A small pictorial representation would be helpful.

                      157

                      1 Reply Last reply
                      0
                      • A Offline
                        A Offline
                        antemort
                        wrote on 23 Jun 2015, 07:26 last edited by
                        #17

                        http://postimg.org/image/62lrab1jt/

                        here it is. Print screen from Qt designer with pins in right position

                        P 1 Reply Last reply 23 Jun 2015, 07:42
                        0
                        • A antemort
                          23 Jun 2015, 07:26

                          http://postimg.org/image/62lrab1jt/

                          here it is. Print screen from Qt designer with pins in right position

                          P Offline
                          P Offline
                          p3c0
                          Moderators
                          wrote on 23 Jun 2015, 07:42 last edited by
                          #18

                          @antemort Hmm this is what I guessed and was afraid of. I thinks it a bad idea to go for this way of implementation. Instead you should divide it into seperate images. One being that speedometer image while other being the background. Then you can just use Image element to load that speedometer image and you will thus will able to place it anywhere. Now, the pins can be made child of speedometer Image element and can be centered to that of the speedometer (parent) using anchors.centerIn.
                          In this way it will be independent of any resolution changes.

                          157

                          1 Reply Last reply
                          0
                          • A Offline
                            A Offline
                            antemort
                            wrote on 23 Jun 2015, 08:07 last edited by
                            #19

                            I had it before but then I needed to position all images and then I couldn't anchor them. when I don't anchor them they doesn't scale or follow the window when it scales.

                            P 1 Reply Last reply 23 Jun 2015, 08:38
                            0
                            • A antemort
                              23 Jun 2015, 08:07

                              I had it before but then I needed to position all images and then I couldn't anchor them. when I don't anchor them they doesn't scale or follow the window when it scales.

                              P Offline
                              P Offline
                              p3c0
                              Moderators
                              wrote on 23 Jun 2015, 08:38 last edited by
                              #20

                              @antemort You can put the 2 gauge images besides eachother inside a RowLayout and add it to the Image element which contains that background image. Advantage of layouts is that it automatically positions the items inside it when it resizes.

                              157

                              1 Reply Last reply
                              0

                              16/20

                              23 Jun 2015, 07:20

                              • Login

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