diff options
| -rw-r--r-- | examples/quick/canvas/bezierCurve/bezierCurve.qml | 2 | ||||
| -rw-r--r-- | examples/quick/canvas/canvas.qml | 9 | ||||
| -rw-r--r-- | examples/quick/canvas/clip/clip.qml | 2 | ||||
| -rw-r--r-- | examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml | 4 | ||||
| -rw-r--r-- | examples/quick/canvas/tiger/tiger.qml | 29 |
5 files changed, 30 insertions, 16 deletions
diff --git a/examples/quick/canvas/bezierCurve/bezierCurve.qml b/examples/quick/canvas/bezierCurve/bezierCurve.qml index 4fb0fa82f0..f18c4a1608 100644 --- 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 cf3c37a4c3..afb6fbf74e 100644 --- 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 e8597f062f..3fdc3e4906 100644 --- 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 9be60c9acc..f0e2d11747 100644 --- 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 6b8e0035a2..620ba6a715 100644 --- 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 |