Show how to achieve aspect-ratio-maintaining effects.

1 files changed, 26 insertions, 0 deletions

diff --git a/examples/declarative/aspectratio/face_fit.qml b/examples/declarative/aspectratio/face_fit.qml
new file mode 100644
index 0000000..35c63ce
--- /dev/null
+++ b/examples/declarative/aspectratio/face_fit.qml
@@ -0,0 +1,26 @@
+// The Image primitive does not have any special handling for maintaining
+// aspect ratio. This example shows that you can provide whatever specific
+// behaviour you like.
+//
+// Here, we implement a hybrid of the "scale to fit" and "scale and crop"
+// behaviours which will crop up to 25% from *one* dimension if necessary
+// to fully scale the other. This is a realistic algorithm, for example
+// when the edges of the image contain less vital information than the
+// center - such as a face.
+//
+Rect {
+    // default size: whole image, unscaled
+    width: Image.width
+    height: Image.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: Image
+        source: "pics/face.png"
+        x: (parent.width-width*scale)/2
+        y: (parent.height-height*scale)/2
+        scale: Math.max(Math.min(parent.width/width*1.333,parent.height/height),
+                        Math.min(parent.width/width,parent.height/height*1.333))
+    }
+}