1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
import "../"
Item {
id: root
width: 320
height: 480
Column {
spacing: 6
anchors {
fill: parent
topMargin: 12
}
Label {
anchors.horizontalCenter: parent.horizontalCenter
text: qsTr("Rounded rectangle")
color: Qt.lighter(palette.text)
font {
pointSize: 24
bold: true
}
}
Canvas {
id: canvas
readonly property alias radius: rCtrl.value
readonly property int rectx: 60
readonly property int recty: 60
readonly property int rectWidth: width - 2 * rectx
readonly property int rectHeight: height - 2 * recty
readonly property color strokeStyle: Qt.darker(fillStyle, 1.4)
readonly property color fillStyle: "#ae32a0" // purple
readonly property alias lineWidth: lineWidthCtrl.value
readonly property alias fill: toggleFillCheckBox.checked
readonly property alias stroke: toggleStrokeCheckBox.checked
readonly property real alpha: 1.0
width: root.width
height: parent.height - controls.height
antialiasing: true
onLineWidthChanged: requestPaint()
onFillChanged: requestPaint()
onStrokeChanged: requestPaint()
onRadiusChanged: requestPaint()
onPaint: function() {
var ctx = getContext("2d")
ctx.save()
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.strokeStyle = canvas.strokeStyle
ctx.lineWidth = canvas.lineWidth
ctx.fillStyle = canvas.fillStyle
ctx.globalAlpha = canvas.alpha
ctx.beginPath()
ctx.moveTo(rectx + radius, recty) // top side
ctx.lineTo(rectx + rectWidth - radius, recty)
// draw top right corner
ctx.arcTo(rectx + rectWidth, recty, rectx + rectWidth, recty + radius, radius)
ctx.lineTo(rectx + rectWidth, recty + rectHeight - radius) // right side
// draw bottom right corner
ctx.arcTo(rectx + rectWidth, recty + rectHeight, rectx + rectWidth - radius, recty + rectHeight, radius)
ctx.lineTo(rectx + radius, recty + rectHeight) // bottom side
// draw bottom left corner
ctx.arcTo(rectx, recty + rectHeight, rectx, recty + rectHeight - radius, radius)
ctx.lineTo(rectx, recty + radius) // left side
// draw top left corner
ctx.arcTo(rectx, recty, rectx + radius, recty, radius)
ctx.closePath()
if (canvas.fill)
ctx.fill()
if (canvas.stroke)
ctx.stroke()
ctx.restore()
}
}
}
Column {
id: controls
anchors {
bottom: parent.bottom
bottomMargin: 12
}
LabeledSlider {
id: lineWidthCtrl
name: qsTr("Outline")
width: root.width
min: 1
max: 10
value: 2
}
LabeledSlider {
id: rCtrl
name: qsTr("Radius")
width: root.width
min: 10
max: 80
value: 40
}
Row {
CheckBox {
id: toggleFillCheckBox
checked: true
text: qsTr("Toggle fill")
}
CheckBox {
id: toggleStrokeCheckBox
checked: true
text: qsTr("Toggle stroke")
}
}
}
}
|
