找回密码
 立即注册
收起左侧

怎么实现按钮控件倒影特效?

3
回复
9090
查看
[复制链接]
累计签到:5 天
连续签到:1 天
来源: 2018-1-4 11:24:58 显示全部楼层 |阅读模式
1Qter豆
我想要做控件倒影特效,不是图片倒影,图片倒影已经做出来了,可是不能实现按钮控件倒影,有谁可以帮帮忙?

  1. import QtQuick 2.4
  2. import QtQuick.Window 2.2
  3. import QtQuick.Controls 1.4
  4. import QtGraphicalEffects 1.0

  5. Window {
  6.     visible: true
  7.     width: 600
  8.     height: 500
  9.     Rectangle {
  10.         id: window

  11.         width: 600
  12.         height: 500

  13.         gradient: Gradient {
  14.             GradientStop { position: 0; color: "lightsteelblue" }
  15.             GradientStop { position: 1; color: "black" }
  16.         }

  17.         Button{
  18.             id: img
  19.             width: 300
  20.             height: 170
  21.             text: "haha"
  22.             anchors.centerIn: parent
  23.             onClicked: {
  24.                 Qt.quit();
  25.             }
  26.         }

  27. //        Image {
  28. //            id: img
  29. //            width: 300
  30. //            height: 170
  31. //            source: "snowman.png"
  32. //            anchors.centerIn: parent
  33. //        }

  34.         ShaderEffect {
  35.             anchors.top: img.bottom
  36.             width: img.width
  37.             height: img.height
  38.             anchors.left: img.left

  39.             property variant source: img
  40.             property size sourceSize: Qt.size(0.5 / img.width, 0.5 / img.height)

  41.             fragmentShader: "
  42.                     varying highp vec2 qt_TexCoord0;
  43.                     uniform lowp sampler2D source;
  44.                     uniform lowp vec2 sourceSize;
  45.                     uniform lowp float qt_Opacity;
  46.                     void main() {

  47.                         lowp vec2 tc = qt_TexCoord0 * vec2(1, -1) + vec2(0, 1);
  48.                         lowp vec4 col = 0.25 * (texture2D(source, tc + sourceSize)
  49.                                                 + texture2D(source, tc- sourceSize)
  50.                                                 + texture2D(source, tc + sourceSize * vec2(1, -1))
  51.                                                 + texture2D(source, tc + sourceSize * vec2(-1, 1))
  52.                                                );
  53.                         gl_FragColor = col * qt_Opacity * (1.0 - qt_TexCoord0.y) * 0.2;
  54.                     }"
  55.         }
  56.     }
  57. }
复制代码





附件: 您需要 登录 才可以下载或查看,没有帐号?立即注册
回复

使用道具 举报

累计签到:5 天
连续签到:1 天
2018-1-4 11:27:29 显示全部楼层
最终想要实现的效果,如图
回复

使用道具 举报

累计签到:5 天
连续签到:1 天
2018-1-5 16:32:11 显示全部楼层
已经通过其他方式做出。
答案:http://blog.csdn.net/fan_xingwang/article/details/78982571
回复

使用道具 举报

累计签到:5 天
连续签到:1 天
2018-1-11 15:37:49 显示全部楼层
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

公告
可以关注我们的微信公众号yafeilinux_friends获取最新动态,或者加入QQ会员群进行交流:190741849、186601429(已满) 我知道了