1

ここに画像の説明を入力してくださいPathLineを使用して一度に3つの画像を水平方向に表示しています。左右の画像は、左から50％フェード、右から50％フェードとして表示する必要があります。ここでは、親が20％透明で、背景ビデオに浮いているため、黒い長方形のグラデーションを使用してフェード効果を表示することはできません。

では、不透明度プロパティを水平フェードアニメーションとして適用する方法はありますか？

4

1 に答える 1

4

QMLShaderEffectItem要素を使用すると、シェーダー プログラムを使用してポスト エフェクトを QML アイテムに追加できます。これにより、GPU でいくつかのグラフィック効果を実行できます。

上でリンクしたドキュメントでわかるように、これはたとえば波の効果である可能性があります。一般に、すべての出力ピクセルに小さな「プログラム」を適用します。これは、 GLSLのいわゆるフラグメント シェーダーです。

アイテムにアルファ マスクを実装する方法を理解するために (これは、アニメーション化しているパス上の画像を含むシーンである可能性があります)、次のように単純な線形グラデーションを実装する例を示します。アルファ マスク。左側は不透明度ゼロ、右側は完全な不透明度です。

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 コンポーネントをアルファ値として設定しただけなので、左側の境界では 0、右側の境界では 1 です。テクスチャ座標はピクセルではなく [ 0..1] 範囲。gl_FragCoord.xピクセル座標にアクセスする場合は、 /を使用できますy。yは下から上に測定されるため、0 が下の境界線で、が上の境界線であることに注意してくださいheight。デフォルトheightでは、結果の画像全体にアクセスすることはできませんが、ユニフォームを使用できます。新しいものを割り当てて、シェーダーproperty int h: heightで使用してアクセスするだけです。uniform float h

于 2012-10-31T14:41:23.747 に答える