Rewrite the canvas item's paint logic.

1. Only allow the context API calls inside onPaint() slot function,
   makes the context2d handle invalid when out of scope.
2. requestPaint() method supports region parameter
3. Emit paint() signal in updatePolish() function to allow
   threaded scene graph rendering work properly with context2d api
4. Allow request painting mutiple dirty regions between 2 frames.
5. Add svgpath for context2d

Change-Id: I5ec48f7c0eb6820d5c9c16a8d0dcc0aae8d0fd2f
Reviewed-on: http://codereview.qt.nokia.com/1465
Reviewed-by: Charles Yin <charles.yin@nokia.com>

2 files changed, 74 insertions, 20 deletions

diff --git a/examples/declarative/canvas/svgpath/tiger.js b/examples/declarative/canvas/svgpath/tiger.js
index 2695cd52fe..d8657b5abe 100644
--- a/examples/declarative/canvas/svgpath/tiger.js
+++ b/examples/declarative/canvas/svgpath/tiger.js
@@ -724,6 +724,7 @@ var tiger = [
 
 function draw(ctx, frame)
 {
+ var startTime = new Date();
   var totalPaths = tiger.length;
 
   if (frame > totalPaths)
@@ -731,14 +732,12 @@ function draw(ctx, frame)
    ctx.reset();
    ctx.globalCompositeOperation = "source-over";
    ctx.fillStyle = "rgba(0,0,0,0)";
-   //ctx.fillRect(0, 0, 600, 600);
    ctx.fillRect(0, 0, 1900, 1200);
 
    ctx.strokeColor = Qt.rgba(133, 133, 133,1);
    ctx.lineWidth = 1;
-   //ctx.translate(200, 200);
    ctx.translate(750, 350);
-   ctx.scale(2,2); 
+   ctx.scale(5,5);
   for (var i = 0; i < frame; i++) {
     if (tiger[i].width != undefined)
       ctx.lineWidth = tiger[i].width;
@@ -756,6 +755,9 @@ function draw(ctx, frame)
       ctx.stroke();
     }
  }
+ var endTime = new Date();
+ console.log("Javascript time:" + (endTime.valueOf() - startTime.valueOf()));
+
 }
 
 
diff --git a/examples/declarative/canvas/svgpath/tiger.qml b/examples/declarative/canvas/svgpath/tiger.qml
index 96d19d3dba..77161e7c46 100644
--- a/examples/declarative/canvas/svgpath/tiger.qml
+++ b/examples/declarative/canvas/svgpath/tiger.qml
@@ -5,29 +5,81 @@ Canvas {
   id:canvas
   width:1900
   height:1100
+  fillColor:"#000000"
+  focus:true
+  renderTarget:PaintedItem.FramebufferObject
   property int frame:0    
-
-  Timer {
-    repeat:true
-    interval:100
-    running:true
-    onTriggered: {
+  property date paintingTime
+  Component.onCompleted: {
+    canvas.frame++;
+    canvas.requestPaint();
+  }
+  onPainted: {
+      var endPaintingTime = new Date;
+      console.log("painting time:" + (endPaintingTime.valueOf() - canvas.paintingTime.valueOf()));
       canvas.frame++;
       if (canvas.frame > Tiger.tiger.length) {
-        canvas.frame = 0;
+//        canvas.frame = 0;
+          canvas.frame = Tiger.tiger.length;
       } else {
-        Tiger.draw(canvas.getContext(), canvas.frame);
+          canvas.requestPaint();
       }
-    }
   }
-/*
-  onDrawRegion:{
+  onPaint:{
+    canvas.paintingTime = new Date();
     Tiger.draw(context, canvas.frame);
   }
-Text {
-  anchors.top : parent.top
-  font.pixelSize : 30
-  text: "drawing path:" + canvas.frame + "/" + Tiger.tiger.length;
-}
-*/
+  Keys.onPressed : {
+    if (event.key == Qt.Key_Plus) {
+       canvas.contentsScale *= 1.5;
+    }
+    if (event.key == Qt.Key_Minus) {
+       canvas.contentsScale *= 0.7;
+    }
+    if (event.key == Qt.Key_Left) {
+       canvas.canvasX +=60;
+    }
+    if (event.key == Qt.Key_Right) {
+       canvas.canvasX -= 60;
+    }
+    if (event.key == Qt.Key_Up) {
+       canvas.canvasY += 40;
+    }
+    if (event.key == Qt.Key_Down) {
+       canvas.canvasY -= 40;
+    }
+
+    canvas.requestPaint();
+  }
+  Rectangle {
+      anchors.bottom : parent.bottom
+      color: "white"
+      opacity:0.7
+      height:50
+      width:canvas.width
+      radius:4
+      Text {
+         anchors.bottom : parent.bottom
+         font.pixelSize : 30
+         text: "drawing path:" + canvas.frame + "/" + Tiger.tiger.length
+              + " moving to:(" + canvas.canvasX + "," + canvas.canvasY + ")"
+              + " scale:" + canvas.contentsScale;
+      }
+  }
+
+  MouseArea {
+    id:mouseArea
+    anchors.fill:parent
+    property real pressedX;
+    property real pressedY;
+    onPressed: {
+      pressedX = mouseX;
+      pressedY = mouseY;
+    }
+    onPositionChanged : {
+      canvas.canvasX = mouseX - pressedX;
+      canvas.canvasY = mouseY - pressedY;
+      canvas.requestPaint();
+    }
+  }
 }