-
Notifications
You must be signed in to change notification settings - Fork 0
/
UsualClock.qml
executable file
·72 lines (53 loc) · 1.93 KB
/
UsualClock.qml
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
import QtQuick 2.7
import QtQuick.Window 2.0
import QtQuick.Controls.Material 2.0
Canvas {
id: canvas
anchors.fill: parent
antialiasing: true
property color primaryColor: "#FF9800"
property color secondaryColor: "#03A9F4"
property real centerWidth: width / 2
property real centerHeight: height / 2
property real radius: Math.min(canvas.width > canvas.height?canvas.height:canvas.width ) / 2 - (canvas.width > canvas.height?canvas.height:canvas.width )/10
property real minimumValue: 0
property real maximumValue: 100
property double currentValue: 100
// this is the angle that splits the circle in two arcs
// first arc is drawn from 0 radians to angle radians
// second arc is angle radians to 2*PI radians
property real angle: (currentValue - minimumValue) / (maximumValue - minimumValue) * 2 * Math.PI
// we want both circle to start / end at 12 o'clock
// without this offset we would start / end at 9 o'clock
property real angleOffset: -Math.PI / 2
property string text
signal clicked()
onPrimaryColorChanged: requestPaint()
onSecondaryColorChanged: requestPaint()
onMinimumValueChanged: requestPaint()
onMaximumValueChanged: requestPaint()
onCurrentValueChanged: requestPaint()
onPaint: {
var ctx = getContext("2d");
ctx.save();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.lineWidth = 10;
ctx.strokeStyle = canvas.secondaryColor;
ctx.arc(canvas.centerWidth ,
canvas.centerHeight ,
canvas.radius,
canvas.angleOffset,
canvas.angleOffset + canvas.angle);
ctx.stroke();
ctx.restore();
}
Text{
color:"#3d5afe"
anchors.centerIn: parent
text:myTime.hour+ " : "+ myTime.min +" : "+ myTime.sec
font{
pixelSize: parent.width/10
}
}
}