| Markkyboy |
2017-09-18 11:26 |
Return pinched image to fit page(Solved)
EDIT: - I've answered my own question. I still cannot get onDoubleClicked to work, so for now, I have settled with onClicked instead.
Code:
onHeightChanged: if (imagePreview.status === Image.Ready) imagePreview.fitToScreen();
MouseArea {
anchors.fill: imageContainer
onClicked: imagePreview.fitToScreen()
}
PageHeader { title: "Network map" }
Hi all,
I'd like to implement 'onDoubleClicked' to my page. My page shows a Map, which can be pinched to a min/max level.
Currently, the user has to pinch the image back to fit the page before he can swipe back to the previous page; it would be nice just to double click the map and then swipe back!
I've tried dozens of different ways to achieve this (too many to list) but I'm not having much luck, clearly I'm missing a trick somewhere along the line. It seems as if 'onDoubleClicked' doesn't always work, although I have played with one file where double clicked does work, but I was unable to recreate the same in my file.
Here's my page;
Code:
import QtQuick 2.0
import Sailfish.Silica 1.0
Page {
Rectangle { anchors.fill: parent; color: 'black' }
SilicaFlickable {
id: imageFlickable
anchors.fill: parent
contentWidth: imageContainer.width; contentHeight: imageContainer.height
onHeightChanged: if (imagePreview.status === Image.Ready) imagePreview.fitToScreen();
PageHeader { title: "Network map" }
Item {
id: imageContainer
width: Math.max(imagePreview.width * imagePreview.scale, imageFlickable.width)
height: Math.max(imagePreview.height * imagePreview.scale, imageFlickable.height)
Image {
id: imagePreview
property real prevScale
function fitToScreen() {
scale = Math.min(imageFlickable.width / width, imageFlickable.height / height, 1)
pinchArea.minScale = scale
prevScale = scale
}
anchors.centerIn: parent
fillMode: Image.PreserveAspectFit
source: "../images/networkmap.png"
sourceSize.height: 3489;
smooth: !imageFlickable.moving
onStatusChanged: {
if (status == Image.Ready) {
fitToScreen()
loadedAnimation.start()
}
}
NumberAnimation {
id: loadedAnimation
target: imagePreview
property: "opacity"
duration: 250
from: 0; to: 1
easing.type: Easing.InOutQuad
}
onScaleChanged: {
if ((width * scale) > imageFlickable.width) {
var xoff = (imageFlickable.width / 2 + imageFlickable.contentX) * scale / prevScale;
imageFlickable.contentX = xoff - imageFlickable.width / 2
}
if ((height * scale) > imageFlickable.height) {
var yoff = (imageFlickable.height / 2 + imageFlickable.contentY) * scale / prevScale;
imageFlickable.contentY = yoff - imageFlickable.height / 2
}
prevScale = scale
}
}
}
PinchArea {
id: pinchArea
property real minScale: 1.0
property real maxScale: 3.0
anchors.fill: parent
enabled: imagePreview.status === Image.Ready
pinch.target: imagePreview
pinch.minimumScale: minScale * 0.9
pinch.maximumScale: maxScale * 2.0
onPinchFinished: {
imageFlickable.returnToBounds()
if (imagePreview.scale < pinchArea.minScale) {
bounceBackAnimation.to = pinchArea.minScale
bounceBackAnimation.start()
}
else if (imagePreview.scale > pinchArea.maxScale) {
bounceBackAnimation.to = pinchArea.maxScale
bounceBackAnimation.start()
}
}
NumberAnimation {
id: bounceBackAnimation
target: imagePreview
duration: 250
property: "scale"
from: imagePreview.scale
}
MouseArea {
id: pageDimmer
anchors.fill: parent
onPressAndHold: {
if (imagePreview.opacity==1.00) imagePreview.opacity=0.75
else if (imagePreview.opacity==0.75) imagePreview.opacity=0.50
else if (imagePreview.opacity==0.50) imagePreview.opacity=1.00
}
}
}
VerticalScrollDecorator { color: 'black'; width: 6 }
HorizontalScrollDecorator { color: 'black'; height: 6 }
}
}
All input gratefully received :)
thanks, |
