在网上查找qml中实现倒影效果的相关内容时，国内网站有关的内容都是使用ShaderEffect实现的，且代码都是以图片(Image)为例。
在GPbeta的帮助下，找到了另一种使用OpacityMask实现倒影效果的方式，对控件和图片都有效果，在此记录一下。效果图如下。
代码实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
| import QtQuick 2.4
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0
Rectangle {
id: main_container
width: 390
height: 360
property int offset: 0
Rectangle {
id: content
color: "#8e44ad"
width: 140
height: 140
anchors.top: parent.top
anchors.topMargin: 20
anchors.left: parent.left
anchors.leftMargin: 50
}
OpacityMask {
width: content.width
height: content.height
anchors.top: content.bottom
anchors.topMargin: content.height + offset
anchors.left: content.left
source: content
maskSource: Rectangle {
width: content.width
height: content.height
gradient: Gradient {
GradientStop { position: 0.0; color: Qt.rgba(0,0,0,0) }
GradientStop { position: 1.0; color: Qt.rgba(0,0,0,0.9) }
}
}
transform: Scale { yScale: -1}
}
Image {
id: img
width: 140
height: 140
source: "test.png"
anchors.top: parent.top
anchors.topMargin: 20
anchors.left: content.right
anchors.leftMargin: 20
}
OpacityMask {
width: img.width
height: img.height
anchors.top: img.bottom
anchors.topMargin: img.height + offset
anchors.left: img.left
source: img
maskSource: Rectangle {
width: img.width
height: img.height
gradient: Gradient {
GradientStop { position: 0.0; color: Qt.rgba(0,0,0,0) }
GradientStop { position: 1.0; color: Qt.rgba(0,0,0,0.9) }
}
}
transform: Scale { yScale: -1}
}
}
|
