Image masks alternative for QML items
-
Please advise "image masks":http://goo.gl/Wh06gJ alternative approach for QML items.
I have:
- Root rectangle with gradient ( Yellow to red and vice versa )
- On screen rectangle (anchors.fill: parent) with gradient from "#0000FF" to "#ff00ff"
- 64x64 Green rectangle (moving by y)
- Text
- ... 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: rootSequentialAnimation 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 }}@
-
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
-
You mean these items should overlap eachother, right ?
-
They should blends together as on image in my first post.
-
Did you try using "blend":http://qt-project.org/doc/qt-5/qml-qtgraphicaleffects-blend.html ?
-
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.0Rectangle {
width: 256
height: 256
id: rootSequentialAnimation 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" }
}
@ -
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)!