qiurui
/
qtdeclarative
mirror of https://github.com/qt/qtdeclarative.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Expound on canvas example documentation 

Change-Id: I5bf82697dcbadaa9dc58e11ee22b2ab8c1a28852
Reviewed-by: Yunqiao Yin <charles.yin@nokia.com>
This commit is contained in:
Alan Alpert 2012-04-20 21:58:59 +10:00 committed by Qt by Nokia
parent a5336a0577
commit 0ac61552a4
5 changed files with 31 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/quick/canvas/bezierCurve/bezierCurve.qml
View File

@ -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)

9
examples/quick/canvas/canvas.qml
View File

@ -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
*/

2
examples/quick/canvas/clip/clip.qml
View File

@ -126,9 +126,11 @@ Item {
if (canvas.fill) {
ctx.fill();
}
//! [0]
ctx.clip();
ctx.drawImage(canvas.imagefile, 0, 0);
//! [0]
ctx.restore();
}
}

4
examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml
View File

@ -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();
}
}

31
examples/quick/canvas/tiger/tiger.qml
View File

@ -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