Expound on canvas example documentation

Change-Id: I5bf82697dcbadaa9dc58e11ee22b2ab8c1a28852
Reviewed-by: Yunqiao Yin <charles.yin@nokia.com>

diff --git a/examples/quick/canvas/bezierCurve/bezierCurve.qml b/examples/quick/canvas/bezierCurve/bezierCurve.qml
index 4fb0fa8..f18c4a1 100644 (file)
--- a/examples/quick/canvas/bezierCurve/bezierCurve.qml
+++ b/examples/quick/canvas/bezierCurve/bezierCurve.qml
@@ -90,6 +90,7 @@ Item {
       ctx.lineWidth = canvas.lineWidth;
       ctx.scale(canvas.scaleX, canvas.scaleY);
       ctx.rotate(canvas.rotate);
+      //! [0]
       ctx.beginPath();
       ctx.moveTo(75,40);
       ctx.bezierCurveTo(75,37,70,25,50,25);
@@ -99,6 +100,7 @@ Item {
       ctx.bezierCurveTo(130,62.5,130,25,100,25);
       ctx.bezierCurveTo(85,25,75,37,75,40);
       ctx.closePath();
+      //! [0]
       if (canvas.fill)
          ctx.fill();
       if (canvas.stroke)

diff --git a/examples/quick/canvas/canvas.qml b/examples/quick/canvas/canvas.qml
index cf3c37a..afb6fbf 100644 (file)
--- a/examples/quick/canvas/canvas.qml
+++ b/examples/quick/canvas/canvas.qml
@@ -51,9 +51,12 @@ import "../../shared" as Examples
     a small QML file emphasizing a particular element or feature.
 
     Red heart demonstrates using a bezierCurve API to stroke and fill a red heart.
+    \snippet examples/quick/canvas/bezierCurve/bezierCurve.qml 0
 
-    Talk bubble demonstrates using a quadraticCurveTo API to stroke and fill a customized talk bubble,
-    this example also demonstrates the fillText API.
+    Talk bubble demonstrates using a quadraticCurveTo API to stroke and fill a customized talk bubble:
+    \snippet examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml 0
+    This example also demonstrates the fillText API:
+    \snippet examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml 1
 
     Squircle demonstrates using a collection of simple moveTo/lineTo path APIs to draw a smooth squircle.
 
@@ -62,8 +65,10 @@ import "../../shared" as Examples
     Smile face demonstrates using several complex path APIs to draw an fill a smile face.
 
     Clip demonstrates using clip API to clip a given image.
+    \snippet examples/quick/canvas/clip/clip.qml 0
 
     Tiger demonstrates using SVG path API to draw a tiger with a collection of SVG path strings.
+    \snippet examples/quick/canvas/tiger/tiger.qml 0
 
 */
 

diff --git a/examples/quick/canvas/clip/clip.qml b/examples/quick/canvas/clip/clip.qml
index e8597f0..3fdc3e4 100644 (file)
--- a/examples/quick/canvas/clip/clip.qml
+++ b/examples/quick/canvas/clip/clip.qml
@@ -126,9 +126,11 @@ Item {
       if (canvas.fill) {
           ctx.fill();
       }
+      //! [0]
       ctx.clip();
 
       ctx.drawImage(canvas.imagefile, 0, 0);
+      //! [0]
       ctx.restore();
     }
   }

diff --git a/examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml b/examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml
index 9be60c9..f0e2d11 100644 (file)
--- a/examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml
+++ b/examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml
@@ -88,6 +88,7 @@ Item {
           ctx.lineWidth = canvas.lineWidth;
           ctx.scale(canvas.scaleX, canvas.scaleY);
           ctx.rotate(canvas.rotate);
+          // ![0]
           ctx.beginPath();
           ctx.moveTo(75,25);
           ctx.quadraticCurveTo(25,25,25,62.5);
@@ -97,16 +98,19 @@ Item {
           ctx.quadraticCurveTo(125,100,125,62.5);
           ctx.quadraticCurveTo(125,25,75,25);
           ctx.closePath();
+          // ![0]
           if (canvas.fill)
              ctx.fill();
           if (canvas.stroke)
              ctx.stroke();
 
 
+          // ![1]
           ctx.fillStyle="green";
           ctx.font = "Bold 15px";
 
           ctx.fillText("QML酷毙了", 30, 60);
+          // ![1]
           ctx.restore();
       }
     }

diff --git a/examples/quick/canvas/tiger/tiger.qml b/examples/quick/canvas/tiger/tiger.qml
index 6b8e003..620ba6a 100644 (file)
--- a/examples/quick/canvas/tiger/tiger.qml
+++ b/examples/quick/canvas/tiger/tiger.qml
@@ -92,26 +92,27 @@ Item {
             ctx.strokeStyle = Qt.rgba(.3, .3, .3,1);
             ctx.lineWidth = 1;
 
-
+            //! [0]
             for (var i = 0; i < canvas.frame && i < Tiger.tiger.length; i++) {
-            if (Tiger.tiger[i].width != undefined)
-            ctx.lineWidth = Tiger.tiger[i].width;
+                if (Tiger.tiger[i].width != undefined)
+                    ctx.lineWidth = Tiger.tiger[i].width;
 
-            if (Tiger.tiger[i].path != undefined)
-            ctx.path = Tiger.tiger[i].path;
+                if (Tiger.tiger[i].path != undefined)
+                    ctx.path = Tiger.tiger[i].path;
 
-            if (Tiger.tiger[i].fill != undefined) {
-            ctx.fillStyle = Tiger.tiger[i].fill;
-            ctx.fill();
-            }
+                if (Tiger.tiger[i].fill != undefined) {
+                    ctx.fillStyle = Tiger.tiger[i].fill;
+                    ctx.fill();
+                }
 
-            if (Tiger.tiger[i].stroke != undefined) {
-            ctx.strokeStyle = Tiger.tiger[i].stroke;
-            ctx.stroke();
+                if (Tiger.tiger[i].stroke != undefined) {
+                    ctx.strokeStyle = Tiger.tiger[i].stroke;
+                    ctx.stroke();
+                }
             }
-        }
+            //! [0]
             ctx.restore();
-    }
+        }
     }
     Rectangle {
         id:controls