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
|
StatusBlockProgressBar 0.1 StatusBlockProgressBar.qml
|
||||||
StatusWarningBox 0.1 StatusWarningBox.qml
|
StatusWarningBox 0.1 StatusWarningBox.qml
|
||||||
StatusIconSwitch 0.1 StatusIconSwitch.qml
|
StatusIconSwitch 0.1 StatusIconSwitch.qml
|
||||||
|
StatusCircularProgressBar 0.1 StatusCircularProgressBar.qml
|
||||||
|
|
|
@ -103,6 +103,7 @@
|
||||||
<file>StatusQ/Controls/StatusChatInfoButton.qml</file>
|
<file>StatusQ/Controls/StatusChatInfoButton.qml</file>
|
||||||
<file>StatusQ/Controls/StatusChatListCategoryItemButton.qml</file>
|
<file>StatusQ/Controls/StatusChatListCategoryItemButton.qml</file>
|
||||||
<file>StatusQ/Controls/StatusCheckBox.qml</file>
|
<file>StatusQ/Controls/StatusCheckBox.qml</file>
|
||||||
|
<file>StatusQ/Controls/StatusCircularProgressBar.qml</file>
|
||||||
<file>StatusQ/Controls/StatusClearButton.qml</file>
|
<file>StatusQ/Controls/StatusClearButton.qml</file>
|
||||||
<file>StatusQ/Controls/StatusColorRadioButton.qml</file>
|
<file>StatusQ/Controls/StatusColorRadioButton.qml</file>
|
||||||
<file>StatusQ/Controls/StatusColorSelector.qml</file>
|
<file>StatusQ/Controls/StatusColorSelector.qml</file>
|
||||||
|
|
Loading…
Reference in New Issue