Unsolved Flickable is weird

[zenghsing]

I try to implement to zoom-in , zoom-out and move for my the screen of my paint item in QML?
Hence, I try to use Flickable.
There is a Rectangle(id:rect1) contained Flickable{id: flick}.
And Flickable{id: flick} contained QuickPaintedStitch{id:designStitch}.
The color of Rectangle is lightsteelblue.
The color of designStitch is yellow.
I find the yellow area is above the lightsteelblue area.
It is very weird for my application.
Could I let the yellow area showing "in the lightsteelblue area" when I zoom-in ( or move or zoom-out) ?

My code:

import QtQuick 2.0
import MYWidget 1.0
Item {
property alias name:designStitch.name
//property var currentFrame: undefined
property real surfaceViewportRatio: 1//1.5

Rectangle{
id:rect1
width: parent.width
height:parent.height
color: "lightsteelblue"

Flickable{
id: flick
anchors.fill: parent
contentWidth: parent.width * surfaceViewportRatio
contentHeight: parent.height * surfaceViewportRatio

QuickPaintedStitch{
id:designStitch
//objectName:"mStitchSelectPreview"
width:parent.width
height:parent.height
anchors.fill:parent
PinchArea{
anchors.fill: parent
pinch.target: designStitch
//pinch.minimumRotation: -360
//pinch.maximumRotation: 360
pinch.minimumScale: 0.1
pinch.maximumScale: 10
pinch.dragAxis: Pinch.XAndYAxis
// onPinchStarted: setFrameColor();
// function setFrameColor() {
// console.log(currentFrame)
// if (currentFrame){
//
console.log("black")
// rect1.color =
"black";
// //currentFrame.border.color
= "black";
// }
// currentFrame = designStitch;
// //currentFrame.border.color =
"red";
// rect1.color = "red";
// console.log("red")
// }
}

}
}
}
}