QML Image Zoom



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

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.