我正在建立一个qml应用程序,我想实现一个圆圈,里面有一个“波”的效果。我或多或少成功了,除了结果是这个图形伪像...有人能帮助我吗?
问题在于:
来源影像:
工作示例不带圆:
我声明我从来没有使用过qml在我的生活,这是第三天我一直在它的工作,当然我试图阅读文档等,但我不知道发生了什么,这是代码:
//QT PK
import QtQuick 2.2
import QtQuick.Window 2.0
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1
import QtGraphicalEffects 1.0
//JS PK
import "componentCreation.js" as MyScript
ApplicationWindow
{
id: window
flags: Qt.FramelessWindowHint
visible: true
title: qsTr("window")
width: 1600
height: 900
x: (Screen.width - width) / 2
y: (Screen.height - height) / 2
color: "transparent"
property real slideValue
signal onSlide(real value)
Image
{
id: img
source: '/home/patan/code/QML/pic/contents/images/Waves.png'
property bool rounded: true
property bool adapt: true
//MAKE IMAGE CIRCULAR
layer.enabled: rounded
layer.effect: OpacityMask
{
maskSource: Item
{
width: img.width
height: img.height
Rectangle
{
anchors.centerIn: parent
width: img.adapt ? img.width : Math.min(img.width, img.height)
height: img.adapt ? img.height : width
radius: Math.min(width, height)
}
}
}
//WAVE EFFECT
ShaderEffect
{
anchors.fill: parent
property variant source: img
property real frequency: 1
property real amplitude: 0.1
property real time: 0.0
NumberAnimation on time
{
from: 0; to: Math.PI*2; duration: 10000; loops: Animation.Infinite
}
fragmentShader: "
varying highp vec2 qt_TexCoord0;
uniform sampler2D source;
uniform lowp float qt_Opacity;
uniform highp float frequency;
uniform highp float amplitude;
uniform highp float time;
void main() {
highp vec2 texCoord = qt_TexCoord0;
texCoord.y = amplitude * sin(time * frequency + texCoord.x * 6.283185) + texCoord.y;
gl_FragColor = texture2D(source, texCoord) * qt_Opacity;
}"
}
}
}
请原谅我,如果这是可怕的代码质量,如果任何人可以帮助我得到它的工作,我将不胜感激
1条答案
按热度按时间cyej8jka1#
我对你的解决方案采取了不同的方法。
我创建了一个应用了波浪效果的
SVG
图标。然后我拉伸SVG
图标以填充屏幕。然后我使用Image.Tile
重复填充波浪,然后我使用NumberAnimation
移动SVG
图标x
。然后,我应用
OpacityMask
剪切出一个圆:您可以Try it Online!