Example of smooth rect painting

3 files changed, 110 insertions, 0 deletions

diff --git a/examples/declarative/smooth/GradientRect.qml b/examples/declarative/smooth/GradientRect.qml
new file mode 100644
index 0000000..267a487
--- /dev/null
+++ b/examples/declarative/smooth/GradientRect.qml
@@ -0,0 +1,25 @@
+import Qt 4.6
+
+Item {
+    id: MyRect
+    property string color
+    property string border : ""
+    property int rotation
+    property int radius
+    property int borderWidth
+    property bool smooth: false
+
+    width: 80; height: 80
+    Item {
+        anchors.centerIn: parent; rotation: MyRect.rotation;
+        Rect {
+            anchors.centerIn: parent; width: 80; height: 80
+            border.color: MyRect.border; border.width: MyRect.border != "" ? 2 : 0
+            radius: MyRect.radius; smooth: MyRect.smooth
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: MyRect.color }
+                GradientStop { position: 1.0; color: "white" }
+            }
+        }
+    }
+}
diff --git a/examples/declarative/smooth/MyRect.qml b/examples/declarative/smooth/MyRect.qml
new file mode 100644
index 0000000..7791e27
--- /dev/null
+++ b/examples/declarative/smooth/MyRect.qml
@@ -0,0 +1,21 @@
+import Qt 4.6
+
+Item {
+    id: MyRect
+    property string color
+    property string border : ""
+    property int rotation
+    property int radius
+    property int borderWidth
+    property bool smooth: false
+
+    width: 80; height: 80
+    Item {
+        anchors.centerIn: parent; rotation: MyRect.rotation;
+        Rect {
+            anchors.centerIn: parent; width: 80; height: 80
+            color: MyRect.color; border.color: MyRect.border; border.width: MyRect.border != "" ? 2 : 0
+            radius: MyRect.radius; smooth: MyRect.smooth
+        }
+    }
+}
diff --git a/examples/declarative/smooth/rect-painting.qml b/examples/declarative/smooth/rect-painting.qml
new file mode 100644
index 0000000..2f01e4b
--- /dev/null
+++ b/examples/declarative/smooth/rect-painting.qml
@@ -0,0 +1,64 @@
+import Qt 4.6
+
+Rect {
+    width: 900; height: 500
+    color: "white"
+
+    Rect {
+        anchors.top: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        color: "#eeeeee"
+    }
+
+    GridLayout {
+        anchors.centerIn: parent
+        columns: 8; rows:4; spacing: 30
+
+        MyRect { color: "lightsteelblue" }
+        MyRect { color: "lightsteelblue"; border: "gray" }
+        MyRect { color: "lightsteelblue"; radius: 10 }
+        MyRect { color: "lightsteelblue"; radius: 10; border: "gray" }
+        GradientRect { color: "lightsteelblue" }
+        GradientRect { color: "lightsteelblue"; border: "gray" }
+        GradientRect { color: "lightsteelblue"; radius: 10 }
+        GradientRect { color: "lightsteelblue"; radius: 10; border: "gray" }
+
+        MyRect { color: "thistle"; rotation: 10 }
+        MyRect { color: "thistle"; border: "gray"; rotation: 10 }
+        MyRect { color: "thistle"; radius: 10; rotation: 10 }
+        MyRect { color: "thistle"; radius: 10; border: "gray"; rotation: 10 }
+        GradientRect { color: "thistle"; rotation: 10 }
+        GradientRect { color: "thistle"; border: "gray"; rotation: 10 }
+        GradientRect { color: "thistle"; radius: 10; rotation: 10 }
+        GradientRect { color: "thistle"; radius: 10; border: "gray"; rotation: 10 }
+
+        MyRect { color: "lightsteelblue"; smooth: true }
+        MyRect { color: "lightsteelblue"; border: "gray"; smooth: true }
+        MyRect { color: "lightsteelblue"; radius: 10; smooth: true }
+        MyRect { color: "lightsteelblue"; radius: 10; border: "gray"; smooth: true }
+        GradientRect { color: "lightsteelblue"; smooth: true }
+        GradientRect { color: "lightsteelblue"; border: "gray"; smooth: true }
+        GradientRect { color: "lightsteelblue"; radius: 10; smooth: true }
+        GradientRect { color: "lightsteelblue"; radius: 10; border: "gray"; smooth: true }
+
+        MyRect { color: "thistle"; rotation: 10; smooth: true }
+        MyRect { color: "thistle"; border: "gray"; rotation: 10; smooth: true }
+        MyRect { color: "thistle"; radius: 10; rotation: 10; smooth: true }
+        MyRect { color: "thistle"; radius: 10; border: "gray"; rotation: 10; smooth: true }
+        GradientRect { color: "thistle"; rotation: 10; smooth: true }
+        GradientRect { color: "thistle"; border: "gray"; rotation: 10; smooth: true }
+        GradientRect { color: "thistle"; radius: 10; rotation: 10; smooth: true }
+        GradientRect { color: "thistle"; radius: 10; border: "gray"; rotation: 10; smooth: true }
+    }
+
+    Text {
+        text: "smooth: false"; font.bold: true
+        anchors.horizontalCenter: parent.horizontalCenter; anchors.top: parent.top
+    }
+    Text {
+        text: "smooth: true"; font.bold: true
+        anchors.horizontalCenter: parent.horizontalCenter; anchors.bottom: parent.bottom
+    }
+}