Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

Forums

OverviewFelgo 2 Support (Qt 5) › OpacityMask rotation

Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #22134

    Phil

    Hello. I’m trying to create an effect where I apply a transformation to a mask object, however the OpacityMask seems to only apply the original mask without the rotation. Here is some example code:

    import Felgo 3.0
    import QtQuick 2.0
    import QtGraphicalEffects 1.0
    
    App {
        property real l: 100
    
        Rectangle {
            id: bg
            anchors.centerIn: parent
            width: l
            height: l
            color: "red"
            visible: false
        }
    
        Rectangle {
            id: mask
            anchors.centerIn: parent
            width: l
            height: l
            visible: false
    
            NumberAnimation on rotation {
                duration: 5000
                running: true
                from: 0
                to: 360
                loops: Animation.Infinite
            }
        }
    
        OpacityMask {
            width: l
            height: l
            anchors.centerIn: parent
            source: bg
            maskSource: mask
        }
    }

    Thanks,

    Phil

    #22160

    Alex
    Felgo Team

    Hi Phil,

    I think this is mostly about the sizes of your masked item, the mask itself and the output. Here is an example of an animated mask where you could maybe start from to get your desired effect:

    import Felgo 3.0
    import QtQuick 2.0
    import QtGraphicalEffects 1.0
    
    App {
      property real l: 100
    
      AppImage {
        id: bg
        anchors.fill: parent
        source: "https://doc.qt.io/qt-5/images/Original_bug.png"
        visible: false
      }
    
      Rectangle {
        id: mask
        anchors.fill: bg
        color: "transparent"
        visible: false
    
        Rectangle {
          anchors.centerIn: parent
          width: l
          height: l
          rotation: 45
          color: "black"
    
          NumberAnimation on rotation {
            duration: 5000
            running: true
            from: 0
            to: 360
            loops: Animation.Infinite
          }
        }
      }
    
      OpacityMask {
        anchors.fill: bg
        source: bg
        maskSource: mask
        cached: false
      }
    }

    Cheers,
    Alex

Viewing 2 posts - 1 through 2 (of 2 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded