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

Time:05-10

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

CodePudding user response:

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 !

  • Related