C

Qt Quick ウルトラライト層の例

Qt Quick Ultralite でのレイヤーの使い方を示します。

概要

この例では、SpriteLayer 、ItemLayer 、ImageLayer を使って、Layers QMLモジュールを使ってアプリケーションを作成する方法を示しています。 3つのページが含まれています：

Layersはメインのユーザーインターフェイスを定義します。
Animating item layer は、テキスト、Qtロゴ、アニメーションのデモのための動く矩形を含む、1つの白い矩形のコンテンツを定義します。
動くアイテムレイヤーは、動くQtロゴのアニメーションを定義します。MovingImageLayer.qmlを参照してください。

対象プラットフォーム

RH850 D1M1A

プロジェクトの構成

レイヤーのサンプルは、CMakeLists.txt 、layers.qml 、MovingImageLayer.qml 、AnimatingItemLayer.qml 、background-big.png 、qt-logo.png の6つのファイルで構成されています。

CMakeプロジェクトファイルには、基本的なビルドスクリプトが含まれています。

layers.qml SpriteLayer MovingImageLayer.qml はの使い方を、は itemLayer の使い方を示しています。ImageLayer AnimatingItemLayer.qml

このプロジェクトには2つのイメージbackground-big.png とqt-logo.png があります。

CMakeプロジェクトファイル

CMakeプロジェクトファイルでは、background-big.png の色深度を16bppに設定するQmlProjectコンフィギュレーションを使用しています。これは、32bppの画面に16bppの画像をブレンドするデモに使用します。

...
        ImageFiles {
                files: [
                        "background-big.png"
                ]
                MCU.resourceImagePixelFormat: "RGB565"
        }
...

レイヤー

layers.qml 、メインのユーザーインターフェイスが記述されています。

レイヤーを分割するために、テキストと画像を含む3つの白い矩形が作成されます。それぞれの矩形は、積み重ねの順序を定義するために異なるZ値を持ち、レイヤーの内容が更新される頻度を定義するために異なる更新間隔を持っています。

SpriteLayer spriteLayer32bpp という ID で、6 つの動く Qt ロゴを作成し、Z 値を使用して各レイヤーのスタック順序を定義する方法を示します。SpriteLayer には、複数の画像とアイテムのレイヤーを含めることができ、これらはスプライトまたはサブレイヤーと呼ばれます。
ItemLayer IDがbpp32layerのものは、リフレッシュ間隔が異なるアイテムのレンダリングを示しています。この場合、赤いボックスは4つ目の更新間隔ごとに移動します。レンダリングのヒントは、バックエンドが適切なレイヤーの実装を選択するための方法で、特定のヒントが有効になっている場合は、わずかに異なるレンダリングアプローチを使用することができます。この例では、プラットフォームに対して、速度の最適化よりもサイズの最適化を優先するようにヒントを出しています。
SpriteLayer IDがspriteLayer16bppの場合は、32bppの画面上で16bppの背景画像とItemLayer 、そのアイテムをブレンドすることを示しています。

import QtQuick 2.15
import QtQuickUltralite.Layers 2.0

ApplicationScreens {
    Screen {
        id: screen
        ...
        AnimatingItemLayer {
            id: bpp32layer
            z: 2
            ...
            renderingHints: ItemLayer.OptimizeForSize
            refreshInterval: 4
            colorDepth: 32
            opacity: 0.6
        }

        SpriteLayer {
            id: spriteLayer32bpp
            z: 4
            ...
            AnimatingItemLayer {
                z: 2
                ...
            }

            Repeater {
                model: 6
                MovingImageLayer {
                    z: 1
                    container: spriteLayer32bpp
                    source: "qt-logo.png"
                }
            }
        }

        SpriteLayer {
            id: spriteLayer16bpp
            z: 0
            ...
            ImageLayer {
                id: background
                z: 0
                anchors.centerIn: parent
                source: "background-big.png"
            }

            AnimatingItemLayer {
                z: 1
                ...
                colorDepth: 16
                depth: ItemLayer.Bpp16
            }
        }

        AnimatingItemLayer {
            depth: ItemLayer.Bpp16Alpha
            z: 1
            width: screen.boxWidth
            height: screen.boxHeight

            anchors.right: spriteLayer16bpp.right
            anchors.bottom: spriteLayer16bpp.bottom
            anchors.margins: screen.marginWidth

            colorDepth: 16
            opacity: 0.6
        }
    }

アニメーションアイテムレイヤー

AnimatingItemLayer.qml ItemLayer ItemLayer は、動的な Ultralite アイテムを含むことができるレイヤーです。AnimatingItemLayerはこの例ではcolorDepthプロパティを使って。Qt Quick ItemLayer

import QtQuick 2.15
import QtQuickUltralite.Layers 2.0

ItemLayer {
    id: itemLayer

    property int colorDepth: 32
    property real t: 0

    depth: (colorDepth === 32) ? ItemLayer.Bpp32 : ItemLayer.Bpp16Alpha
    ...
    Rectangle {
        anchors.fill: parent
        color: "white"

        Rectangle {
            id: textBox
            ...
            Column {
                id: textColumn
                ...
                Text {
                    text: colorDepth + " bpp item layer"
                    ...
                }
                Text {
                    text: "Refresh interval: " + itemLayer.refreshInterval
                    ...
                }
            }
        }

        Image {
            ...
            source: "qt-logo.png"
        }

        Rectangle {
            ...
            color: "red"
        }
    }
}

MovingImageLayer

MovingImageLayer.qml は、ImageLayer を1つ作成し、そのアニメーションを定義します。

import QtQuick 2.15
import QtQuickUltralite.Layers 2.0

ImageLayer {
    id: root

    Component.onCompleted: {
        root.x = 1 + Math.floor(Math.random() * (container.width - root.width - 2))
        root.y = 1 + Math.floor(Math.random() * (container.height - root.height - 2))
        ...
    }

    onTChanged: {
        root.x += vx
        root.y += vy
        ...
    }

    property real t: 0
    NumberAnimation on t {
        running: true
        loops: Animation.Infinite
        from: 0
        to: 1
    }
}

ファイル

Images：

特定の Qt ライセンスの下で利用可能です。
詳細を確認してください。