PInch zoom and crop



  • Hi, I would like to pinch, zoom and crop the image which i can select using rectangle . The rectangle can be resizable, as in I can change how much I want to crop as well. Once pinched and zoomed, it is a flickable image and I should be able to crop anywhere. I tried but somehow the scale of the image is not changing when I finally crop. PLease have a look at the code. ANy help on how I can crop?



  • @
    import QtQuick 1.1
    Rectangle {
    id:pinchRect
    width: 360
    height: 640

    property bool cropFlag:false
    
    signal cropImage(int x, int y,int w, int h)
    signal imageCropped(string path)
    onImageCropped: {
        console.log(path)
        croppedImage.source = path
        croppedImageRect.visible = true
        pinchRect.opacity = 1
    
    }
    color: "gray"
    Flickable {
        id: flick
        anchors.fill: parent
        contentWidth: dummyimage.width//imgRect.width//850
        contentHeight:dummyimage.height// imgRect.height//500
    
        PinchArea {
            id:pinchy
            width: Math.max(flick.contentWidth, flick.width)
            height: Math.max(flick.contentHeight, flick.height)
            enabled:(cropFlag)? false:true
    
            function distance(p1, p2) {
                var dx = p2.x-p1.x;
                var dy = p2.y-p1.y;
                return Math.sqrt(dx*dx + dy*dy);
            }
    
            property real initialDistance
            property real initialContentWidth
            property real initialContentHight
    
            onPinchStarted: {
                initialDistance = distance(pinch.point1, pinch.point2);
                initialContentWidth = flick.contentWidth;
                initialContentHight = flick.contentHeight;
            }
    
            onPinchUpdated: {
                // adjust content pos due to drag
                flick.contentX += pinch.previousCenter.x - pinch.center.x
                flick.contentY += pinch.previousCenter.y - pinch.center.y
    
                // resize content
                var currentDistance = distance(pinch.point1, pinch.point2);
                var scale = currentDistance/initialDistance;
                flick.resizeContent(initialContentWidth*scale, initialContentHight*scale, pinch.center)
                if (pinch.pointCount >= 2) {
                    currentDistance = distance(pinch.point1, pinch.point2);
                    scale = currentDistance/initialDistance;
                    flick.resizeContent(initialContentWidth*scale, initialContentHight*scale, pinch.center)
    
                }
    
    
            }
    
    
            onPinchFinished: {
    
                //   mainFunction.save(image,"qml/contacts/saved-test.png")
                flick.returnToBounds()
            }// Move its content within bounds.
            Rectangle {
                id:imgRect
                width: flick.contentWidth
                height:flick.contentHeight
                color: "white"
                Image {
                    id:image
                    anchors.fill: parent
                    source: "mainMenuBG.jpg"
                    MouseArea {
                        anchors.fill: parent
                        onDoubleClicked: {
                            flick.contentWidth = dummyimage.width
                            flick.contentHeight = dummyimage.height
                        }
                    }
                }
            }
    
            Rectangle {
                id: testRect
                width: 200
                height: 200
                x:flick.contentX
                y:flick.contentY
                z: 1
                opacity: 1
                visible:(cropFlag)?true:false
    
                MouseArea {
                    anchors.fill: parent
                    drag.target: testRect
                    drag.axis: Drag.XandYAxis
                    drag.minimumX: 0
                    onPositionChanged: {
                        console.log("Dragged...")
                        testImage1.source = ""
                        testImage1.source = image.source
                        testImage1.x = -testRect.x
                        testImage1.y = -testRect.y
                        testImage1.fillMode = Image.PreserveAspectCrop
                        testImage1.scale = -image.scale
                    }
                    onReleased: {
                        console.log("Released..")
                        testImage1.source = ""
                        testImage1.source = image.source
                        testImage1.x = -testRect.x
                        testImage1.y = -testRect.y
                        testImage1.fillMode = Image.PreserveAspectCrop
                        testImage1.scale = image.scale
                       
                    }                   
                }
            }
    
            Rectangle {
                z: 0
                id: testRect12
                width: 0
                height: 200
                border.color: "black"
                border.width: 5
                anchors.bottom: parent.bottom
                anchors.right: parent.right
                visible: false
                Image {
                    id: testImage1
                    // crop the image source dimensions to max 1280 pixels
                }
            }
        }
    }
    

    @



  • @
    Rectangle {
    id: cropBtn
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    width: 125
    height: 66
    z:1
    color: "#ffffff"
    Text {
    x: 24
    y: 21
    text: qsTr("Crop")
    font.bold: true
    verticalAlignment: Text.AlignVCenter
    horizontalAlignment: Text.AlignHCenter
    font.pixelSize: 20
    }
    MouseArea {
    anchors.fill: parent
    onClicked: {
    testRect.visible = true;
    flick.opacity = 0.4
    cropFlag = true;
    pinchy.enabled = false;
    }
    }
    }

    Rectangle{
        id:doneBtn
        anchors.bottom: parent.bottom
        anchors.left: cropBtn.right
        width: 125
        height: 66
        z:1
        color: "#ffffff"
        Text {
            x: 24
            y: 21
            text: qsTr("Done")
            font.bold: true
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.pixelSize: 20
        }
    
        MouseArea {
            anchors.fill: parent
            onClicked: {
                pinchRect.cropImage(testRect.x,  testRect.y, testRect.width, testRect.height)
            }
        }
    }
    
    Rectangle {
        id: croppedImageRect
        height: parent.height
        width: parent.width
        opacity: 1
        color: "white"
        visible: false
        x: 0
        y: 0
        z: 1
        Image {
            id: croppedImage
            x: 0
            y: 0
            anchors.fill: parent
            fillMode: Image.PreserveAspectFit
            sourceSize.height: 640
            MouseArea {
                anchors.fill: parent
                onClicked: {
                   croppedImageRect.visible = false
                  
                }
            }
            onSourceChanged: {
                console.log("onSourceChanged")
            }
        }
    }
    
    Image {
        id:dummyimage
        anchors.fill: parent
        visible:false
        source: "mainMenuBG.jpg"
    }
    Text {
        id: scaleText
        anchors.centerIn: parent
        font.pixelSize: 30
        text: flick.contentHeight/500;
    }
    

    }
    @



  • Have pasted the code in parts.
    @
    void MainController::cropImageClicked(int x, int y , int w, int h)
    {
    ImageCache::getInstace()->croppedImage = ImageCache::getInstace()->image.copy(x,y,w,h);
    ImageCache::getInstace()->isCroppedImage = true;
    viewer->engine()->addImageProvider("croppedimageprovider", qmlImageProvider);
    // timer->start();

    emit this->imageCropComplete("image://croppedimageprovider/image.png");
    

    }
    @


Log in to reply
 

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