Qt Quick 示例 - 着色器效果
Qt Quick 示例演示了着色器特效的使用。
本示例演示了可以在Qt Quick 中使用着色器执行的几种视觉效果。本示例在一个文本和几幅图像上应用了五种不同的效果。如需了解更多信息，请访问 Qt Quick 中的重要概念。 Graphical Effects
运行示例
运行示例 Qt Creator，打开Welcome 模式，然后从Examples 中选择示例。更多信息，请参阅Qt Creator: 教程：构建并运行。
使用着色器效果
ShaderEffect 类型通常使用ShaderEffectSource 对其他类型进行操作：
ShaderEffectSource { id: theSource sourceItem: theItem }
在上述片段中，theItem 是文件中复杂 QML 对象的 ID。
ShaderEffects 可以将此ShaderEffectSource 作为片段着色器中的纹理：
fragmentShader: "content/shaders/wobble.frag.qsb"
为了支持多种图形 API，而不仅仅是 OpenGL，着色器源没有嵌入 QML。所引用的.qsb 文件是一个预生成的着色器包，其中包含着色器代码的多个变体。运行时，Qt Quick 会根据运行时使用的图形 API（Vulkan、Metal、Direct3D 11 或 OpenGL）选择合适的着色器。.qsb 文件是离线生成的，并通过 Qt 资源系统与可执行文件捆绑在一起。
您可以在着色器中使用ShaderEffect 上的任何自定义属性。这使得动画着色器代码变得非常容易：
property variant source: theSource property real bend property real minimize property real side: genieSlider.value SequentialAnimation on bend { loops: Animation.Infinite NumberAnimation { to: 1; duration: 700; easing.type: Easing.InOutSine } PauseAnimation { duration: 1600 } NumberAnimation { to: 0; duration: 700; easing.type: Easing.InOutSine } PauseAnimation { duration: 1000 } } SequentialAnimation on minimize { loops: Animation.Infinite PauseAnimation { duration: 300 } NumberAnimation { to: 1; duration: 700; easing.type: Easing.InOutSine } PauseAnimation { duration: 1000 } NumberAnimation { to: 0; duration: 700; easing.type: Easing.InOutSine } PauseAnimation { duration: 1300 } }
ShaderEffects 也可以使用自定义 vertext 着色器。在ShaderEffect 上设置网格属性可提供更多顶点供您操作，从而实现更多效果。
mesh: Qt.size(10, 10) vertexShader: "content/shaders/genie.vert.qsb"
© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.
