C

Qt Quick ウルトラライト traveo_t2g_effects 例

Infineon TRAVEO T2GのカスタムGraphical Effectsのデモ。

概要

traveo_t2g_effects サンプルは、Infineon TRAVEO T2G上のカスタムグラフィカル効果にペイントアイテムAPIを使用することを示します。

注: この例は、Infineon TRAVEO T2Gプラットフォームでのみサポートされています。

この例では、左から順に以下のエフェクトを示します：

針の軌跡
ガウスブラー
脱色
不透明度マスク

プロジェクトの構成

プロジェクトは、サンプルコードと、エフェクトモジュールのソースを含むサブディレクトリで構成されています。カスタムエフェクトを使用するには、モジュールのソースをアプリケーションのディレクトリにコピーしてください。

エフェクト・モジュールをインクルードするには、メインのQmlProjectファイルに対応するモジュール：

        ModuleFiles {
                files: [
                        "traveo_t2g_effects_speed_module.qmlproject",
                        "effects/traveo_t2g_effects_module.qmlproject"
                ]
        }

これにより、以下のインポートを追加することで、QMLソースにエフェクトモジュールを含めることができます：

import TviiEffects 1.0

針跡エフェクト

ここでは、針跡エフェクトの使い方を説明します：

NeedleTrail {
    anchors.centerIn: parent
    width: 300
    height: 300
    mask: "images/needle-mask.png"
    rotation: root.angle
}

ガウスぼかし効果

ガウシアンブラーエフェクトの使い方です：

GaussianBlur {
    anchors.verticalCenter: parent.verticalCenter
    width: 128
    height: 128
    source: "images/juno.png"
    blur: 2.5 * t
}

彩度除去

脱色効果の使い方は以下の通りです：

Desaturation {
    anchors.verticalCenter: parent.verticalCenter
    width: 128
    height: 128
    source: "images/ak.png"
    saturation: 1 - t
}

不透明度マスク

不透明度マスクの使い方です：

Image {
    source: "images/cover.jpg"
}

ImageWithOpacityMask {
    source: "images/cover.jpg"
    mask: "images/opacity-mask.png"
    transform: [
        Scale {
            yScale: -1
        },
        Translate {
            y: 128
        }
    ]
}

この例では、不透明度マスクを使用して、垂直方向に反転した画像の反射を作成し、徐々にフェードアウトします。

画像アセットの要件

カスタムエフェクトを適用するには、以下の画像アセット固有の最適化が無効になっている必要があります。

qulrcc 。
ARGB32 フォーマットを保持するため、needle-normal.png でモノクロからアルファへの最適化。

さらに、VRAM不足を防ぐため、一部の画像ではキャッシュが無効になります。

以下はその例です：

        ImageFiles {
                files: [
                        "images/needle-mask.png",
                        "images/ak.png",
                        "images/juno.png",
                        "images/cover.jpg",
                        "images/opacity-mask.png"
                ]
                MCU.Experimental.resourceSplitImageOptimization: false
                MCU.resourceCachePolicy: "NoCaching"
        }
        ImageFiles {
                files: [
                        "images/gauge-gauge-frame.png",
                ]
                MCU.resourceCachePolicy: "NoCaching"
        }

ファイル

画像：

詳細はこちらをご覧ください。