8 files changed, 154 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..482d1b7
--- /dev/null
+++ b/examples/declarative/aspectratio/face_fit.qml
@@ -0,0 +1,25 @@
+import Qt 4.6
+
+// 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.
+//
+Rectangle {
+    // default size: whole image, unscaled
+    width: face.width
+    height: face.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: face
+        smooth: true
+        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))
+    }
+}
diff --git a/examples/declarative/aspectratio/face_fit_animated.qml b/examples/declarative/aspectratio/face_fit_animated.qml
new file mode 100644
index 0000000..80a762b
--- /dev/null
+++ b/examples/declarative/aspectratio/face_fit_animated.qml
@@ -0,0 +1,27 @@
+import Qt 4.6
+
+// 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.
+//
+Rectangle {
+    // default size: whole image, unscaled
+    width: face.width
+    height: face.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: face
+        smooth: true
+        source: "pics/face.png"
+        x: (parent.width-width*scale)/2
+        y: (parent.height-height*scale)/2
+        scale: SpringFollow {
+            source: Math.max(Math.min(face.parent.width/face.width*1.333,face.parent.height/face.height),
+                        Math.min(face.parent.width/face.width,face.parent.height/face.height*1.333))
+            spring: 1
+            damping: 0.05
+        }
+    }
+}
diff --git a/examples/declarative/aspectratio/pics/face.png b/examples/declarative/aspectratio/pics/face.png
new file mode 100644
index 0000000..3d66d72
--- /dev/null
+++ b/examples/declarative/aspectratio/pics/face.png
diff --git a/examples/declarative/aspectratio/scale_and_crop.qml b/examples/declarative/aspectratio/scale_and_crop.qml
new file mode 100644
index 0000000..283e24b
--- /dev/null
+++ b/examples/declarative/aspectratio/scale_and_crop.qml
@@ -0,0 +1,20 @@
+import Qt 4.6
+
+// Here, we implement "Scale and Crop" behaviour.
+//
+Rectangle {
+    // default size: whole image, unscaled
+    width: face.width
+    height: face.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: face
+        smooth: true
+        source: "pics/face.png"
+        x: (parent.width-width*scale)/2
+        y: (parent.height-height*scale)/2
+        scale: Math.max(parent.width/width,parent.height/height)
+    }
+}
diff --git a/examples/declarative/aspectratio/scale_and_crop_simple.qml b/examples/declarative/aspectratio/scale_and_crop_simple.qml
new file mode 100644
index 0000000..e720ce7
--- /dev/null
+++ b/examples/declarative/aspectratio/scale_and_crop_simple.qml
@@ -0,0 +1,20 @@
+import Qt 4.6
+
+// Here, we implement "Scale to Fit" behaviour, using the
+// fillMode property.
+//
+Rectangle {
+    // default size: whole image, unscaled
+    width: face.width
+    height: face.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: face
+        smooth: true
+        source: "pics/face.png"
+        fillMode: Image.PreserveAspectCrop
+        anchors.fill: parent
+    }
+}
diff --git a/examples/declarative/aspectratio/scale_and_sidecrop.qml b/examples/declarative/aspectratio/scale_and_sidecrop.qml
new file mode 100644
index 0000000..c3ef859
--- /dev/null
+++ b/examples/declarative/aspectratio/scale_and_sidecrop.qml
@@ -0,0 +1,21 @@
+import Qt 4.6
+
+// 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.
+//
+Rectangle {
+    // default size: whole image, unscaled
+    width: face.width
+    height: face.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: face
+        smooth: true
+        source: "pics/face.png"
+        x: (parent.width-width*scale)/2
+        y: (parent.height-height*scale)/2
+        scale: parent.height/height
+    }
+}
diff --git a/examples/declarative/aspectratio/scale_to_fit.qml b/examples/declarative/aspectratio/scale_to_fit.qml
new file mode 100644
index 0000000..961ac04
--- /dev/null
+++ b/examples/declarative/aspectratio/scale_to_fit.qml
@@ -0,0 +1,21 @@
+import Qt 4.6
+
+// Here, we implement "Scale to Fit" behaviour "manually", rather
+// than using the preserveAspect property.
+//
+Rectangle {
+    // default size: whole image, unscaled
+    width: face.width
+    height: face.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: face
+        smooth: true
+        source: "pics/face.png"
+        x: (parent.width-width*scale)/2
+        y: (parent.height-height*scale)/2
+        scale: Math.min(parent.width/width,parent.height/height)
+    }
+}
diff --git a/examples/declarative/aspectratio/scale_to_fit_simple.qml b/examples/declarative/aspectratio/scale_to_fit_simple.qml
new file mode 100644
index 0000000..7389581
--- /dev/null
+++ b/examples/declarative/aspectratio/scale_to_fit_simple.qml
@@ -0,0 +1,20 @@
+import Qt 4.6
+
+// Here, we implement "Scale to Fit" behaviour, using the
+// fillMode property.
+//
+Rectangle {
+    // default size: whole image, unscaled
+    width: face.width
+    height: face.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: face
+        smooth: true
+        source: "pics/face.png"
+        fillMode: Image.PreserveAspectFit
+        anchors.fill: parent
+    }
+}