qml 实现圆形图片与圆形进度条的结合

Canvas 这个教程在蚂蚁部落里有很多实例，看了那里的API，才茅塞顿开的。圆形图片，周边有一圈进度条，随着音乐的播放，进度条能够一点一点的描画。这里把描画和圆形图片结合在一起，作为一个控件。外层调用的时候，需要启动timer，然后，出入参数就可以用了。

自定义Circular_img.qml

 1 import QtQuick 2.0
 2 import QtGraphicalEffects 1.0
 3 
 4 
 5     Rectangle {
 6             property url cuted_background
 7             property int background_width
 8             property int background_height
 9             property int arcWidth
10             property color arcColor
11             property color arcBackgroundColor
12             property real  progress: 0
13 
14             id: img
15             anchors.centerIn: parent
16             width: background_width
17             height: background_width
18             radius: width/2
19             color: "transparent"
20             Image {
21                 id: _image
22                 smooth: true
23                 visible: false
24                 anchors.fill: parent
25                 source: cuted_background
26                 sourceSize: Qt.size(parent.size, parent.size)
27                 antialiasing: true
28             }
29             Rectangle {
30                 id: _mask
31                 color: "black"
32                 anchors.fill: parent
33                 radius: width/2
34                 visible: false
35                 antialiasing: true
36                 smooth: true
37             }
38             OpacityMask {
39                 id:mask_image
40                 anchors.fill: _image
41                 source: _image
42                 maskSource: _mask
43                 visible: true
44                 antialiasing: true
45             }
46 
47             Canvas{
48                 id: canvas
49                 anchors.centerIn: mask_image
50                 width: 2*background_width + arcWidth
51                 height: 2*background_height + arcWidth
52                 onPaint: {
53                     var ctx = getContext("2d")
54                     ctx.clearRect(0,0,canvas.width,canvas.height)
55                     ctx.beginPath()
56                     ctx.strokeStyle = arcBackgroundColor
57                     ctx.lineWidth = arcWidth
58                     ctx.arc(canvas.width/2,canvas.height/2,background_width/2,0,Math.PI*2,false)
59                     ctx.stroke()
60 
61                     var r = progress*Math.PI/180
62                     ctx.beginPath()
63                     ctx.strokeStyle = arcColor
64                     ctx.lineWidth = arcWidth
65 
66                     ctx.arc(canvas.width/2,canvas.height/2,background_width/2,0-90*Math.PI/180,r-90*Math.PI/180,false)
67                     ctx.stroke()
68                 }
69 
70             }
71 
72         }

主函数调用：

 1 import QtQuick 2.9
 2 import QtQuick.Window 2.2
 3 
 4 
 5 Window {
 6     visible: true
 7     width: 640
 8     height: 480
 9     title: qsTr("Hello World")
10 
11     Circular_img{
12         id:circular_img
13         cuted_background:"./play_history_default.png"
14         background_width:100
15         background_height:100
16         progress: 300
17         arcWidth:2
18         arcColor: "#148014"
19         arcBackgroundColor: "#AAAAAA"
20     }
21 }

效果图：