diff options
Diffstat (limited to 'examples/quick/canvas/smile/smile.qml')
| -rw-r--r-- | examples/quick/canvas/smile/smile.qml | 143 |
1 files changed, 90 insertions, 53 deletions
diff --git a/examples/quick/canvas/smile/smile.qml b/examples/quick/canvas/smile/smile.qml index 0d2034d9ca..bf534a3da2 100644 --- a/examples/quick/canvas/smile/smile.qml +++ b/examples/quick/canvas/smile/smile.qml @@ -6,87 +6,124 @@ import QtQuick.Controls import "../" Item { - id: container + id: root width: 320 height: 480 Column { spacing: 6 - anchors.fill: parent - anchors.topMargin: 12 + anchors { + fill: parent + topMargin: 12 + } Label { - font.pointSize: 24 - font.bold: true - text: "Smile with arcs" anchors.horizontalCenter: parent.horizontalCenter - color: "#777" + text: qsTr("Smile with arcs") + font { + pointSize: 24 + bold: true + } + color: Qt.lighter(palette.text) } Canvas { id: canvas - width: 320 + + readonly property color strokeStyle: Qt.darker(fillStyle, 1.6) + readonly property color fillStyle: "#e0c31e" // yellow + readonly property alias lineWidth: lineWidthCtrl.value + readonly property alias fill: toggleFillCheckBox.checked + readonly property alias stroke: toggleStrokeCheckBox.checked + readonly property alias scale: scaleCtrl.value + readonly property alias rotate: rotateCtrl.value + + width: root.width height: parent.height - controls.height antialiasing: true - 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 - - onLineWidthChanged:requestPaint(); - onFillChanged:requestPaint(); - onStrokeChanged:requestPaint(); - onScaleChanged:requestPaint(); - onRotateChanged:requestPaint(); + onLineWidthChanged: requestPaint() + onFillChanged: requestPaint() + onStrokeChanged: requestPaint() + onScaleChanged: requestPaint() + onRotateChanged: requestPaint() 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.strokeStyle = canvas.strokeStyle; - ctx.fillStyle = canvas.fillStyle; - ctx.lineWidth = canvas.lineWidth; + let ctx = canvas.getContext('2d') + const originX = 85 + const originY = 75 + ctx.save() + ctx.clearRect(0, 0, canvas.width, canvas.height) + ctx.translate(originX, originX) + 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.scale(canvas.scale, canvas.scale) + ctx.rotate(canvas.rotate) ctx.translate(-originX, -originY) - 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(60,60); - ctx.arc(60,60,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,60); - ctx.arc(90,60,5,-Math.PI,Math.PI*3,false); // Right eye - ctx.moveTo(75,70); - ctx.arc(75,70,35,0,Math.PI,false); // Mouth (clockwise) - ctx.closePath(); + 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(60, 60) + ctx.arc(60, 60, 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, 60) + ctx.arc(90, 60, 5, -Math.PI, Math.PI * 3, false) // Right eye + ctx.moveTo(75, 70) + ctx.arc(75, 70, 35, 0, Math.PI, false) // Mouth (clockwise) + ctx.closePath() if (canvas.fill) - ctx.fill(); + ctx.fill() if (canvas.stroke) - ctx.stroke(); - ctx.restore(); + ctx.stroke() + ctx.restore() } } } Column { id: controls - anchors.bottom: parent.bottom - anchors.bottomMargin: 12 + anchors { + bottom: parent.bottom + bottomMargin: 12 + } - LabeledSlider {id: lineWidthCtrl ; min: 1 ; max: 10 ; init: 2 ; name: "Outline"; width: container.width} - LabeledSlider {id: scaleCtrl ; min: 0.1 ; max: 10 ; init: 1 ; name: "Scale"; width: container.width} - LabeledSlider {id: rotateCtrl ; min: 0 ; max: Math.PI*2 ; init: 0 ; name: "Rotate"; width: container.width} + LabeledSlider { + id: lineWidthCtrl + name: qsTr("Outline") + width: root.width + min: 1 + max: 10 + value: 2 + } + LabeledSlider { + id: scaleCtrl + name: qsTr("Scale") + width: root.width + min: 0.1 + max: 10 + value: 1 + } + LabeledSlider { + id: rotateCtrl + name: qsTr("Rotate") + width: root.width + min: 0 + max: Math.PI * 2 + value: 0 + } + Row { + CheckBox { + id: toggleFillCheckBox + text: qsTr("Toggle fill") + } + CheckBox { + id: toggleStrokeCheckBox + checked: true + text: qsTr("Toggle stroke") + } + } } } |