feat(StatusCircularProgressBar): add a circular progress bar
- based on QML Canvas - visualizing progress value (0..1) on a circle with 2 configurable colors
This commit is contained in:
parent
0c37700d52
commit
02066d098d
|
@ -0,0 +1,68 @@
|
|||
import QtQuick 2.15
|
||||
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
property int size: 16
|
||||
property real lineWidth: 1.5
|
||||
property real value: 1 // 0..1
|
||||
|
||||
property color primaryColor: Theme.palette.primaryColor1
|
||||
property color secondaryColor: Theme.palette.primaryColor2
|
||||
|
||||
property int animationDuration: 1000
|
||||
|
||||
width: size
|
||||
height: size
|
||||
|
||||
onValueChanged: canvas.degree = value * 360
|
||||
|
||||
Canvas {
|
||||
id: canvas
|
||||
|
||||
property real degree: 0
|
||||
|
||||
anchors.fill: parent
|
||||
antialiasing: true
|
||||
renderStrategy: Canvas.Threaded
|
||||
|
||||
onDegreeChanged: {
|
||||
requestPaint()
|
||||
}
|
||||
|
||||
onPaint: {
|
||||
var ctx = getContext("2d")
|
||||
|
||||
var x = root.width/2
|
||||
var y = root.height/2
|
||||
|
||||
var radius = root.size/2 - root.lineWidth
|
||||
var startAngle = (Math.PI/180) * 270
|
||||
var fullAngle = (Math.PI/180) * (270 + 360)
|
||||
var progressAngle = (Math.PI/180) * (270 + degree)
|
||||
|
||||
ctx.reset()
|
||||
|
||||
ctx.lineCap = 'round'
|
||||
ctx.lineWidth = root.lineWidth
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(x, y, radius, startAngle, fullAngle)
|
||||
ctx.strokeStyle = root.secondaryColor
|
||||
ctx.stroke()
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.arc(x, y, radius, startAngle, progressAngle)
|
||||
ctx.strokeStyle = root.primaryColor
|
||||
ctx.stroke()
|
||||
}
|
||||
|
||||
Behavior on degree {
|
||||
NumberAnimation {
|
||||
duration: root.animationDuration
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -63,3 +63,4 @@ StatusColorRadioButton 0.1 StatusColorRadioButton.qml
|
|||
StatusBlockProgressBar 0.1 StatusBlockProgressBar.qml
|
||||
StatusWarningBox 0.1 StatusWarningBox.qml
|
||||
StatusIconSwitch 0.1 StatusIconSwitch.qml
|
||||
StatusCircularProgressBar 0.1 StatusCircularProgressBar.qml
|
||||
|
|
|
@ -103,6 +103,7 @@
|
|||
<file>StatusQ/Controls/StatusChatInfoButton.qml</file>
|
||||
<file>StatusQ/Controls/StatusChatListCategoryItemButton.qml</file>
|
||||
<file>StatusQ/Controls/StatusCheckBox.qml</file>
|
||||
<file>StatusQ/Controls/StatusCircularProgressBar.qml</file>
|
||||
<file>StatusQ/Controls/StatusClearButton.qml</file>
|
||||
<file>StatusQ/Controls/StatusColorRadioButton.qml</file>
|
||||
<file>StatusQ/Controls/StatusColorSelector.qml</file>
|
||||
|
|
Loading…
Reference in New Issue