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 を指定した場合も、ちゃんとクリップしろよって思うけど。