diff options
Diffstat (limited to 'examples/declarative/imageelements')
20 files changed, 364 insertions, 0 deletions
diff --git a/examples/declarative/imageelements/borderimage/borderimage.qml b/examples/declarative/imageelements/borderimage/borderimage.qml new file mode 100644 index 0000000..c334cea --- /dev/null +++ b/examples/declarative/imageelements/borderimage/borderimage.qml @@ -0,0 +1,57 @@ +import Qt 4.7 +import "content" + +Rectangle { + id: page + width: 1030; height: 540 + + Grid { + anchors.centerIn: parent; spacing: 20 + + MyBorderImage { + minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 240 + source: "content/colors.png"; margin: 30 + } + + MyBorderImage { + minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 240 + source: "content/colors.png"; margin: 30 + horizontalMode: BorderImage.Repeat; verticalMode: BorderImage.Repeat + } + + MyBorderImage { + minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 240 + source: "content/colors.png"; margin: 30 + horizontalMode: BorderImage.Stretch; verticalMode: BorderImage.Repeat + } + + MyBorderImage { + minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 240 + source: "content/colors.png"; margin: 30 + horizontalMode: BorderImage.Round; verticalMode: BorderImage.Round + } + + MyBorderImage { + minWidth: 60; maxWidth: 200; minHeight: 40; maxHeight: 200 + source: "content/bw.png"; margin: 10 + } + + MyBorderImage { + minWidth: 60; maxWidth: 200; minHeight: 40; maxHeight: 200 + source: "content/bw.png"; margin: 10 + horizontalMode: BorderImage.Repeat; verticalMode: BorderImage.Repeat + } + + MyBorderImage { + minWidth: 60; maxWidth: 200; minHeight: 40; maxHeight: 200 + source: "content/bw.png"; margin: 10 + horizontalMode: BorderImage.Stretch; verticalMode: BorderImage.Repeat + } + + MyBorderImage { + minWidth: 60; maxWidth: 200; minHeight: 40; maxHeight: 200 + source: "content/bw.png"; margin: 10 + horizontalMode: BorderImage.Round; verticalMode: BorderImage.Round + } + } +} diff --git a/examples/declarative/imageelements/borderimage/borderimage.qmlproject b/examples/declarative/imageelements/borderimage/borderimage.qmlproject new file mode 100644 index 0000000..d4909f8 --- /dev/null +++ b/examples/declarative/imageelements/borderimage/borderimage.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/borderimage/content/MyBorderImage.qml b/examples/declarative/imageelements/borderimage/content/MyBorderImage.qml new file mode 100644 index 0000000..b47df7b --- /dev/null +++ b/examples/declarative/imageelements/borderimage/content/MyBorderImage.qml @@ -0,0 +1,50 @@ +import Qt 4.7 + +Item { + id: container + + property alias horizontalMode: image.horizontalTileMode + property alias verticalMode: image.verticalTileMode + property alias source: image.source + + property int minWidth + property int minHeight + property int maxWidth + property int maxHeight + property int margin + + width: 240; height: 240 + + BorderImage { + id: image; anchors.centerIn: parent + + SequentialAnimation on width { + loops: Animation.Infinite + NumberAnimation { + from: container.minWidth; to: container.maxWidth + duration: 2000; easing.type: Easing.InOutQuad + } + NumberAnimation { + from: container.maxWidth; to: container.minWidth + duration: 2000; easing.type: Easing.InOutQuad + } + } + + SequentialAnimation on height { + loops: Animation.Infinite + NumberAnimation { + from: container.minHeight; to: container.maxHeight + duration: 2000; easing.type: Easing.InOutQuad + } + NumberAnimation { + from: container.maxHeight; to: container.minHeight + duration: 2000; easing.type: Easing.InOutQuad + } + } + + border.top: container.margin + border.left: container.margin + border.bottom: container.margin + border.right: container.margin + } +} diff --git a/examples/declarative/imageelements/borderimage/content/ShadowRectangle.qml b/examples/declarative/imageelements/borderimage/content/ShadowRectangle.qml new file mode 100644 index 0000000..629478b --- /dev/null +++ b/examples/declarative/imageelements/borderimage/content/ShadowRectangle.qml @@ -0,0 +1,14 @@ +import Qt 4.7 + +Item { + property alias color : rectangle.color + + BorderImage { + anchors.fill: rectangle + anchors { leftMargin: -6; topMargin: -6; rightMargin: -8; bottomMargin: -8 } + border { left: 10; top: 10; right: 10; bottom: 10 } + source: "shadow.png"; smooth: true + } + + Rectangle { id: rectangle; anchors.fill: parent } +} diff --git a/examples/declarative/imageelements/borderimage/content/bw.png b/examples/declarative/imageelements/borderimage/content/bw.png Binary files differnew file mode 100644 index 0000000..486eaae --- /dev/null +++ b/examples/declarative/imageelements/borderimage/content/bw.png diff --git a/examples/declarative/imageelements/borderimage/content/colors-round.sci b/examples/declarative/imageelements/borderimage/content/colors-round.sci new file mode 100644 index 0000000..506f6f5 --- /dev/null +++ b/examples/declarative/imageelements/borderimage/content/colors-round.sci @@ -0,0 +1,7 @@ +border.left:30 +border.top:30 +border.right:30 +border.bottom:30 +horizontalTileRule:Round +verticalTileRule:Round +source:colors.png diff --git a/examples/declarative/imageelements/borderimage/content/colors-stretch.sci b/examples/declarative/imageelements/borderimage/content/colors-stretch.sci new file mode 100644 index 0000000..e4989a7 --- /dev/null +++ b/examples/declarative/imageelements/borderimage/content/colors-stretch.sci @@ -0,0 +1,5 @@ +border.left:30 +border.top:30 +border.right:30 +border.bottom:30 +source:colors.png diff --git a/examples/declarative/imageelements/borderimage/content/colors.png b/examples/declarative/imageelements/borderimage/content/colors.png Binary files differnew file mode 100644 index 0000000..dfb62f3 --- /dev/null +++ b/examples/declarative/imageelements/borderimage/content/colors.png diff --git a/examples/declarative/imageelements/borderimage/content/shadow.png b/examples/declarative/imageelements/borderimage/content/shadow.png Binary files differnew file mode 100644 index 0000000..431af85 --- /dev/null +++ b/examples/declarative/imageelements/borderimage/content/shadow.png diff --git a/examples/declarative/imageelements/borderimage/shadows.qml b/examples/declarative/imageelements/borderimage/shadows.qml new file mode 100644 index 0000000..a08d133 --- /dev/null +++ b/examples/declarative/imageelements/borderimage/shadows.qml @@ -0,0 +1,24 @@ +import Qt 4.7 +import "content" + +Rectangle { + id: window + + width: 480; height: 320 + color: "gray" + + ShadowRectangle { + anchors.centerIn: parent; width: 250; height: 250 + color: "lightsteelblue" + } + + ShadowRectangle { + anchors.centerIn: parent; width: 200; height: 200 + color: "steelblue" + } + + ShadowRectangle { + anchors.centerIn: parent; width: 150; height: 150 + color: "thistle" + } +} 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 + } +} diff --git a/examples/declarative/imageelements/imageelements.qmlproject b/examples/declarative/imageelements/imageelements.qmlproject new file mode 100644 index 0000000..d4909f8 --- /dev/null +++ b/examples/declarative/imageelements/imageelements.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 " ] +} |
