前言

用 QML 做圖片倒影,主要是用ShaderEffect組件來實現,先來看看實際效果,如下:

還可以用同樣的方式來做其他控件的倒影,例如:

正文

直接來看源碼

import QtQuick 2.0 import QtQuick.Controls 1.4Rectangle {id: windowwidth: 600height: 500gradient: Gradient {GradientStop { position: 0; color: "lightsteelblue" }GradientStop { position: 1; color: "black" }}Image {id: imgwidth: 300height: 170source: "car.png"anchors.centerIn: parent}ShaderEffect {anchors.top: img.bottomwidth: img.widthheight: img.heightanchors.left: img.leftproperty variant source: imgproperty size sourceSize: Qt.size(0.5 / img.width, 0.5 / img.height)fragmentShader: "varying highp vec2 qt_TexCoord0;uniform lowp sampler2D source;uniform lowp vec2 sourceSize;uniform lowp float qt_Opacity;void main() {lowp vec2 tc = qt_TexCoord0 * vec2(1, -1) + vec2(0, 1);lowp vec4 col = 0.25 * (texture2D(source, tc + sourceSize)+ texture2D(source, tc- sourceSize)+ texture2D(source, tc + sourceSize * vec2(1, -1))+ texture2D(source, tc + sourceSize * vec2(-1, 1)));gl_FragColor = col * qt_Opacity * (1.0 - qt_TexCoord0.y) * 0.2;}"} }

若要拓展做其他控件的倒影,只需要修改property variant source: img 對象即可.

還有一種比較簡單的容易理解的方式來實現同樣的效果

import QtQuick 2.0 import QtQuick.Controls 1.4Rectangle {id: windowwidth: 600height: 500gradient: Gradient {GradientStop { position: 0; color: "lightsteelblue" }GradientStop { position: 1; color: "black" }}Image {id: imgwidth: 300height: 170source: "car.png"anchors.centerIn: parent}Item{width: img.widthheight: img.heightImage{source: img.sourceanchors.fill: parenttransform: Scale{yScale: -1origin.y:img.height/2.}}LinearGradient{width: img.widthheight: img.heightgradient: Gradient{GradientStop{position: 0.0;color:Qt.rgba(0,0,0,0.1)}GradientStop{position: 0.4;color:Qt.rgba(0,0,0,1)}}}} }

原理是先通過設置一張倒著的圖片，然后在圖片上添加一個漸變層，代碼很簡單，不再贅述。

總結

以上是生活随笔為你收集整理的QML做图片倒影效果(控件倒影)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。