This repository has been archived on 2024-06-03. You can view files and clone it, but cannot push or open issues or pull requests.
app/qml/ProgressCircle.qml
2018-07-28 23:05:26 +02:00

101 lines
3 KiB
QML

import QtQuick 2.0
import QtQml 2.2
Item {
id: root
width: size
height: size
property int size: 200 // The size of the circle in pixel
property real arcBegin: 0 // start arc angle in degree
property real arcEnd: 1 // end arc angle in degree
property real arcOffset: 0 // rotation
property bool isPie: false // paint a pie instead of an arc
property bool showBackground: false // a full circle as a background of the arc
property real lineWidth: 20 // width of the line
property string colorCircle: "#CC3333"
property string colorBackground: "#779933"
property alias beginAnimation: animationArcBegin.enabled
property alias endAnimation: animationArcEnd.enabled
property int animationDuration: 50
onArcBeginChanged: canvas.requestPaint()
onArcEndChanged: canvas.requestPaint()
Behavior on arcBegin {
id: animationArcBegin
enabled: true
NumberAnimation {
duration: root.animationDuration
easing.type: Easing.InOutCubic
}
}
Behavior on arcEnd {
id: animationArcEnd
enabled: true
NumberAnimation {
duration: root.animationDuration
easing.type: Easing.InOutCubic
}
}
Behavior on opacity {
NumberAnimation {
duration: 200
}
}
function repaint(){
canvas.requestPaint()
}
Canvas {
id: canvas
anchors.fill: parent
rotation: -90 + parent.arcOffset
onPaint: {
var ctx = getContext("2d")
var x = width / 2
var y = height / 2
var start = Math.PI * (parent.arcBegin / 180)
var end = Math.PI * (parent.arcEnd / 180)
ctx.reset()
if (root.isPie) {
if (root.showBackground) {
ctx.beginPath()
ctx.fillStyle = root.colorBackground
ctx.moveTo(x, y)
ctx.arc(x, y, width / 2, 0, Math.PI * 2, false)
ctx.lineTo(x, y)
ctx.fill()
}
ctx.beginPath()
ctx.fillStyle = root.colorCircle
ctx.moveTo(x, y)
ctx.arc(x, y, width / 2, start, end, false)
ctx.lineTo(x, y)
ctx.fill()
} else {
if (root.showBackground) {
ctx.beginPath();
ctx.arc(x, y, (width / 2) - parent.lineWidth / 2, 0, Math.PI * 2, false)
ctx.lineWidth = root.lineWidth
ctx.strokeStyle = root.colorBackground
ctx.stroke()
}
ctx.beginPath();
ctx.arc(x, y, (width / 2) - parent.lineWidth / 2, start, end, false)
ctx.lineWidth = root.lineWidth
ctx.strokeStyle = root.colorCircle
ctx.stroke()
}
}
}
}