Image masks alternative for QML items



  • Please advise "image masks":http://goo.gl/Wh06gJ alternative approach for QML items.

    I have:

    1. Root rectangle with gradient ( Yellow to red and vice versa )
    2. On screen rectangle (anchors.fill: parent) with gradient from "#0000FF" to "#ff00ff"
    3. 64x64 Green rectangle (moving by y)
    4. Text
    5. ... possible any other items

    I need to combine them together like picture below!
    Something similar does image mask in sprite animation.
    So, The result should be: Moving rectangle 64x64 with color change from "#0000FF" to "#ff00ff" and "TST" title on it.

    Could you advise me which methods in QML is the best for this transformation?

    !http://i.stack.imgur.com/RtIH8.png(qml image mask)!

    @ Rectangle {
    width: 256
    height: 256
    id: root

    SequentialAnimation on color {
    loops: Animation.Infinite
    ColorAnimation { from: "yellow"; to: "red"; duration: 4000 }
    ColorAnimation { from: "red"; to: "yellow"; duration: 4000 }
    }
     
    Rectangle {
    anchors.fill: parent
    id: item1
     
    SequentialAnimation on color {
    id: anime;
    loops: Animation.Infinite
    ColorAnimation { from: "#0000FF"; to: "#ff00ff"; duration: 2000 }
    ColorAnimation { from: "#ff00ff"; to: "#0000FF"; duration: 2000 }
    }
    }
     
    Item {
    id: mask
    anchors.fill: parent
     
    Rectangle {
    id: item2
    color: "green"
    width: 64; height: 64; x: 10
     
    SequentialAnimation on y {
    running: true
    loops: Animation.Infinite
    NumberAnimation {
    to: root.height-64
    duration: 2000
    }
    NumberAnimation {
    to: 0
    duration: 2000
    }
    }
    }
    }
     
    Text {
    id: text1
    parent: item2
    text: "TST"
    color: "yellow"
    font.pointSize: 10
    }}@

  • Moderators

    IMO, using "States":http://qt-project.org/doc/qt-5/qtquick-statesanimations-states.html and "Transitions":http://qt-project.org/doc/qt-5/qml-qtquick-transition.html would be a good way to implement the above.



  • I need to combine together three QML items into one


  • Moderators

    You mean these items should overlap eachother, right ?



  • They should blends together as on image in my first post.


  • Moderators



  • Thank you for blend, it could help. I have written small code bellow, actually it works not as expected. I need "TEST" caption blended with green color. When I try to do this (just uncomment lines in code) it blends incorrectly. What is wrong ?

    @import QtQuick 2.1
    import QtGraphicalEffects 1.0

    Rectangle {
    width: 256
    height: 256
    id: root

    SequentialAnimation on color {
        loops: Animation.Infinite
        ColorAnimation { from: "yellow"; to: "red"; duration: 4000 }
        ColorAnimation { from: "red"; to: "yellow"; duration: 4000 }
    }
    
    Rectangle {
        id: group1
        anchors.fill: parent     // Size must be same as parent
        color: "transparent"    
        visible: false;
    
        Rectangle {
            color: "black"
            width: 64; height: 64; x: 0
    
            SequentialAnimation on y {
                running: true
                loops: Animation.Infinite
                NumberAnimation {
                    to: root.height-64
                    duration: 3000
                }
                NumberAnimation {
                    to: 0
                    duration: 3000
                }
            }
        }
    }
    
    Rectangle {
        anchors.fill: parent
        id: group2
        visible: false;
    
        SequentialAnimation on color {
            id: anime;
            loops: Animation.Infinite
            ColorAnimation { from: "#0000FF"; to: "#ff00ff"; duration: 2000 }
            ColorAnimation { from: "#ff00ff"; to: "#0000FF"; duration: 2000 }
        }
    }
    
    Rectangle {
        id: group3
        anchors.fill: parent
        color: "transparent"
        visible: false;
    
        Text {
            text: "TEST text"
            color: "black"
            font.pointSize: 20
        }
    }
    
    
    Rectangle {
        anchors.fill: group3
        id: group4
        visible: false;
        color: "green"
    }
    
    Blend {
        id: myEffect
        anchors.fill: group1
        source: group1
        foregroundSource: group2
        mode: "difference"
    }
    

    // Blend {
    // id: myEffect2
    // anchors.fill: group3
    // source: group3
    // foregroundSource: group4
    // mode: "difference"
    // }

    Blend {
        anchors.fill: myEffect
        source: myEffect
        foregroundSource: group3 //myEffect2
        mode: "multiply"
    }
    

    }
    @


  • Moderators

    Hi,

    It appears to be green.
    ![url=http://postimg.org/image/o4cyswj1r/][img]http://s27.postimg.org/o4cyswj1r/Screenshot_from_2014_07_14_15_55_33.jpg[/img]/url!



  • It should be blended with moving rectangle and displayed only when rectangle on the top.
    Like this
    !http://i.stack.imgur.com/YUs82.png(combine effects)!


Log in to reply
 

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