diff options
Diffstat (limited to 'examples/declarative/imageelements/image')
9 files changed, 175 insertions, 0 deletions
diff --git a/examples/declarative/imageelements/image/face_fit.qml b/examples/declarative/imageelements/image/face_fit.qml new file mode 100644 index 0000000..52cd4c2 --- /dev/null +++ b/examples/declarative/imageelements/image/face_fit.qml @@ -0,0 +1,26 @@ +import Qt 4.7 + +// 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 + anchors.centerIn: parent + 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/imageelements/image/face_fit_animated.qml b/examples/declarative/imageelements/image/face_fit_animated.qml new file mode 100644 index 0000000..63fc9c6 --- /dev/null +++ b/examples/declarative/imageelements/image/face_fit_animated.qml @@ -0,0 +1,28 @@ +import Qt 4.7 + +// 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 + anchors.centerIn: parent + source: "pics/face.png" + x: (parent.width-width*scale)/2 + y: (parent.height-height*scale)/2 + SpringFollow on scale { + to: 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/imageelements/image/image.qmlproject b/examples/declarative/imageelements/image/image.qmlproject new file mode 100644 index 0000000..d4909f8 --- /dev/null +++ b/examples/declarative/imageelements/image/image.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} diff --git a/examples/declarative/imageelements/image/pics/face.png b/examples/declarative/imageelements/image/pics/face.png Binary files differnew file mode 100644 index 0000000..3d66d72 --- /dev/null +++ b/examples/declarative/imageelements/image/pics/face.png diff --git a/examples/declarative/imageelements/image/scale_and_crop.qml b/examples/declarative/imageelements/image/scale_and_crop.qml new file mode 100644 index 0000000..a438104 --- /dev/null +++ b/examples/declarative/imageelements/image/scale_and_crop.qml @@ -0,0 +1,21 @@ +import Qt 4.7 + +// 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 + anchors.centerIn: parent + 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/imageelements/image/scale_and_crop_simple.qml b/examples/declarative/imageelements/image/scale_and_crop_simple.qml new file mode 100644 index 0000000..1160ec5 --- /dev/null +++ b/examples/declarative/imageelements/image/scale_and_crop_simple.qml @@ -0,0 +1,20 @@ +import Qt 4.7 + +// 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/imageelements/image/scale_and_sidecrop.qml b/examples/declarative/imageelements/image/scale_and_sidecrop.qml new file mode 100644 index 0000000..5593ab8 --- /dev/null +++ b/examples/declarative/imageelements/image/scale_and_sidecrop.qml @@ -0,0 +1,22 @@ +import Qt 4.7 + +// 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 + anchors.centerIn: parent + 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/imageelements/image/scale_to_fit.qml b/examples/declarative/imageelements/image/scale_to_fit.qml new file mode 100644 index 0000000..724a36e --- /dev/null +++ b/examples/declarative/imageelements/image/scale_to_fit.qml @@ -0,0 +1,22 @@ +import Qt 4.7 + +// 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 + anchors.centerIn: parent + 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/imageelements/image/scale_to_fit_simple.qml b/examples/declarative/imageelements/image/scale_to_fit_simple.qml new file mode 100644 index 0000000..0e960b4 --- /dev/null +++ b/examples/declarative/imageelements/image/scale_to_fit_simple.qml @@ -0,0 +1,20 @@ +import Qt 4.7 + +// 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 + } +} |
