Shader Effect meets Marquee [SOLVED]
-
Hi,
I'm trying to combine shader and marquee effect and having trouble with it.
I started off with a simple project:
@
Rectangle {
id: master
width: 800
height: 480Image { id: bgpic source: "images/bg.jpg" } Rectangle { anchors.centerIn: parent width: 300 height: 30 color: "transparent" clip: true Text { id: label color: "white" font.pointSize: 24; text: "hello world1 hello world2 hello world3 hello world4 hello world5 hello world6" x: parent.width PropertyAnimation on x { running: true; from: label.x ; to: -label.width; duration: 50000; loops: Animation.Infinite } } MouseArea { anchors.fill: parent onClicked: { Qt.quit(); } } }
}
@This example runs a simple marquee effect: the text rotates inside the shorter rectangle box, using transparency.
Then I tried to use shaders in order to stretch the text box from nil to full height - and that works
But when I try to combine both elements - the shader dropdown effect and the marquee rotating effect - it won't work.
I found out that the marquee effect is obtained mainly through the clip:true property in the rectangle outside the text element, I have tried applying that to my ShaderEffect, or ShaderEffectSource or even just leave the Text/Rectangle element dealing with it, but the shader resulting from those won't add the dropdown stretch effect to the supposedly already running marquee effect.
Do any of you know if what I'm trying is possible with Qt5 and if so, how could I do it? I will try to supply more visual elements to better relay my objective, in case this is just too confusing.
Thanks in advance!
-
Ok I managed to solve the issue:
- define the Item element with the Text element inside
- define the ShaderEffectSource pointing to the Item and set hideSource to true so that the actual Item doesn't show
- define the ShaderEffect which uses the ShaderEffectSource (and with it the Text element)
- in the ShaderEffect, set a scrolling animation for the Item/Text element to slide horizontally
and set the traditional animation for the shader (wobbly edges for the letters) - encapsulate the ShaderEffect in a rectangle with clip:true, shorter width and transparent color
Result:
the encapsulated rectangle shows sliding text inside, which is being animated with shaders for the wobbly effect.
I managed to get there by using one of the examples:
/Qt5/Qt5.0.0/5.0.0/Src/qtdeclarative/examples/quick/shadereffects
The example shows a grid 3x2 with shader examples and the 1x1 element drags with the mouse to rotate between the Text "Qt" or the images of the Qt Logo and a Smiley Face - the mouse drag and box clipping were the elements to get me there!
@
import QtQuick 2.0
import "content"Rectangle {
id: root
width: 1280
height: 600Image { anchors.fill: parent source: "content/bg.jpg" } //! [source] ShaderEffectSource { id: theSource sourceItem: theItem
hideSource: true
}
//! [source]Item { id: theItem width: 3000 height: 160 Text { width: 3000 height: 140 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter font.pixelSize: 120 font.family: "Times" color: "blue" text: "1234567890 abcdefghijklmnopqrstuvwxyz ABCDEF" } }
Rectangle {
id: marquee
clip:true
width: 400
height: 140
anchors.centerIn: parent
color: "transparent"ShaderEffect {
id: teste
width: 3000
height: 160
property variant source: theSource
property real amplitude: 0.04 * wobbleSlider.value
property real frequency: 20
property real time: 0
NumberAnimation on time { loops: Animation.Infinite; from: 0; to: Math.PI * 2; duration: 600 }
PropertyAnimation on x {running: true; loops: Animation.Infinite; from: marquee.width; to: -teste.width; duration: 100000; }
//! [fragment]
fragmentShader:
"uniform lowp float qt_Opacity;" +
"uniform highp float amplitude;" +
"uniform highp float frequency;" +
"uniform highp float time;" +
"uniform sampler2D source;" +
"varying highp vec2 qt_TexCoord0;" +
"void main() {" +
" highp vec2 p = sin(time + frequency * qt_TexCoord0);" +
" gl_FragColor = texture2D(source, qt_TexCoord0 + amplitude * vec2(p.y, -p.x)) * qt_Opacity;" +
"}"
//! [fragment]
Slider {
id: wobbleSlider
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
height: 40
}
}}
}
@