diff options
Diffstat (limited to 'examples/quick/canvas/tiger/tiger.qml')
-rw-r--r-- | examples/quick/canvas/tiger/tiger.qml | 146 |
1 files changed, 76 insertions, 70 deletions
diff --git a/examples/quick/canvas/tiger/tiger.qml b/examples/quick/canvas/tiger/tiger.qml index 8b629eecf3..94a7d2dc3d 100644 --- a/examples/quick/canvas/tiger/tiger.qml +++ b/examples/quick/canvas/tiger/tiger.qml @@ -40,89 +40,95 @@ import QtQuick 2.0 import "../contents" +import "../../shared" import "tiger.js" as Tiger + Item { - id:container - width:320 - height:480 + id: container + width: 320 + height: 480 - Column { - spacing:5 - anchors.fill:parent - Text { font.pointSize:15; text:"Tiger with SVG path"; anchors.horizontalCenter:parent.horizontalCenter} + Column { + spacing: 6 + anchors.fill: parent + anchors.topMargin: 12 - Canvas { - id:canvas - width:320 - height:280 - antialiasing: true - property string strokeStyle:"steelblue" - property string fillStyle:"yellow" - property bool fill:true - property bool stroke:true - property real alpha:alphaCtrl.value - property real scaleX : scaleXCtrl.value - property real scaleY : scaleYCtrl.value - property real rotate : rotateCtrl.value - property int frame:0 + Text { + font.pointSize: 24 + font.bold: true + text: "Tiger with SVG path" + anchors.horizontalCenter: parent.horizontalCenter + color: "#777" + } - onFillChanged: requestPaint(); - onStrokeChanged: requestPaint(); - onAlphaChanged: requestPaint(); - onScaleXChanged: requestPaint(); - onScaleYChanged: requestPaint(); - onRotateChanged: requestPaint(); + Canvas { + id: canvas + width: 320 + height: 280 + antialiasing: true - onPainted : { - canvas.frame++; - if (canvas.frame < Tiger.tiger.length) - requestPaint(); - } - onPaint: { - var ctx = canvas.getContext('2d'); - ctx.save(); - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.globalAlpha = canvas.alpha; - ctx.scale(canvas.scaleX, canvas.scaleY); - ctx.rotate(canvas.rotate); - ctx.globalCompositeOperation = "source-over"; - ctx.translate(canvas.width/2, canvas.height/2); - ctx.strokeStyle = Qt.rgba(.3, .3, .3,1); - ctx.lineWidth = 1; + property string strokeStyle: "steelblue" + property string fillStyle: "yellow" + property bool fill: true + property bool stroke: true + property real alpha: alphaCtrl.value + property real scale: scaleCtrl.value + property real rotate: rotateCtrl.value + property int frame: 0 - //! [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; + onFillChanged: requestPaint(); + onStrokeChanged: requestPaint(); + onAlphaChanged: requestPaint(); + onScaleChanged: requestPaint(); + onRotateChanged: requestPaint(); - if (Tiger.tiger[i].path != undefined) - ctx.path = Tiger.tiger[i].path; + onPaint: { + var ctx = canvas.getContext('2d'); + var originX = canvas.width/2 + 30 + var originY = canvas.height/2 + 60 - if (Tiger.tiger[i].fill != undefined) { - ctx.fillStyle = Tiger.tiger[i].fill; - ctx.fill(); - } + ctx.save(); + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.globalAlpha = canvas.alpha; + ctx.globalCompositeOperation = "source-over"; + + ctx.translate(originX, originY) + ctx.scale(canvas.scale, canvas.scale); + ctx.rotate(canvas.rotate); + ctx.translate(-originX, -originY) - if (Tiger.tiger[i].stroke != undefined) { - ctx.strokeStyle = Tiger.tiger[i].stroke; - ctx.stroke(); + ctx.strokeStyle = Qt.rgba(.3, .3, .3,1); + ctx.lineWidth = 1; + + //! [0] + for (var i = 0; i < Tiger.tiger.length; i++) { + 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].fill != undefined) { + ctx.fillStyle = Tiger.tiger[i].fill; + ctx.fill(); + } + + if (Tiger.tiger[i].stroke != undefined) { + ctx.strokeStyle = Tiger.tiger[i].stroke; + ctx.stroke(); + } } + //! [0] + ctx.restore(); } - //! [0] - ctx.restore(); } } - Rectangle { - id:controls - width:320 - height:150 - Column { - spacing:3 - Slider {id:scaleXCtrl; width:300; height:20; min:0.1; max:10; init:0.5; name:"ScaleX"} - Slider {id:scaleYCtrl; width:300; height:20; min:0.1; max:10; init:0.5; name:"ScaleY"} - Slider {id:rotateCtrl; width:300; height:20; min:0; max:Math.PI*2; init:0; name:"Rotate"} - Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"} - } + Column { + id: controls + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + Slider {id: scaleCtrl ; min: 0.1 ; max: 1 ; init: 0.3 ; name: "Scale"} + Slider {id: rotateCtrl ; min: 0 ; max: Math.PI*2 ; init: 0 ; name: "Rotate"} + Slider {id: alphaCtrl ; min: 0 ; max: 1 ; init: 1 ; name: "Alpha"} } - } } |