QMLにて、動的生成したエレメントのクリッピング描画

QMLのクリッピングの基本

QMLでエレメントを重ねていったときに、ベースとなる Rectangle をはみ出さずに描画したいというときは、clipプロパティを指定するだけです。描画領域の外にはみ出てしまうアニメーションを作るときなどで使います。

    Rectangle {
        id: parentRect
        x: 25; y: 25
        width: 150; height: 150
        color: "red"
        clip: true

        Rectangle {
            id: childRect
            x: 25; y: 25
            width: 150; height: 150
            color: "green"
        }
    }

createObject()でエレメントを動的生成する場合

createObject() では第一引数に parent のエレメントを指定します。
しかし、ここでclip有効な parent を指定しても クリップを無視して描画がはみ出てしまいます。

    Rectangle {
        id: parentRect
        x: 25; y: 25
        width: 150; height: 150
        color: "red"
        clip: true
    }

    Component.onCompleted: {
        var hoge = hogeRect.createObject(parentRect);
    }

    Component {
        id: hogeRect
        Rectangle {
            x: 25; y: 25
            width: 150; height: 150
            color: "green"
        }
    }

この場合、ベースとなるエレメントと同じサイズの透明な Rectangle を重ねて、それをcreateObject() の parent としてあげると、はみ出さずに描画してくれます。

下のコードでいうと、transparentRect が parentRect によってクリップされるので、動的生成したいエレメントの親を transparentRect にしてあげれば良いということになります。

    Rectangle {
        id: parentRect
        x: 25; y: 25
        width: 150; height: 150
        color: "red"
        clip: true

        Rectangle {
            id: transparentRect
            width: parent.width; height: parent.height
            color: "transparent"
        }
    }

    Component.onCompleted: {
        var hoge = hogeRect.createObject(transparentRect);
    }

    Component {
        id: hogeRect
        Rectangle {
            x: 25; y: 25
            width: 150; height: 150
            color: "green"
        }
    }

微妙に不具合な気もしますけど。。。

createObject() で parentRect を指定した場合も、ちゃんとクリップしろよって思うけど。