diff options
Diffstat (limited to 'examples/quick/canvas/smile/smile.qml')
| -rw-r--r-- | examples/quick/canvas/smile/smile.qml | 149 |
1 files changed, 76 insertions, 73 deletions
diff --git a/examples/quick/canvas/smile/smile.qml b/examples/quick/canvas/smile/smile.qml index c8b01b305a..0251b1b101 100644 --- a/examples/quick/canvas/smile/smile.qml +++ b/examples/quick/canvas/smile/smile.qml @@ -40,87 +40,90 @@ import QtQuick 2.0 import "../contents" +import "../../shared" + Item { - id:container - width:320 - height:480 + id: container + width: 320 + height: 480 - Column { - spacing:5 - anchors.fill:parent - Text { font.pointSize:15; text:"Smile with arcs"; anchors.horizontalCenter:parent.horizontalCenter} + Column { + spacing: 6 + anchors.fill: parent + anchors.topMargin: 12 - Canvas { - id:canvas - width:320 - height:280 - antialiasing: true + Text { + font.pointSize: 24 + font.bold: true + text: "Smile with arcs" + anchors.horizontalCenter: parent.horizontalCenter + color: "#777" + } - property string strokeStyle:"green" - property string fillStyle:"yellow" - property int lineWidth:lineWidthCtrl.value - 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 + Canvas { + id: canvas + width: 320 + height: parent.height - controls.height + antialiasing: true - onLineWidthChanged:requestPaint(); - onFillChanged:requestPaint(); - onStrokeChanged:requestPaint(); - onAlphaChanged:requestPaint(); - onScaleXChanged:requestPaint(); - onScaleYChanged:requestPaint(); - onRotateChanged:requestPaint(); + property color strokeStyle: Qt.darker(fillStyle, 1.6) + property color fillStyle: "#e0c31e" // yellow + property int lineWidth: lineWidthCtrl.value + property bool fill: true + property bool stroke: true + property real scale : scaleCtrl.value + property real rotate : rotateCtrl.value - Behavior on scaleX { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite } } - Behavior on scaleY { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} } - Behavior on rotate { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} } + onLineWidthChanged:requestPaint(); + onFillChanged:requestPaint(); + onStrokeChanged:requestPaint(); + onScaleChanged:requestPaint(); + onRotateChanged:requestPaint(); - onPaint: { - var ctx = canvas.getContext('2d'); - ctx.save(); - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.globalAlpha = canvas.alpha; - ctx.strokeStyle = canvas.strokeStyle; - ctx.fillStyle = canvas.fillStyle; - ctx.lineWidth = canvas.lineWidth; - ctx.scale(canvas.scaleX, canvas.scaleY); - ctx.rotate(canvas.rotate); - ctx.beginPath(); - ctx.moveTo(75 + 50 * Math.cos(0), - 75 - 50 * Math.sin(Math.PI*2)); - ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle - ctx.moveTo(75,70); - ctx.arc(75,70,35,0,Math.PI,false); // Mouth (clockwise) - ctx.moveTo(60,65); - ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye - ctx.moveTo(90 + 5 * Math.cos(0), - 65 - 5 * Math.sin(Math.PI*2)); - ctx.moveTo(90,65); - ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye - ctx.closePath(); - if (canvas.fill) - ctx.fill(); - if (canvas.stroke) - ctx.stroke(); - ctx.restore(); - } - } + onPaint: { + var ctx = canvas.getContext('2d'); + var originX = 85 + var originY = 75 + ctx.save(); + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.translate(originX, originX); + ctx.globalAlpha = canvas.alpha; + ctx.strokeStyle = canvas.strokeStyle; + ctx.fillStyle = canvas.fillStyle; + ctx.lineWidth = canvas.lineWidth; + + ctx.translate(originX, originY) + ctx.scale(canvas.scale, canvas.scale); + ctx.rotate(canvas.rotate); + ctx.translate(-originX, -originY) - Rectangle { - id:controls - width:320 - height:150 - Column { - spacing:3 - Slider {id:lineWidthCtrl; width:300; height:20; min:1; max:10; init:2; name:"Line width"} - Slider {id:scaleXCtrl; width:300; height:20; min:0.1; max:10; init:1; name:"ScaleX"} - Slider {id:scaleYCtrl; width:300; height:20; min:0.1; max:10; init:1; 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"} + ctx.beginPath(); + ctx.moveTo(75 + 50 * Math.cos(0), + 75 - 50 * Math.sin(Math.PI*2)); + ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle + ctx.moveTo(75,70); + ctx.arc(75,70,35,0,Math.PI,false); // Mouth (clockwise) + ctx.moveTo(60,65); + ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye + ctx.moveTo(90 + 5 * Math.cos(0), + 65 - 5 * Math.sin(Math.PI*2)); + ctx.moveTo(90,65); + ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye + ctx.closePath(); + if (canvas.fill) + ctx.fill(); + if (canvas.stroke) + ctx.stroke(); + ctx.restore(); + } } } - } + Column { + id: controls + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + Slider {id: lineWidthCtrl ; min: 1 ; max: 10 ; init: 2 ; name: "Outline"} + Slider {id: scaleCtrl ; min: 0.1 ; max: 10 ; init: 1 ; name: "Scale"} + Slider {id: rotateCtrl ; min: 0 ; max: Math.PI*2 ; init: 0 ; name: "Rotate"} + } } |