源码:
import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
Item {
//该控件绘制角度为 顺时针
property int minimumuValue: 0
property int maximumuValue: 100
property real currentValue: 0
//property int maxValue: 100
//默认起始和终止角度
property int startAngle: 150
property int endAngle: 180 - startAngle
property int arcWidth: 10
property real warningAngle: 30
property bool showOutLine: true
//默认颜色
property variant backgroundColor: 'rgba(67,67, 67, 0.5)'
property variant colorGradientBegin: 'rgba(51, 147, 248, 1.0)'
property variant colorGradientEnd: 'rgba(45, 63, 119,1.0)'
onCurrentValueChanged: {
canvas.requestPaint();
}
Canvas{
id:canvas
width: parent.width
height: parent.height
antialiasing: true
property real centerWidth: width/2
property real centerHeight: height/2
property real radius: width/2 - arcWidth - 10
//property real outRadius: radius+10
//property real inRadius: radius
property real angle: 0.0
property real angleOffset: 1.9*(Math.PI/180)
property real m_startAngle: startAngle*(Math.PI/180)
property real m_endAngle: endAngle*(Math.PI/180)
property real m_warningOffset: 0.0
onPaint: {
var ctx = getContext("2d");
ctx.save();
ctx.clearRect(0,0, canvas.width, canvas.height);
if(endAngle>startAngle)
{
angle = (currentValue - minimumuValue)/(maximumuValue-minimumuValue)*((Math.abs(endAngle-startAngle))*(Math.PI/180));
}
else
{
angle = (currentValue - minimumuValue)/(maximumuValue-minimumuValue)*((Math.abs(endAngle-startAngle+360))*(Math.PI/180));
}
if(showOutLine)
{
if(endAngle > warningAngle)
{
m_warningOffset = (Math.abs(endAngle-warningAngle)*1.0)*(Math.PI/180);
}
else
{
m_warningOffset = (Math.abs(endAngle-warningAngle+360)*1.0)*(Math.PI/180);
}
}
if(showOutLine)
{
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = backgroundColor;
ctx.arc(canvas.centerWidth, canvas.centerHeight, canvas.radius+arcWidth, m_startAngle, m_warningOffset, false);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = 'rgba(255,0, 0, 0.8)';
ctx.arc(canvas.centerWidth, canvas.centerHeight, canvas.radius+arcWidth, m_warningOffset, m_endAngle, false);
ctx.stroke();
}
ctx.beginPath();
ctx.lineWidth = arcWidth;
ctx.strokeStyle=backgroundColor;
ctx.arc(canvas.centerWidth, canvas.centerHeight, canvas.radius, m_startAngle, m_endAngle, false);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = arcWidth;
var grd = ctx.createLinearGradient(0,0,0,height);
grd.addColorStop(0,colorGradientBegin);
// grd.addColorStop(0.5,colorGradientEnd);
grd.addColorStop(1.0,colorGradientEnd);
ctx.strokeStyle=grd;
ctx.fillStyle = grd;
ctx.arc(canvas.centerWidth, canvas.centerHeight, canvas.radius, m_startAngle, m_startAngle + canvas.angle, false);
ctx.stroke();
if(currentValue > 0)
{
ctx.beginPath();
ctx.lineWidth = arcWidth;
ctx.strokeStyle = 'rgba(255,255,255, 0.7)';
ctx.arc(canvas.centerWidth, canvas.centerHeight, canvas.radius, m_startAngle + canvas.angle - angleOffset, m_startAngle + canvas.angle, false);
ctx.stroke();
}
ctx.restore();
}
}
//当外部Timer的频率低于此duration的时候,回影响currentValue的置0效果,无法置0
// Behavior on currentValue{
// NumberAnimation{
// easing.type: easing.InOutSine
// duration: 300
// }
// }
}
调用:
CircularProcessor {
id: ui_temp_processor_0
objectName: "ui_temp_processor_0"
x: 30
y: 0
width: 200
height: 200
startAngle: 135
currentValue: 0
arcWidth: 15
showOutLine: true
//colorGradientBegin: 'rgba(255, 186, 51,0.9)'
//colorGradientEnd: 'rgba(255, 186, 51, 0.9)'
}
实际效果: