imageqtqmlimage-sizeqt5.15

Displaying only the right part of an image in QML - sourceClipRect


I'm trying to display only the right part of an image in QML by using the sourceClipRect property

Here is a snippet of the code

Image
{
    id : _image

    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter 
    fillMode: Image.PreserveAspectCrop
    width: parent.width
    height: parent.height
    sourceSize.width : undefined
    sourceSize.height : undefined
    source : imagePath  
    sourceClipRect: Qt.rect(sourceSize.width/2, 0, sourceSize.width/2, sourceSize.height)
    smooth : true
    mipmap : true
}

This image is inside an item with a fixed Width and Height

This gives me a warning and a binding loop on the property sourceClipRect, I'm guessing from using sourceSize in the sourceClipRect

I cannot use hard numbers in the sourceClipRect, as I don't know the original size of the picture

Do you know how can I avoid this binding loop ? Maybe by getting the original width and height another way, but I don't know any other way than sourceSize in pure QML

Ps : The results works as expected and is working fine, i just have an ugly warning stating a binding loop

Thanks a lot in advance


Solution

  • I finnaly found a fix for this that is acceptable. It is maybe not the cleanest but it's acceptable for me.

    But at the instanciation of the image i just save the var without the binding like so

      Image
      {
          id : _image
    
        property var  sourceSizeWidth :{sourceSizeWidth = sourceSize.width} //initializing this way avoids the binding between sourceSize.Width and sourceSizeWidth
        property var  sourceSizeHeight :{sourceSizeHeight = sourceSize.height} //initializing this way avoids the binding between sourceSize.height and sourceSizeHeight
    
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter 
        fillMode: Image.PreserveAspectCrop
        width: parent.width
        height: parent.height
        sourceSize.width : undefined
        sourceSize.height : undefined
        source : imagePath  
        sourceClipRect: Qt.rect(sourceSizeWidth/2, 0, sourceSizeWidth/2, sourceSizeHeight) //Use the unbinded var to set the sourceClipRect
        smooth : true
        mipmap : true
       }
    

    Doing an initialization like this avoid the binding between newly created sourceSizeWidth and QML property sourceSize.width

     property var  sourceSizeWidth :{sourceSizeWidth = sourceSize.width}
    

    As I said, not the cleanest and there is probably a smarter way of doing it, but it's enough for now, works fine and without warning binding loop.

    Cheers !