QML之特效

目录

• 应用特效的方式
• 阴影
  • • • 外阴影
      • 内阴影
• 渐变
  • • • 锥型渐变
      • 线性渐变
      • 径向渐变
• 蒙版
  • • • OpacityMask
      • ThresholdMask

参考文档：https://doc.qt.io/qt-6/zh/qt5compat-graphicaleffects-qmlmodule.html

应用特效的方式

1. 在QML6中，可以使用QtGraphical Effects模块为用户界面添加视觉效果，包括内阴影，外阴影，渐变等。这个模块为了与Qt 5编写的应用程序兼容而提供的，使用时需要导入以下模块

import Qt5Compat.GraphicalEffects

2. 在QML6中使用MultiEffect类型

阴影

外阴影

外阴影（Drop Shadow）：阴影绘制在元素外部，产生元素"悬浮"在背景上的效果

1. 属性color：用于阴影的RGBA颜色值，默认是黑色的
2. horizontalOffset：阴影相对于源的水平偏移量
3. verticalOffset：阴影相对于源的垂直偏移量
4. radius：半径定义阴影的柔和度。半径越大，阴影边缘越模糊
5. samples：该属性定义边缘柔化模糊计算时每个像素取样的数量。数值越大，质量越好，但渲染速度越慢。理想的模糊效果使samples = 1 + radius * 2。
6. source ：阴影效果作用的源
7. spread：该属性定义阴影颜色在光源边缘附近的强化程度。数值范围为 0.0 至 1.0。默认情况下，该属性设置为0.0
8. transparentBorder：此属性决定特效是否有透明边框

内阴影

内阴影（Inner Shadow）：阴影绘制在元素内部，产生元素"凹陷"进去的效果。属性与外阴影雷同。

1. 阴影示例如下：

import QtQuick
import QtQuick.Controls
import Qt5Compat.GraphicalEffects

Window {
    visible: true
    width: 1920
    height: 1080
    Flow {
        anchors.fill: parent
        spacing: 30
        padding: 30

        Item {
            width:  300
            height:  300
            Rectangle {
                anchors.fill: parent
            }
            Image {
                anchors.centerIn: parent
                id: girlSource
                source: "images/test.jpg"
                sourceSize: Qt.size(parent.width, parent.height)
                smooth: true
            }
        }

        Item {
            width: 300
            height: 300

            Rectangle {
                anchors.fill: parent
            }

            Image {
                anchors.centerIn: parent
                id:girlDrowShadow
                source: "images/test.jpg"
                sourceSize: Qt.size(parent.width, parent.height)
                smooth: true
                visible: false
            }

            DropShadow {
                anchors.fill: girlDrowShadow
                horizontalOffset: 4 // 水平向右偏移4个像素
                verticalOffset: 0
                radius: 8.0
                samples: 17
                transparentBorder: false    // 边框不透明
                // 一些颜色值使用ARGB表示，第一个通道表示透明度
                color: "#800000FF"  //半透明蓝色
                source: girlDrowShadow
            }


        }
        Item {
            width: 300
            height: 300

            Rectangle {
                anchors.fill: parent
            }

            Image {
                anchors.centerIn: parent
                id:girlInnerShadow
                source: "images/test.jpg"
                sourceSize: Qt.size(parent.width, parent.height)
                smooth: true
                visible: false
            }

            InnerShadow {
                anchors.fill: girlInnerShadow
                horizontalOffset: 4 // 水平向右偏移4个像素
                verticalOffset: 0
                radius: 8.0
                samples: 17
                color: "#80FF00FF"  //半透明红色
                source: girlInnerShadow
            }


        }
    }
}

2. 效果：
   

渐变

这里说的渐变通常是颜色渐变

锥型渐变

锥形渐变：颜色围绕中心点旋转

1. 示例：

import QtQuick
import Qt5Compat.GraphicalEffects

Window {
    visible: true
    width:  1920
    height: 1080


    Item {
        width: 400
        height: 400
        anchors.centerIn: parent

        ConicalGradient {
            anchors.fill: parent
            angle: 0    // 0°方向(12点钟)
            gradient: Gradient {
              GradientStop {
                 position: 0.0  // 0°方向
                 color: "red"
              }
              GradientStop {
                 position: 0.5  // 180°方向
                 color: "green"
              }
              GradientStop {
                 position: 1.0  // 360°方向
                 color: "blue"
              }
            }
        }


    }

}

2. 效果
   

线性渐变

1. 示例：

import QtQuick
import Qt5Compat.GraphicalEffects

Window {
    visible: true
    width:  1920
    height: 1080


    Item {
        width: 400
        height: 400
        anchors.centerIn: parent

        LinearGradient {
            anchors.fill: parent
            start: Qt.point(0, 0)   // 起始位置
            end: Qt.point(0, 400)   // 终点位置
            gradient: Gradient {
                GradientStop { position: 0.0; color: "red" }
                GradientStop { position: 1.0; color: "blue" }
            }
        }


    }

}

2. 效果如下
   

径向渐变

径向渐变：颜色从一个中心点向外扩展的渐变效果

1. 示例：

import QtQuick
import Qt5Compat.GraphicalEffects

Window {
    visible: true
    width:  1920
    height: 1080


    Item {
        width: 400
        height: 400
        anchors.centerIn: parent

        RadialGradient {
            anchors.fill: parent
            gradient: Gradient {
                GradientStop { position: 0.0; color: "red" }
                GradientStop { position: 1; color: "blue" }
            }
        }


    }

}

2. 效果：
   

蒙版

在不破坏原图的情况下，用来隐藏或显示图像特定区域的工具或图层遮罩

OpacityMask

1. 属性maskSource：遮罩
2. source：要屏蔽的源

ThresholdMask

可以应用阈值将遮罩应用在源上