PInch zoom and crop

[saravenkat]

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?

[saravenkat]

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

@

[saravenkat]

@
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;
}

}
@

[saravenkat]

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");

}
@