Fixes to paintings example

4 files changed, 163 insertions, 26 deletions

diff --git a/examples/painting/ColorButton.qml b/examples/painting/ColorButton.qml
new file mode 100644
index 0000000..c113f53
--- /dev/null
+++ b/examples/painting/ColorButton.qml
@@ -0,0 +1,45 @@
+import Qt 4.7
+Rectangle {
+    id:picker
+    width:22
+    height:22
+
+    MouseArea {
+        id:mousearea
+        hoverEnabled:true
+        anchors.fill: parent
+        onClicked: {
+            canvas.drawColor = picker.color;
+            picker.focus = true
+        }
+    }
+    border.color: focus ? "#eee" : "#444"
+    border.width: 1
+
+    Rectangle {
+        visible: !focus
+        x:3
+        y:3
+        z:-1
+        width:parent.width
+        height:parent.height
+        color:"#222"
+    }
+
+    states: [
+        State { name: "focus" ;
+                when: focus
+                PropertyChanges { target: picker.border; color:"#eee"}
+        },
+        State {
+                name:  "hover";
+                when: mousearea.containsMouse && !focus;
+                PropertyChanges { target: picker; scale:1.2}
+        }
+    ]
+    transitions: Transition {
+        ColorAnimation { target: picker.border; property: "color"; duration: 200 }
+        NumberAnimation { target: picker; property: "scale"; duration: 100 }
+    }
+}
+
diff --git a/examples/painting/Drawing.qml b/examples/painting/Drawing.qml
new file mode 100644
index 0000000..a19da45
--- /dev/null
+++ b/examples/painting/Drawing.qml
@@ -0,0 +1,53 @@
+import "../../Canvas"
+import Qt 4.7
+
+
+Canvas {
+    id:canvas
+    color: "white"
+    property int paintX
+    property int paintY
+    property int count: 0
+    property int lineWidth: 2
+    property variant drawColor: "black"
+
+    MouseArea {
+        id:mousearea
+        hoverEnabled:true
+        anchors.fill: parent
+        onClicked: drawPoint();
+        onPositionChanged:  {
+            if (mousearea.pressed)
+                drawLineSegment();
+            paintX = mouseX;
+            paintY = mouseY;
+        }
+    }
+
+    function drawLineSegment() {
+        var ctx = getContext();
+        ctx.save();
+        ctx.beginPath();
+        ctx.strokeStyle = drawColor
+        ctx.lineWidth = lineWidth
+        ctx.moveTo(paintX, paintY);
+        ctx.lineTo(mousearea.mouseX, mousearea.mouseY);
+        ctx.stroke();
+        ctx.closePath();
+        ctx.restore();
+    }
+
+    function drawPoint() {
+        var ctx = getContext();
+        ctx.save();
+        ctx.lineWidth = lineWidth
+        ctx.fillStyle = drawColor
+        ctx.fillRect(mousearea.mouseX, mousearea.mouseY, 2, 2);
+        ctx.restore();
+    }
+
+    function clear() {
+        var ctx = getContext();
+        ctx.clearRect(0, 0, width, height);
+    }
+}
diff --git a/examples/painting/painting.qml b/examples/painting/painting.qml
index 63a50f9..d691834 100644
--- a/examples/painting/painting.qml
+++ b/examples/painting/painting.qml
@@ -3,30 +3,43 @@ import Qt 4.7
 
 Rectangle {
     id:root
-    width:400
-    height:244
+    width:500
+    height:300
     color:"#333"
     anchors.margins: 4
 
-    Drawing {
-        id:canvas
-        width: 200
-        height: 200
-        x:4
-        y:4
+    Rectangle {
+        width:300
+        height:260
+        color:"#222"
+        x:8
+        y:8
+
+        Drawing {
+            id:canvas
+            width:parent.width
+            height:parent.height
+            anchors.margins:-2
+            x:-3
+            y:-3
+        }
     }
 
     ListModel {
         id:model
     }
 
-    ListView {
-        id:view
+    Rectangle {
+        color:"#222"
         anchors.right: parent.right
-        width:140
         height:parent.height
-        delegate: idelegate
-        model: model
+        width:180
+        ListView {
+            id:view
+            anchors.fill: parent
+            delegate: idelegate
+            model: model
+        }
     }
 
     Component {
@@ -34,11 +47,12 @@ Rectangle {
         Item {
             id:root
             width:120
-            height:120
+            height:142
+            anchors.horizontalCenter: parent.horizontalCenter
             Image {
                 smooth:true
-                width:100
-                height:100
+                width:140
+                fillMode: Image.PreserveAspectFit
                 anchors.centerIn: parent
                 source: src
             }
@@ -46,15 +60,36 @@ Rectangle {
         }
     }
 
+    FocusScope {
+        id: colorpicker
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.margins: 8
+        width:200
+        height:22
+        focus:true
+        Row {
+            id:row
+            anchors.fill: parent
+            spacing: 8
+            Repeater {
+                model: ["black","firebrick", "orange", "gold", "purple", "steelblue", "seagreen"]
+                ColorButton { color: modelData }
+            }
+        }
+    }
+
     Rectangle {
         id:savebutton
-        width:60
-        height:30
+        width:80
+        height:22
         color:"gray"
-        border.color: "#333"
+        radius: 4
+        border.color: "#222"
         anchors.bottom: parent.bottom
-        anchors.left: parent.left
-        anchors.margins: 4
+        anchors.right: clearbutton.left
+        anchors.leftMargin: 32
+        anchors.margins: 8
         Text { text: "Save" ; anchors.centerIn: parent}
         MouseArea {
             anchors.fill:parent
@@ -66,14 +101,17 @@ Rectangle {
             }
         }
     }
+
     Rectangle {
-        width:60
-        height:30
+        id:clearbutton
+        width:80
+        height:22
         color:"gray"
-        border.color: "#333"
+        border.color: "#222"
+        radius: 4
         anchors.bottom: parent.bottom
-        anchors.left: savebutton.right
-        anchors.margins: 4
+        anchors.right: parent.right
+        anchors.margins: 8
         Text { text: "Clear" ; anchors.centerIn: parent}
         MouseArea {
             anchors.fill:parent
diff --git a/src/context2d.cpp b/src/context2d.cpp
index 3f1c2ef..d8ca576 100644
--- a/src/context2d.cpp
+++ b/src/context2d.cpp
@@ -480,6 +480,7 @@ void Context2D::clearRect(qreal x, qreal y, qreal w, qreal h)
     m_painter.setMatrix(m_state.matrix, false);
     m_painter.setCompositionMode(QPainter::CompositionMode_Source);
     QColor fillColor = parent()->property("color").value<QColor>();
+
     m_painter.fillRect(QRectF(x, y, w, h), fillColor);
     m_painter.restore();
     scheduleChange();