app/resources/qml/components/ProgressCircle.qml

119 lines
3.7 KiB
QML

/*
Speed Climbing Stopwatch - Simple Stopwatch for Climbers
Copyright (C) 2018 Itsblue Development - Dorian Zeder
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, version 3 of the License.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
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.Linear
}
}
Behavior on arcEnd {
id: animationArcEnd
enabled: true
NumberAnimation {
duration: root.animationDuration
easing.type: Easing.Linear
}
}
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()
}
}
}
}