C

Qt Quick Ultraliteレイヤーの例

Qt Quick Ultraliteでのレイヤーの使用方法を解説します。

概要

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

Layers はメインのユーザーインターフェースを定義します。layers.qml を参照してください。
「Animating item layer」は、テキスト、Qtロゴ、およびアニメーションを実演するための動く長方形を含む単一の白い長方形のコンテンツを定義します（AnimatingItemLayer.qmlを参照）。
「Moving item layer」は、動くQtロゴのアニメーションを定義しています。MovingImageLayer.qmlを参照してください。

複数のアイテムレイヤーが重なり合っている様子を示すレイヤーのスクリーンショット例。アニメーションが適用されているもの、移動しているもの、更新間隔が異なるものなどがあります。

対象プラットフォーム

RH850 D1M1A

プロジェクト構造

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

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

layers.qml SpriteLayer の使用方法を示しています。はの使用方法を示すために使用されており、は itemLayer の使用方法を示しています。MovingImageLayer.qml ImageLayer AnimatingItemLayer.qml

このプロジェクトには、background-big.png とqt-logo.png の 2 つの画像が含まれています。

CMake プロジェクトファイル

CMake プロジェクトファイルでは、background-big.png の色深度を 16 bpp に設定する QmlProject 構成を使用しており、32 bpp の画面上で 16 bpp の画像をブレンドする方法を示しています。

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

レイヤー

layers.qml ファイルは、メインのユーザーインターフェースを記述しています。

レイヤーを区別するために、テキストと画像を含む 3 つの白い長方形が作成されています。各長方形には、重ね合わせ順序を定義するための異なる Z 値と、レイヤーのコンテンツが更新される頻度を定義するための異なるリフレッシュ間隔が設定されています。

SpriteLayer IDがspriteLayer32bppのレイヤーは、Z値を使用して各レイヤーの重ね順を定義する方法を示す、6つの動くQtロゴを作成します。SpriteLayer には、スプライトまたはサブレイヤーと呼ばれる複数の画像やアイテムレイヤーを含めることができます。
ItemLayer IDがbpp32layerのレイヤーは、異なるリフレッシュ間隔を持つアイテムのレンダリングを実演しています。この例では、赤いボックスは4回に1回のリフレッシュ間隔で移動します。レンダリングヒントは、バックエンドが適切なレイヤー実装を選択し、特定のヒントが有効になっている場合に若干異なるレンダリング手法を使用するための手段です。この例では、速度の最適化よりもサイズの最適化を優先するようプラットフォームに指示しています。
SpriteLayer IDがspriteLayer16bppの例では、32 bppの画面上で、16 bppの背景画像と、その上にアイテムを含む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

AnimatingItemLayer.qml は、テキスト、Qtロゴ、および動く赤いボックスを含む白い長方形からなる単一のItemLayer を作成します。ItemLayer は、動的なQt Quick Ultraliteアイテムを含めることができるレイヤーです。この例では、AnimatingItemLayerはcolorDepthプロパティを使用して、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 を作成し、そのアニメーションを定義します。

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
    }
}

ファイル：

画像：

特定のQtライセンスの下で利用可能です。
詳細はこちら。