More examples.

2 files changed, 50 insertions, 0 deletions

diff --git a/examples/declarative/aspectratio/face_fit_animated.qml b/examples/declarative/aspectratio/face_fit_animated.qml
new file mode 100644
index 0000000..366d27b
--- /dev/null
+++ b/examples/declarative/aspectratio/face_fit_animated.qml
@@ -0,0 +1,28 @@
+// 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 extend the "face_fit" example with animation to show how truly
+// diverse and usage-specific behaviours are made possible by NOT putting a
+// hard-coded aspect ratio feature into the Image primitive.
+//
+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: Follow {
+            source: Math.max(Math.min(Image.parent.width/Image.width*1.333,Image.parent.height/Image.height),
+                        Math.min(Image.parent.width/Image.width,Image.parent.height/Image.height*1.333))
+            spring: 1
+            damping: 0.05
+        }
+    }
+}
diff --git a/examples/declarative/aspectratio/scale_and_sidecrop.qml b/examples/declarative/aspectratio/scale_and_sidecrop.qml
new file mode 100644
index 0000000..e076735
--- /dev/null
+++ b/examples/declarative/aspectratio/scale_and_sidecrop.qml
@@ -0,0 +1,22 @@
+// 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 variant of "Scale and Crop" behaviour, where we
+// crop the sides if necessary to fully fit vertically, but not the reverse.
+//
+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: parent.height/height
+    }
+}