Difference in opacity change between rectangle color and image?



  • This is something that I have notice for a while and worked around, but I thought I should try to understand the issue better -- perhaps someone here can help? I have an image that is red on a rectangle that is also red. The image is a child of the rectangle. If I animate the opacity of the rectangle from 1 to 0 both the rectangle and image fade out. However, they fade differently so that you can clearly see the square image in the animation.

    I would like to know if there is a way to fade out the rectangle and the image so that the image boundary cannot be seen in the process.

    Here is some code to illustrate the effect,

    @
    import QtQuick 1.0

    Rectangle {
    width: 800
    height: 600
    color: "black"

    Rectangle {
    id: canvas
    color: "red"
    opacity: 0.5
    anchors.fill: parent

    Behavior on opacity {
      NumberAnimation {
        duration: 5000
      }
    }
    
    Image {
      source: "red.png"
      anchors {
        verticalCenter: parent.verticalCenter
        horizontalCenter: parent.horizontalCenter
      }
    }
    
    MouseArea {
      anchors.fill: parent
      onClicked: {
        parent.opacity = 0
      }
    }
    

    }
    }
    @


Log in to reply
 

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