Tour Preview

Find the Best Demos and Examples

Check out this quick tour to find the best demos and examples for you, and to see how the Felgo SDK can help you to develop your next app or game!

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