Photosurface example: scale and rotate the frame, not the image

The size of the border around the image could otherwise change
dramatically, because the PinchArea was zooming the image.
It's conceivable that the frame could follow the image in scale and
rotation, but that doesn't work as long as the image is inside the
frame, because changing scale and rotation of the parent affects the
child too.  So it follows that the scale and rotation of the image
should never be directly set.  This helps the apparent size of the
white border around each image to be visually consistent.  Another
advantage is that the the image centroid doesn't tend to move,
so compensation is not necessary.

Change-Id: Ib7767e369097b32f006274add73ac544aedaf839
Reviewed-by: Topi Reiniö <topi.reinio@digia.com>
Reviewed-by: Shawn Rutledge <shawn.rutledge@digia.com>

1 files changed, 10 insertions, 10 deletions

diff --git a/examples/quick/demos/photosurface/photosurface.qml b/examples/quick/demos/photosurface/photosurface.qml
index c269018426..6c85bef77f 100644
--- a/examples/quick/demos/photosurface/photosurface.qml
+++ b/examples/quick/demos/photosurface/photosurface.qml
@@ -67,21 +67,23 @@ Window {
         }
         Rectangle {
             id: photoFrame
-            width: image.width * image.scale + 20
-            height: image.height * image.scale + 20
+            width: image.width * (1 + 0.10 * image.height / image.width)
+            height: image.height * 1.10
+            scale: defaultSize / Math.max(image.sourceSize.width, image.sourceSize.height)
             border.color: "black"
             border.width: 2
             smooth: true
             antialiasing: true
-            x: Math.random() * root.width - defaultSize
-            y: Math.random() * root.height - defaultSize
-            rotation: Math.random() * 13 - 6
+            Component.onCompleted: {
+                x = Math.random() * root.width - defaultSize
+                y = Math.random() * root.height - defaultSize
+                rotation = Math.random() * 13 - 6
+            }
             Image {
                 id: image
                 anchors.centerIn: parent
                 fillMode: Image.PreserveAspectFit
                 source: folderModel.folder + fileName
-                scale: defaultSize / Math.max(sourceSize.width, sourceSize.height)
                 antialiasing: true
             }
             PinchArea {
@@ -111,10 +113,8 @@ Window {
                             photoFrame.rotation += wheel.angleDelta.x / 120;
                             if (Math.abs(photoFrame.rotation) < 0.6)
                                 photoFrame.rotation = 0;
-                            var scaleBefore = image.scale;
-                            image.scale += image.scale * wheel.angleDelta.y / 120 / 10;
-                            photoFrame.x -= image.width * (image.scale - scaleBefore) / 2.0;
-                            photoFrame.y -= image.height * (image.scale - scaleBefore) / 2.0;
+                            var scaleBefore = photoFrame.scale;
+                            photoFrame.scale += photoFrame.scale * wheel.angleDelta.y / 120 / 10;
                         }
                     }
                 }