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: 640property 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");
}
@