Apply offset to cropped image in Rectangle



  • 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 ?



  • 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
    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



  • 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

    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.



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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.