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. Apply offset to cropped image in Rectangle
Forum Updated to NodeBB v4.3 + New Features

Apply offset to cropped image in Rectangle

Scheduled Pinned Locked Moved Solved QML and Qt Quick
6 Posts 2 Posters 1.5k Views 2 Watching
  • 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.
  • D Offline
    D Offline
    DavidM29
    wrote on last edited by DavidM29
    #1

    Hello,

    I'm having trouble trying to apply an offset to the position of a cropped image in a rectangle.
    I do have a rectangle with a background. I that rectangle I'm trying to put a cropped image that I want to be place in a specific position. But I can't apply any offset to the horizontal Alignment as I would like.

     Rectangle{
            id: rect
            anchors.fill: parent
            gradient: Gradient { //The rectangle background
                id : grad
                GradientStop {
                    position: 0.00;
                    color: "#575757";
                }
                GradientStop {
                    position: 1.00;
                    color: "#282828";
                }
            }
            Image {
                id: img
                anchors.centerIn: parent
                width:  parent.width
                height: parent.height*0.9 
                fillMode:Image.PreserveAspectCrop 
                horizontalAlignment:  Image.AlignLeft+20 //Trying to align on a side and then add 20 pixel offset but is does not work
                sourceSize.width: width*2
                sourceSize.height: height*2
            }
    }
    
    

    Is there any way I can move a cropped image in a rectangle like the one I use ?

    1 Reply Last reply
    0
    • Shrinidhi UpadhyayaS Offline
      Shrinidhi UpadhyayaS Offline
      Shrinidhi Upadhyaya
      wrote on last edited by Shrinidhi Upadhyaya
      #2

      Hi @DavidM29 ,i guess you want to align the image to the left of the parent and from there 20px offset you need.

      Here is the sample code below:-

      Image {
                     id: img
                     height: parent.height*0.9
                     fillMode:Image.PreserveAspectCrop
                     anchors.left: parent.left
                     anchors.leftMargin: 20
                     anchors.right: parent.right
                     anchors.verticalCenter: parent.verticalCenter
                     sourceSize.width: width*2
                     sourceSize.height: height*2
                 }
      

      Shrinidhi Upadhyaya.
      Upvote the answer(s) that helped you to solve the issue.

      D 1 Reply Last reply
      0
      • Shrinidhi UpadhyayaS Shrinidhi Upadhyaya

        Hi @DavidM29 ,i guess you want to align the image to the left of the parent and from there 20px offset you need.

        Here is the sample code below:-

        Image {
                       id: img
                       height: parent.height*0.9
                       fillMode:Image.PreserveAspectCrop
                       anchors.left: parent.left
                       anchors.leftMargin: 20
                       anchors.right: parent.right
                       anchors.verticalCenter: parent.verticalCenter
                       sourceSize.width: width*2
                       sourceSize.height: height*2
                   }
        
        D Offline
        D Offline
        DavidM29
        wrote on last edited by DavidM29
        #3

        @Shrinidhi-Upadhyaya
        It does apply an offset but the cropped image is cut on the side the offset has been applied. Which is not what I want. I want the image to fill the rectangle but just show a specific part of that image.
        Here is an example :
        0_1553602082973_4b76e178-657b-4f0e-8e63-79d309e5fef6-image.png

        1 Reply Last reply
        0
        • Shrinidhi UpadhyayaS Offline
          Shrinidhi UpadhyayaS Offline
          Shrinidhi Upadhyaya
          wrote on last edited by
          #4

          Hi @DavidM29 , ohh you want to crop the image,i get you then you just need to use the clip property

          Here is the sample code:-

          Rectangle {
                  height: 400
                  width: 400
                  color: "transparent"
                  border.color: "red"
                  anchors.centerIn: parent
                  clip: true
                  Image {
                      id: image
                      height: 400
                      width: 560
                      fillMode: Image.PreserveAspectCrop
                      source: "DummyImage.png"
                      clip: true
                  }
              }
          

          But i guess it would be better if you can crop the image using paint,snipping tool etc or you can easily do it using any phone as the cropping feature is easily available,because clip is a bit of costly affair.

          Shrinidhi Upadhyaya.
          Upvote the answer(s) that helped you to solve the issue.

          D 1 Reply Last reply
          1
          • Shrinidhi UpadhyayaS Shrinidhi Upadhyaya

            Hi @DavidM29 , ohh you want to crop the image,i get you then you just need to use the clip property

            Here is the sample code:-

            Rectangle {
                    height: 400
                    width: 400
                    color: "transparent"
                    border.color: "red"
                    anchors.centerIn: parent
                    clip: true
                    Image {
                        id: image
                        height: 400
                        width: 560
                        fillMode: Image.PreserveAspectCrop
                        source: "DummyImage.png"
                        clip: true
                    }
                }
            

            But i guess it would be better if you can crop the image using paint,snipping tool etc or you can easily do it using any phone as the cropping feature is easily available,because clip is a bit of costly affair.

            D Offline
            D Offline
            DavidM29
            wrote on last edited by
            #5

            @Shrinidhi-Upadhyaya

            Thank you for your help but it still not why I'm looking for.
            I do want to crop the image and then move it inside the rectangle. The point I'm not capable to do right now is to place the image as I would like.
            As mentioned above I would like to move the cropped image on the right.
            Here is a more explicit example :
            0_1553670158079_a43194e4-c4fe-4c01-9638-2f2a691a0c90-image.png
            On the cropped image you can see that the house is not centered my goal is to keep that image format but want to slide the image inside the rectangle so the house is centered like the last image.

            I could use snipping tool but I don't want to because I'm using SVG and want to keep the format and the scalable advantage of SVG.

            D 1 Reply Last reply
            0
            • D DavidM29

              @Shrinidhi-Upadhyaya

              Thank you for your help but it still not why I'm looking for.
              I do want to crop the image and then move it inside the rectangle. The point I'm not capable to do right now is to place the image as I would like.
              As mentioned above I would like to move the cropped image on the right.
              Here is a more explicit example :
              0_1553670158079_a43194e4-c4fe-4c01-9638-2f2a691a0c90-image.png
              On the cropped image you can see that the house is not centered my goal is to keep that image format but want to slide the image inside the rectangle so the house is centered like the last image.

              I could use snipping tool but I don't want to because I'm using SVG and want to keep the format and the scalable advantage of SVG.

              D Offline
              D Offline
              DavidM29
              wrote on last edited by DavidM29
              #6

              The solution I found is to add

              clip: true
              

              to my Rectangle. Change the fillMode to Image.PreserveAspectFit and then change the x position of the image in order to have placed as I want.
              When PreserveAspectCrop is used the image cannot be moved because the Image outside the cropped area is not painted.

              1 Reply Last reply
              -1

              • Login

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