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 }
效果图: