qt qml：水平淡化图像（即从左到右......不是整个图像）

Posted 2023-02-17

【中文标题】qt qml：水平淡化图像（即从左到右......不是整个图像）

【英文标题】：qt qml: fade image horizontally (i.e from left to right ... not whole image)

【发布时间】：2012-10-30 12:22:05

【问题描述】：

im 使用 PathLine 一次水平显示 3 张图像。 左右图像需要显示为从左侧褪色 50% 和从右侧褪色 50%。 在这里我不能使用黑色矩形渐变来显示淡入淡出效果，因为我的父母是 20% 透明的，它漂浮在背景视频上。

那么有什么方法可以将 opacity 属性应用为水平淡入淡出动画？

【问题讨论】：

我认为您必须使用着色器效果来执行此操作...您使用的是 QML1 (Qt4) 还是 QML2 (Qt5)？

m 使用 Qt 4.7。我已经浏览了 ShaderEffects 示例，但不明白我将如何将它用于我的目的。我只需要图像在接近 pathLine 的边缘时通过动画逐渐淡出

所以你基本上需要的是每像素不透明度。我想知道这对于整个场景是否相同（所以你只是在整个场景的边缘有一个淡出）或者你是否想将这样的 alpha 蒙版应用于单个图像。你能试着画一个草图或者更具体地说明动画是如何工作的吗？我不明白的是：你说你有一个淡入淡出动画。但我认为你想沿着一条路径移动图像，当它们离开场景时，最左边和最右边的图像会消失。所以本质上你希望场景边界是平滑的？

是的，你得到它的仪式..实际上我没有 10+ 的声誉，所以不允许我附加图像..我可以在边缘的整个父级应用 alpha 蒙版（黑色到透明渐变）。 . 但由于我的父母是透明的（即使菜单滑出也能观看背景视频）我无法屏蔽.. 它会在我的菜单中显示黑色补丁而不是不透明度为 0.6 的完整黑色背景..

关于淡入淡出动画......只是当图像从中心向右移动时，我想从左到右逐渐降低不透明度......好像它接近黑色渐变蒙版

【参考方案1】：

使用QML ShaderEffectItem element，您可以使用着色器程序将后期效果添加到 QML 项目。这使您可以在 GPU 上制作一些图形效果。

正如您在我上面链接的文档中看到的，这可以是例如波浪效果。通常，您对每个输出像素应用一个小“程序”。这就是GLSL中所谓的fragment shader。

为了让您了解如何在项目上实现 alpha 蒙版（这可能是您的场景，其中包含您正在制作动画的路径上的图像），我将给出一个示例，在该示例中我实现了一个简单的线性渐变作为 Alpha 蒙版，左边是零不透明度，右边是完全不透明度。

import QtQuick 1.0
import Qt.labs.shaders 1.0

Item 
    width: 300
    height: 300

    id: wrapper

    Item 
        id: scene
        anchors.fill: parent
        // Here is your scene with the images ...
    

    ShaderEffectItem 
        anchors.fill: wrapper

        // Any property you add to the ShaderEffectItem is accessible as a
        // "uniform" value in the shader program. See GLSL doc for details.
        // Essentially, this is a value you pass to the fragment shader,
        // which is the same for every pixel, thus its name.

        // Here we add a source item (the scene) as a uniform value. Within the
        // shader, we can access it as a sampler2D which is the type used to
        // access pixels in a texture. So the source item becomes a texture.
        property variant source: ShaderEffectSource
        
            sourceItem: scene // The item you want to apply the effect to
            hideSource: true  // Only show the modified item, not the original
        

        // This is the fragment shader code in GLSL (GL Shading Language)
        fragmentShader: "
        varying highp vec2 qt_TexCoord0;  // The coords within the source item
        uniform sampler2D source;         // The source item texture
        void main(void)
        
            // Read the source color of the pixel
            vec4 sourceColor = texture2D(source, qt_TexCoord0);

            // The alpha value of the mask
            float alpha = qt_TexCoord0.x; // = 0.0 at left, 1.0 at right border

            // Multiply the alpha mask on the color to be drawn:
            sourceColor *= alpha;

            // Write the pixel to the output image
            gl_FragColor = sourceColor;
        
        "
    

着色器程序中最重要的一行是alpha 变量的值。在这个小例子中，我只是将纹理坐标的 X 分量设置为 alpha 值，因此在左边界为 0，在右边界为 1。请注意，纹理坐标不是以像素为单位，而是以 [ 0..1] 范围。如果要访问像素坐标，可以使用gl_FragCoord.x/y。请注意，y 是从下到上测量的，因此 0 是下边框，height 是上边框。默认情况下，您无法访问整个生成图像的height，但因此我们可以使用制服。只需分配一个新的property int h: height 并在着色器中使用uniform float h 访问它。

【讨论】：

嗯...好像出了点问题...但我不知道是什么。

我的问题是这样的：***.com/q/13161296也许你没有这个问题...

让我试试这个......但我仍然觉得不能有更简单的解决方案来解决这个问题......就像 PathLine 的褪色边缘之类的？ :)

@nit 很抱歉，我认为 Qt 不能开箱即用地为您提供这个。但是，Qt-Components 项目中也有类似 alpha 遮罩效果（但称为不同的...）的东西。但我认为这将在软件中完成，如果你的场景填满整个屏幕，这将是非常低效的。您绝对应该采用 GPU 加速的方式来获得这种效果。另请注意，对于此示例，您必须启用 OpenGL。在仅 QML 的项目中，将 -opengl 添加到 qmlviewer 参数；在 C++ 项目中，如果您还没有这样做，请使用 QGLWidget 作为视口。

嗨..我附上了图片（编辑了我的问题）..你认为我会用着色器的效果来实现它