QML Image Zoom
Unsolved
QML and Qt Quick
-
Hi,
The Window of my program includes three parts (with blue,red,yellow background).
I have an image in the red part.
I use a PinchArea that contains a MouseArea in the photo to handle dragging and pinch zooming of the photo.
The user can drag the image in the under yellow and red section, but I want User drag image just into red section.
main.qml:RowLayout { Rectangle { Layout.fillHeight: true Layout.fillWidth: true color: "red" ColumnLayout { anchors.fill: parent spacing: 0 RowLayout { Layout.preferredHeight: 0.06*parent.height Layout.fillHeight: false Layout.fillWidth: true Rectangle { id:rectToolBar Layout.fillHeight: true Layout.fillWidth: true color: "#2196f3" ColumnLayout { anchors.fill: parent RowLayout { anchors.fill: parent Layout.fillWidth: true Layout.fillHeight: true ToolBar { anchors.fill: parent Layout.fillHeight: true Layout.alignment: Qt.RightToLeft style: ToolBarStyle { background: Rectangle { color: "transparent" } } RowLayout { anchors.fill: parent MyToolButton{ id:tbCapture iconSource:"images/capture.png" MouseArea { id: maCapture anchors.fill: parent anchors.margins: -10 hoverEnabled:true visible: camera.imageCapture.ready onClicked: { camera.imageCapture.capture() } cursorShape: Qt.PointingHandCursor } } } } } } } } RowLayout { spacing: 0 Layout.fillHeight: true Layout.fillWidth: true Rectangle{ Layout.fillHeight: true Layout.fillWidth: true color: "transparent" Camera { id: camera imageProcessing.whiteBalanceMode: CameraImageProcessing.WhiteBalanceFlash exposure { exposureCompensation: -1.0 exposureMode: Camera.ExposurePortrait } flash.mode: Camera.FlashRedEyeReduction imageCapture { onImageCaptured: { photoPreview.source = preview // Show the preview in an Image } } } VideoOutput { id: viewfinder source: camera anchors.fill: parent focus : visible visible: !capture } PhotoPreview { id : photoPreview anchors.fill : parent focus: visible visible: capture } } } } } Rectangle { id:inputRect Layout.fillHeight: true Layout.preferredWidth: 0.3*parent.width color: "yellow" } }PhotoPreview.qml:
Item { property alias source :image.source signal closed id:mywin property int highestZ: 0 property real defaultSize: mywin.width property var currentFrame: undefined property real surfaceViewportRatio: 1.5 ScrollView { anchors.fill: parent frameVisible: true highlightOnFocus: true style: ScrollViewStyle { transientScrollBars: true handle: Item { implicitWidth: 14 implicitHeight: 26 Rectangle { color: "#424246" anchors.fill: parent anchors.topMargin: 6 anchors.leftMargin: 4 anchors.rightMargin: 4 anchors.bottomMargin: 6 } } scrollBarBackground: Item { implicitWidth: 14 implicitHeight: 26 } } Flickable { id: flick anchors.fill: parent contentWidth: parent.width contentHeight: parent.height Rectangle { id: photoFrame width: parent.width height: parent.height color:"transparent" scale:defaultSize / parent.width Behavior on scale { NumberAnimation { duration: 200 } } Behavior on x { NumberAnimation { duration: 200 } } Behavior on y { NumberAnimation { duration: 200 } } smooth: true antialiasing: true Image { id:image anchors.fill: parent fillMode: Image.PreserveAspectFit smooth: true } PinchArea { anchors.fill: parent pinch.target: photoFrame pinch.minimumRotation: -360 pinch.maximumRotation: 360 pinch.minimumScale: 0.1 pinch.maximumScale: 10 pinch.dragAxis: Pinch.XAndYAxis property real zRestore: 0 onSmartZoom: { if (pinch.scale > 0) { photoFrame.rotation = 0; photoFrame.scale = Math.min(mywin.width, mywin.height) / Math.max(image.sourceSize.width, image.sourceSize.height) * 0.85 photoFrame.x = flick.contentX + (flick.width - photoFrame.width) / 2 photoFrame.y = flick.contentY + (flick.height - photoFrame.height) / 2 zRestore = photoFrame.z photoFrame.z = ++mywin.highestZ; } else { photoFrame.rotation = pinch.previousAngle photoFrame.scale = pinch.previousScale photoFrame.x = pinch.previousCenter.x - photoFrame.width / 2 photoFrame.y = pinch.previousCenter.y - photoFrame.height / 2 photoFrame.z = zRestore --mywin.highestZ } } MouseArea { id: dragArea hoverEnabled: true anchors.fill: parent drag.target: photoFrame scrollGestureEnabled: false // 2-finger-flick gesture should pass through to the Flickable onPressed: { photoFrame.z = ++mywin.highestZ; } onWheel: { if (wheel.modifiers & Qt.ControlModifier) { photoFrame.rotation += wheel.angleDelta.y / 120 * 5; if (Math.abs(photoFrame.rotation) < 4) photoFrame.rotation = 0; } else { photoFrame.rotation += wheel.angleDelta.x / 120; if (Math.abs(photoFrame.rotation) < 0.6) photoFrame.rotation = 0; var scaleBefore = photoFrame.scale; photoFrame.scale += photoFrame.scale * wheel.angleDelta.y / 120 / 10; } } } } } } ScrollBar { id: verticalScrollBar width: 12; height: flick.height-12 anchors.right: flick.right opacity: 0 orientation: Qt.Vertical position: flick.visibleArea.yPosition pageSize: flick.visibleArea.heightRatio } ScrollBar { id: horizontalScrollBar width: flick.width-12; height: 12 anchors.bottom: flick.bottom opacity: 0 orientation: Qt.Horizontal position: flick.visibleArea.xPosition pageSize: flick.visibleArea.widthRatio } } }